Design Keeper
Design Keeper is a digital interface that serves as an engineering design notebooking tool for students in primary and secondary school. There are seven different notebook pages with photo, video, and text prompts. These pages help students record their problem-solving, building, and testing processes in a variety of media. While Design Keeper is a free App Store app, it was only available on an iPad. To make the tool more accessible, I created Design Keeper Google Slides. Anyone with access to the template's link and an internet connection can use Design Keeper Google Slides. You will also find the details about the Design Keeper iPhone app and Design Keeper Teacher Portal on this page.
Methods
Heuristic Review
Role
UX Researcher
UX/UI Designer
Concept Developer
Deliverables
Fully Functioning Version of App-
-Available on Google Slides
STEP 1: UNDERSTAND
Background:
The Tufts University CEEO (Center for Engineering and Education Outreach) has a mission of improving engineering education in the classroom. This is how the engineering notebooking app, Design Keeper came about. However, the app was only available on iPads, so there was a desire to make the notebooking tool more accessible.
STEP 2: DESIGN & ANALYSIS
I began by performing a heuristic review of the iPad app, so I could have a clear set of criteria for comparing the new version of the app. I started looking at Google Docs because it offers free access to anyone with an internet connection and many schools are taking the initiative to add computers to their classrooms. Then I moved to Google Slides because Google Docs did not have enough features to make a similar version of the iPad app. The heuristic review I performed on Google Slides showed me that the version of the app would be very similar.
STEP 3: RESULTS
With Google Slides, I was able to create an interface that was almost identical to the iPad app.
My Design:
Original Design:
Design Keeper iPhone App
To make Design Keeper available across a variety of platforms, I started designing an iPhone app.
Medium Fidelity Prototype
Deliverables
UX Researcher
UX/UI Designer
Concept Developer
Role
Paper Prototyping
Thunkable Programming
Methods
Initial Steps:
I began looking at the iPad version of the app and drawing a mobile-friendly version of each screen. I also created pseudo-code for each screen. Then I cross-referenced it with the abilities of the Thunkable programming website to make sure I created an efficient flow.
Programming:
After I created a paper prototype and pseudo code, I began programming the iPhone app. Thunkable uses drag and drop programming.
Final Steps:
The goal of this project was to create a medium-fidelity prototype that would be used for user testing. The visual design was not a priority at this time. Having a prototype that would accept text, photo, and video inputs was the main priority. The feedback from the tests would be used to make a high-fidelity prototype for additional user testing. Eventually, a fully functioning app would be developed if the test results showed that there was value in having an iPhone version of the app in addition to the iPad version.
Design Keeper Teacher Portal
Design Keeper is an app that serves as an engineering design notebooking tool for students in primary and secondary school. Design Keeper Teacher Portal is a website designed to interact with the iPad app Design Keeper. The website allows the teacher to view their students' work all in one place as opposed to having to look at each student's iPad. The teacher can also comment on notebook pages, edit notebook page templates, or create new templates.
Methods
Paper Prototyping
Thunkable Programming
Role
UX Researcher
UX/UI Designer
Deliverables
Medium Fidelity Prototype
STEP 1: UNDERSTAND
Background Info:
This was a project under my research mentor in the LSAMP program. My research mentor had an idea for a website that teachers could use to interact with the iPad app Design Keeper. To communicate this idea with her team of web developers, she wanted a medium to high fidelity prototype. This prototype was also designed to give the developers an idea of how the information should be presented before they created a pixel perfect version.
Interviews:
I conducted an interview with my mentor to get a better understanding of what her idea for the Design Keeper Teacher Portal was. Based on this interview I made a quick sketch to encompass her ideas.
STEP 2: DESIGN & ANALYSIS
Wireframes:
After I created a paper prototype, I began using the design tool Justinmind to design the wireframes.
STEP 3: LAUNCH
Prototype:
The goal of the project was to create a medium to high fidelity prototype that could be used to communicate, in a visual form, my research mentor's idea for the Design Keeper Teacher Portal Website to her team of web developers.
