Paper Prototype
How might we facilitate better communication between single parents and their support system?
Paper prototypes are a cost-effective way to explore design solutions. Based on our design question we synthesized three key tasks we wanted our users to accomplish and drafted them on index cards.
Task 1: Edit Calendar
In this task, we want our user to edit their calendar by adding an event to it.
Task 2: Request Help
In this task, we want our single parent user to request help from their support circle. They will need to create a description of what they need help with and send it to support members.
Task 3: Support Members - Accept / Decline Help Request
In this task, we want our support member user to review the help request they have received and respond to it.
Conducting usability tests was our next step; to receive feedback on the functionality and clarity of our design.
Evaluation Findings
Our paper prototypes were used in four usability studies with different participants. We conducted usability tests to evaluate the effectiveness and efficiency of our application
and to uncover any possible improvements. The participants in our studies were asked to complete three different tasks while interacting with our app. The results from the studies indicating some areas were our application could be improved upon.
Takeaways
-
Add a clear consistent menu bar on every screen of our application. This menu bar should include home, message and request, which would allow the user to access each feature at any time.
-
Add a return button on the right top corner of all screens except for the home screen and main screens of message and request.
-
Break down longer tasks such as editing an event into smaller pieces on separate screens
-
make the language throughout our application more concise and therefore making our interface look cleaner.
Annotated Wireframes
With the feedback we got from our paper prototypes, we created our wireframes. The wireframes helped us visualize all the visual design elements we need for our application. Besides, the key path scenarios we created using our wireframes gave us better views of what the real application should look like.
We received critiques for our wireframes and made changes including clarifying differences of interfaces for different types of user, removing redundant annotations and cutting unnecessary interfaces.
Hi-Fidelity Mock-Ups
Here are three screens of our Hi-Fidelity Mockups. Based on our wireframes, we picked three screens: the Home screen, the Request List screen, and the Create Help Request screen.
Takeaways
-
We refined our visual design to make all the screens have the same style
-
We picked a theme color and used it throughout our designs
-
We changed the calendar from monthly view to weekly view, to reduce the amount of information on the homepage
View Our Design
