My Role
User Research, Interaction Design
Duration
Feb 2021 to Apr 2021
Our target users are outdoor runners with smart watches. The short of perseverance and laziness for running and exercising is quite common among the runners which might lead them to easily give up, also the safety problem and bad running habits are also important concerns for outdoor runners.
Facing these problems, I present Nitefly, an apple watch application that provides interesting 'firefly-raising' experience to encourage them to achieve their running goal.
You can see your fireflies on your watch plate. They will fly away to indicate your recent laziness in running and exercising. Also, you can set yourself a reminder to run when receiving notifications.
Recommendation and suggestions are available for you to set challenging but attainable running goals. Tips from fireflies could also help you avoid danger and bad habits.
You can see fireflies collected while running. Several milestones will help you to achieve your running goal step by step. Every time they finished a stage, he will hear 'Ding' and feel the vibration.
The supporting APP will serve as an additional tool that enables you to see safety situation nearby and collect recommended routes to run.
It was my first time to design for hardware, so I read through the WatchOS human interface guidelines and played around with the apple watch a lot. Also, It’s not easy but super interesting to explore how to change users’ behavior by gamification and make an integrated product. Therefore I made many attempts such as applying psychological theories into design and conducting rapid iterations. Finally I learned a lot from it.
My design started from an interesting finding in our day-to-day observation: outdoor running has become an increasing trend among young people. Therefore, we attempted to identify their needs and design a better experience.
I started our user research by 5 semi-structured interviews. Also, I followed 2 users and observed their behaviors during their outdoor running to know users’ detailed tasks, problems and motivations. What's more, an abstracted affinity map was made to summarize key insights about their characteristics, thoughts and habits.
But what are the most important pains? Who are our key users? Based on what we found before, I consolidated critical user journeys by getting quantitative data with a survey. Check out my survey framework and main findings from 42 responses.
With these evidence, I developed personas and a user journey map. I defined my target users as two groups based on their running patterns: 1) casual runners; 2) purposeful runners. Then I separately concluded pain points from their user journeys and emotion flows.
Shown below is a summary of the important insights from former research and analysis. From the ultimate user goals of our 2 user groups, I summarized their user needs into 3 categories. Based on these user needs, I created 3 design principles as the goals to guide the following design.
From the survey, I finalized 3 key user problems. Based on those, we defined the start point of the next stage: 3 key design challenges to solve.
Laziness is a common phenomenon in terms of body training. How could I help people to develop running habits? I conducted a competitive analysis to know about others' solutions and their pros/cons.
I explored the existing fitness and behavior-changing apps and clustered them in three attributes: gamification, notification and social influence. Below are the pros and cons of each method.
Inspired by these methods, I did a brainstorm session to explore a good way to help them overcome laziness. I tried to avoid the disadvantages of different methods and finally I got 30+ ideas. I converged them into 3 design concepts.
I walked through each concept with 5 potential users and invite them to compare these ideas to our competitors such as Nike Running app. Here's the main feedback I got:
Based on the feedback, I combined option A&B and decided to design a gamified system with smart watches and phones. I applied 'How Might We' to explain the general idea and also, created a storyboard for the concept.
After the general concept, I started to focus on the running experience itself. I tried to provide a more detailed solution to enhance runners’ experience from the beginning to the end.
From the user research data, I summarized an ideal experience with two elements: 💪 physical context and 🧠 psychological status. I tried to come up with suitable solutions to help users get the ideal experience.
After finishing all the ideation of possible solutions, I created a user flow chart to guide me to finish the wireframes of interfaces with multiple functions. Consider Design Principle 3.
I created a wireframe with the user flow above and conducted a rapid testing session. The objective of it is to help me quickly modify the user flows and main interfaces. Based on 5 participants' words, I made several iterations on the whole user flow as well as the interfaces.
Users love collecting fireflies, but one concern is that they don’t have a long-term motivation to keep it as a routine. Therefore, besides daily fireflies, there should be something that improves the rewarding feeling, which will trigger them to run more with the application.
I came up with 2 design alternatives and did a quick test on 3 runners, users feel that:
• They would like to see the metaphor that is more visible and aligned with fireflies.
• Everyone has different start points, so such "level" may demotivate some beginners.
Also, considering Design Principle 1, I selected option 1 as a reward system for long-term achievements.
Runners are reminded of good habits when they open the Nitefly application. However, users feel that they will probably forget when they are actually ready to run. Also, in the testing session, users tend to directly skip these instructions, none of them were aware that they could swipe to see more.
Therefore, I revised the user flows and notify users these habits at the right moments.
Users feel that they need to click so many times to start a simple running every day, especially for goal-setting page. Therefore, I simplify the process with an easy start page and make goal-setting more efficient and accessible for small screen.
In wireframe, I designed the whole application with 2 devices: smart watches and phones. Smart watches are considered as the primary medium for users’ daily usage, a supporting phone app is also introduced to facilitate the running. After the user testing session, I did a systematic design of Nitefly and tried to clarify the functionalities of each part as well as the data provided.
Font: Saira Semi Condensed
Saira provides the feeling of urban, delight and technology. It’s suitable for Nitefly’s visual branding and communicate our spirit.
I selected semi-condensed version because each character took less space but still with a good readability. It fits best for the small screen especially apple watch.
Color Scheme: Fluorescent Lime
Dark background and fluorescent lime gradient is selected to provide a sense of refreshing and also align with our key theme: fireflies.
Also, we tried to provide a high color contrast (over 7:1) to increase the readability, especially when users are running in strong light.
Sections and Buttons
Based on the font’s appearance, the radius of sections were set in a harmony of the font. Also, accessibility is a big issue for small screen. To avoid fat finger problem and confusion, buttons are stylized and highlighted in an obvious way. Also, the minimum size of a button was set as 64 ✖️ 64. Consider Design Principle 2.
1. Incorporate with more social elements
In usability testing, more than one users said they expect more social elements and fun with friends. One big challenge is how to avoid too much social pressure, but still let them engage their friends in such an interesting gamified process.
2. Design for different stages in running
People have different feelings during the running process, for example they feel more relaxed and easy at beginning than after running for a while. What can be a better solution for that difference?
3. Universal design
It can be foreseen that users who do not run outdoor can also be motivated by the fireflies. Also, some people prefer to bring phones to run. Therefore, it would be better if the product can cover a larger user group.
