Background
For my prototyping and implementation course, I worked with a team of 3 others to prototype a habit-tracking application. This course was aimed at familiarizing us with the prototyping process, ranging from paper to high-fidelity prototypes. We also needed to develop a concept that was multi-modal, which led us to conceptualize both a mobile and smart watch application.
While there is no lack of self help and productivity apps on the market, we decided to view this as a challenge. To make sure we weren't just creating another copy of other habit tracking apps, we wanted to address the areas where some of these apps fell short and introduce new features that would help users stay motivated. Additionally, this process showed me the importance of each step in the prototyping process.
Project overview
With Momentum, you are able to decide what habits you’d like to track, view monthly and weekly progress, set personalized reminders, and gain insights into your personal achievements. Additionally, it is a social platform where you and your friends can keep each other accountable throughout the day. You can compete with your friends, climb leaderboards, or share live photos to keep your daily streak alive.
The Task
For our quarter long project, we were asked to create a multi-modal application, that is developed using each stage of the prototyping process. We followed the curriculum of the course, beginning with ideation exercises, then going into paper prototyping before using digital tools, like Figma, to develop low to high fidelity prototypes.
Early Ideation and Designs
Although I prefer to begin each project with an understanding of the user, it was fun to dive straight into the prototyping process. However, this emphasized the need for user evaluation down the line since we lacked accurate information about user needs.
Charette Sketches
In order to get all of our ideas out on the table, each group member individually sketched some screens. We then discussed what features stood out to us, and which ideas to move forward with.
Lo-fi Screens
We then combined the ideas from our sketches into some preliminary lofi screens.
Moodboard
We all had similar visions for our app, but with slightly different approaches. We put together a moodboard to visualize the potential aesthetic of our app. We tried to emphasize motivating yet welcoming colors that echoed our message of personal wellness and positivity.
Competitive Analysis
We researched similar habit tracking and productivity apps in order see what we could improve upon to make our app stand out. We found four apps, and each reported on the main features, pros and cons, and the main takeaways for Momentum.
Design Tenets and Core Features
As we developed our goals for the project, we wanted to establish some principles to guide us along our prototyping process.
Focus on understanding users: We considered our target users and how our features could best support their lifestyle.
Evaluate users and tasks: We performed user testing in order to understand any pain points or errors in our design.
Iterative design: We had several stages in our design process, upon which we made changes and improvements based on feedback to better meet the needs of our users.
Simple and intuitive design: We aimed to make our design only as complex as it needed to be in order for users to complete their tasks and accomplish their goals.
After reviewing our personas and looking at similar apps, we refined the vision and goals we wanted to accomplish with our design.
Multichannel: Mobile application works in tandem with watch interface.
Checklist: Can set daily goals and check them off as they are completed.
Reminders: Set specific time frames for tasks to receive reminder notifications.
Social platform: Create groups to see your friends' activity and progress. Challenge friends with group leaderboards to encourage friendly competition, and view photos of activities throughout the day.
User insights: See visualizations of your progress and habit history to learn where improvements can be made.
Early Lo-Fi Designs
With our core features in mind, we developed more low fidelity wireframes for our our narrative digital prototype. These frames are meant to display a preview as to what a user may see when navigating through the main page and activity completion process. I was responsible for the home page, activity flows, and progress summary pages.
Mid-Fi Prototype and User Testing
After receiving feedback and approval from our professor on our lo-fi designs and concept, we proceeded to develop the main flows of our mid-fidelity prototype that we would use in user testing. We individually created the designs in Figma after assigning flows to each respective member. Afterwards, I edited and connected the frames to create a functional prototype for our user testing sessions.
An overview of our prototype in Figma
User Testing
Our mid-fi prototype displayed the main functionality of our app. In order to see if the user could accomplish their goals with our design, we tested the main paths with users. These tests provided us with valuable insights that inspired changes in our design.
We recruited participants through word of mouth, and included users who matched our target users (busy, motivated young adults). In order to test the main user flows of our design, we asked our participants to complete the following tasks:
Start an activity from a smart watch.
Start and save an activity and picture on the mobile app.
Navigate the leaderboard page.
Complete a shared habit from the social feed, and share it with friends.
We asked users to complete these tasks using the interactive Figma prototype, and asked them to explain their thought process aloud and express any struggles during the test. Additionally, we asked follow up questions about the difficulty of the tasks, and what (if anything) could be improved upon to make the experience more intuitive.
Results and Changes
Participants were generally able to make it through each task with minimal observed errors. Some referred to the prototype as intuitive and easy to navigate, appreciating the simplicity of the interface as they completed tasks. However, we received a great amount of constructive criticism that helped improved our design.
Clarity of User Paths and Interactions
Some participants mentioned that the tasks felt unintuitive or repetitive, where they had to take more actions than necessary to complete a task. In this example, some users expected the activity to start after they pressed the "Start Activity" button. I redesigned the chain of events so that the activity timer began after that button was clicked.
Before: user had to press the play button after pressing "Start Activity"
After: The timer starts after the user clicks "Start Activity"
Critical Interactions and User Expectations
We found that some of our interactions and flows did not align with users' expectations, or had missing features that prevented them from navigating the tasks intuitively. We had to make our design more consistent across the different pages, and include more familiar and descriptive interactive components to make actions more obvious.
Included back and exit buttons for activity notifications on watch interface
Made the "Tag Friends" icon more descriptive and obvious when sharing an activity
Included time selection wheel in the task edit to be consistent with habit creation menu.
Consistency and Language
Some users were confused by the wording of certain buttons and phrases across the prototype. I edited the language where necessary to ensure consistency and avoid confusion. The amount of words displayed were also reduced to avoid visual clutter.
Changed "Save and End Activity" to "Save Activity"
Changed "Start Habit" to "Start Activity", since "Activity" is used on other pages
Avoiding Clutter and Emphasizing Simplicity
Some felt that the social feed page was visually overwhelming, with too much information in one place. We also simplified the process of tagging friends in shared activities, since most participants struggled with that task.
Simplified social feed page
Simplified tagging feature
Final Prototype
Style Guide
We developed the following style guide for our Hi-fi prototype, choosing colors and fonts that evoked a bold and energizing feeling.
Highlights
Full Mobile Prototype and Link
Conclusion and Future Directions
Lessons and Take Aways
Paper Prototyping
Paper prototyping allowed us to iterate through several ideas very quickly without becoming over committed to a design before we transitioned to digital prototypes. The freedom to draft ideas, knowing they aren't going to be presented or used as a final product, was reassuring and let us put all of our thoughts on the table.
Iterative Design
It was very important for us to gather feedback and discuss the direction of our design through each iteration between our initial concept and our hi-fi design. Whether it was from our professor, or users we had conducted testing with, the feedback we received was critical to improving and refining our design. Each time we iterated we developed new ideas and improved upon old ones that ultimately led to our design being more effective.
The User is Not Like Me
It was extremely beneficial to test our prototype with users, since we are biased as designers. After weeks of refining a design and making intentional decisions, it can be difficult to know how a product will resonate with users who haven't been behind the scenes. It is hard to know how useful our design is if we do not gather feedback from users directly. Even if something seems clear or intuitive to the design team, user testing can reveal many of these blind spots in a design.
Team Work on Figma
If viewing the prototype on Figma, you may be able to notice inconsistent placement of bottom nav bars or back buttons. One thing we did not do well was establish guidelines as to what size frames we were using, the design system we would be using, or different creative directions we were going. This was a big learning curve, especially when connecting the different screens during the prototyping phase. While I did my best to make the different flows visually consistent, there were lots of small differences in the way we designed and organized layers that ended up causing aesthetic issues.
Future Directions
Further User Testing
Since we made a lot of visual design choices in the final prototype, it would be interesting to see how our overall aesthetic is received by users. Looking back, I question whether we could have done something more modern and less flashy with our colors and branding. Additionally, there are always things we may have missed along the way and more user testing would ensure we more accurately address user needs.
User Research
Similar to user testing, it would be best to conduct more formal user research in order to better understand the needs of our users. Since this class was mainly focused on the prototyping process, we did not conduct any preliminary user research. But, it would be helpful to conduct interviews, observations, and further contextual inquiries to understand the problem space. Specifically, it would be helpful to know how users prefer to track habits, what tools they use, and what would benefit them in a habit tracking app.
Refine and Iterate
As mentioned previously, further iterations bring about new ideas and provide opportunities for improvement. In terms of our visual aesthetic and user experience, further cycles would help us improve our design further.
Site by Jack Thomson made with Framer