After receiving helpful initial design feedback, we continued on to create a monochrome wireframe
prototype that was complete enough to "run” a new user through a particular use scenario of our system.
Using Balsamiq we demonstrated the overall interaction flow of our system. We illustrated all the
risky interactions of our system, and created the screens necessary for a user to go through the
systems main use scenarios.
Here is a video of our initial wireframe prototype in use:
Here is the design rationale for this prototype based on our initial feedback:
“One direction we took in our updated design is to offer distinct emotions through icons,
but also give the user a scale to access an overall emotion. Feedback from our previous design
sketches indicated that because people feel so many emotions at once and different extents of
those emotions, it makes sense to have each emotion on a scale. We also planned to have the
activities pages offer items specifically in response to the moods that the user tracks during
that day (or the most recent moods logged).
Part II: Specific Changes Made for the Wireframe Prototype
Home page:
For our home page design, we wanted to keep many of the aspects present on the homepage from our initial
sketched Design1. For example, we kept the date at the top of the homepage as well as the streaks
message. The streaks message can encourage the user to continue using the app and logging moods,
as well as give them a sense of achievement as the numbers get higher and higher. It also provides
a gamification aspect to the app which we hope will be fun. We also kept the calendar format of
allowing the user to click on past dates to see their log history, however, we added a label
instructing users to do so in case the calendar itself is not strong enough as a signifier.
We did not include the “Trending TED Talk” portion of Design 1’s homepage because we wanted the
interface to be a little less crowded and overwhelming, but we kept the box beneath and had it feature
inspirational quotes. The new design’s homepage also had a larger logging button as a better signifier
of the app’s main purpose as well as more obvious icons. In our updated design, we also kept the
personalized greeting featured on the homepage of Design 2 because it helps the user feel more seen
and acknowledged by the app and creates a rapport.
Log Page:
Our log page kept the emoji emotion indicators that were present in Designs 2, but it models after
the very clean and open format of Design 1’s log page. We also added an “Overall Mood” slider in
case the user feels that being able to quantify their emotions makes more sense in their mind or
if they want multiple POV’s of their emotions. We kept the “Notes” box from Design 1 for the user
to add any thoughts related to their emotions of the day. Instead, of the question directly asking
user’s why they feel the logged emotions from Design 2, we simply asked users to write a point of
gratitude because it evokes less pressure and a little less thinking in the case where users do not
want to spend a lot of time on the app or if they are not in a mental space to reflect on a given mood.
Activities Page:
Our updated activities page combined elements of Design 1 and Design 2. As indicated above, the
recommended activities would now be directly related to the mood that is logged. The page changed
to “Choose an activity” at the top and featured the “skip for now” button at the bottom from Design
1 to give users freedom, but the activities were represented with icons and labels as in Design 3.
User Summary:
For our user summary page, we wanted to keep the scrolling feature from Design 3 since it makes it
easy to see their popular activities that do not fit on one page. The activities the user goes to
most would be ranked in a list on this page as in Design 1. The user’s name was included at the top
as in Design 1 as well as a donut pie chart, indicating the prevalence of different moods.
Mood History (when user clicks a date in calendar on the homepage):
The mood history page would open to a summary in the center, but a scrollable page similar to the
History page of Design 2 was included so that users could go between nearby dates or hit a back arrow
key to return to the calendar and select a different date. We also performed additional user testing
and had users from our target population record themselves performing tasks with our monochrome
wireframe prototype to gain additional feedback for our next design iteration.