Steply
Smartphone application concept - individual capstone project for a human-computer interaction course at Worcester Polytechnic Institute
Project Deliverables
Mobile User Interface
Interactive Protoype
My Role
Concept Creation
UI/UX Design
User Testing
Project Context
CS 3041: Human-Computer Interaction capstone project
Three Weeks
October - November 2019
Background
I worked as the sole designer on Steply, my take on a goal-oriented fitness tool to encourage people to meet their daily step goals. This Human-Computer Interaction course capstone was a three week long individual project that allowed students to design and implement a sophisticated, useful, and fun user interface.
Objectives
1) Create a simple but useful app concept
2) Research, ideate, and design the interface
3) Discuss the idea and a test mid-fidelity prototype
4) Refine design and implement it as a high fidelity prototype that can be demoed to the class
My Design Process
Usability and User Experience Goals
Steply is intended to challenge the user to meet their step targets every day in an engaging, motivating way. To accomplish this, I identified my top three most important user experience and usability goals.
Convince the user to allow Steply to send them encouraging updates about their step goals
Let users tailor their Steply experience to their liking
Have streamlined and efficient menus so users can easily input their preferences
Research
I started by my competitive analysis by assessing the landscape of existing fitness apps on the App Store. As I expected, there was a notable over-saturation of fitness apps targeting people who wanted to lose weight or begin intense fitness routines, but I believed my vision for Steply hit a certain niche of users who wanted an intuitive, bare-bones step tracker.
Following my assessment of pre-existing fitness trackers and pedometers, I looked around on Dribbble for user interface design inspiration.
After I solidified my vision for Steply, I created a mood board in InVison of potential UI patterns, typefaces, and color schemes that spoke to me.
Feature Ideation
Due to course time constraints, I could only focus on two key features for my app idea.
1) Notification management
Many users are sensitive to notifications. There needs to be an easy tool for users who want to adjust how often Steply reminds them of their daily step goal progress. The app can empower users by giving them the ability to decide how often they receive push notifications.
2) Goal adjustment
As users meet their incremental step goals, they need the option to decide the rate at which they would like their daily targets to increase. Because of this, there needs to be a feature where users can set the pace for their step progress.
Wireframing
I typically use Notability, an iPad app, for low-fidelity wireframing and initial user flows
Low-Fidelity Prototype
After I created my initial wireframes and basic user flow, I moved to Balsamiq to create my low-fidelity interactive prototype.
Heuristic Evaluation
I had three users perform heuristic evaluations on my low-fidelity prototype.
During the heuristic evaluation, I learned that my users were confused by my button selection system. Specifically, the button design I chose didn’t indicate that the user could select more than one option at a time. Taking their concerns into account, I changed the design of the buttons from standard dials to radio buttons, indicating that the user could select more than one option in the same modal.
Another pain point that arose during the heuristic evaluation was that there were not enough customization options for notifications. In my low-fidelity prototype, I included notification toggles for every hour, when the user hasn’t walked in a while, and when the user was close to their goal. To solve this, I added a “custom” option where users could input which days, hours, and minutes they would like to be reminded.
Finally, users pointed out there was no indication of which page they were on, Daily Progress or Summary. This problem was the most straightforward problem to fix as I simply bolded the title of the tab they were on in the navigation bar.
High-Fidelity Prototype
Applying what I learned from the heuristic evaluation, I translated my low-fidelity prototype to a high-fidelity interactive prototype in Adobe XD.
Final Prototype
I used Adobe XD’s prototyping feature to bring Steply to life.