Thank you for being here. For a better browsing experience, please use computer to open this website:)


Gamification, iOS

My Role
Interaction, Visual & Motion Designer

3 Months

Pen + Paper, Sketch, Invision, Principle

"A delightful,
safe and romantic
outdoor-running experience."

Design Problems & Outcome

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.


Fireflies, kept in your watch.

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.


Information for a safe and enjoyable night-running.

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.


Ding! Achieve milestones to collect fireflies.

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.


Supporting phone Application: Manage my running and routes

The supporting APP will serve as an additional tool that enables you to see safety situation nearby and collect recommended routes to run.

Jump to Full Prototype

My Challenges in This Project

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.

Originality Statement

I hereby declare that this project is my own work and to the best of my knowledge it contains no materials previously published or written by another person.



Design Prompt

Our 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.

Interviews & Contextual Inquiries

We started our user research by 5 semi-structured interviews. Also, we 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.

Survey: Verify User Groups and Key Problems

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: casual runners; proposeful runners. Then I seperately concluded pain points from their user journeys and emotion flows.

Personas & User Journeys


Laziness, bad habits and unenjoyable running process are key pains.

Design Principles to Guide My Design

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.

Define the Design Challenges

From our survey data, we finalized 3 key user problems. Based on those, we defined the start point of the next stage: 3 key design challenges to solve.


#1 & 2

How to help people overcome laziness and develop good habits?

Competitive Analysis: How to Change People's Behaviors

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.

Brainstorming & 3 Design Concepts

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.

Feedback From Potential Users

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.

  • Users love the fireflies idea, they felt it’s more romantic and interesting than other apps. Especially they could see these ‘pets’ every day on their watches.
  • Map occupation game can distract them from running itself, and also they are worried that it may cause some unnecessary peer pressure. But they perceive leaderboard as a positive motivation.
  • During the running process, users expect to achieve some milestones one by one with interesting games to kill boredom but also want to be focused.
  • Concept Refinement & Storyboard

    Based on the feedback, I combined option A & B and decided to design a gamified system with smart watches and phones. For my convenience, I chose to design for iOS and WatchOS. I applied ‘How Might We’ to explain the general idea and also, created a storyboard for the concept.

    How Might We...
    Enable runners to collect fireflies by outdoor running and keep them at their devices as pets?


    How to provide an enjoyable outdoor running experience?

    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.

    Deep Dive: What is an enjoyable outdoor running experience?

    From our 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.

    User Flow Diagrams

    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.


    Wireframes & User Testings

    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.

    Iteration 1: Reward for Long-term Achievements

    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 of target users, 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.

    Iteration 2: How to Better Notify Runners of Good Habits

    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.

    Iteration 3: How to Efficiently Start a Running

    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.

    Design Consideration: Cross-device Usage

    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 systemetic design of Nitefly and tried to clarify the functionalities of each part as well as the data provided.


    Visual Design & Branding Considerations

    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 semicondensed 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.

    High Fidelity Prototype

    Interactive Prototype & Further Iterations

    With InVision, I created an interactive prototype. Nitefly went through usability testing and review it with design principles. The objective of it is to explore deeper through the interfaces and find usability issues so I incorporated think-aloud method and SUS questionaire.

      Testing Process

    • Introduce the project goal, and put users at ease.
    • Describe the scenario, set up the context, and let users use the app while thinking aloud.
    • Let them evaluate the satisfaction in different dimensions.
    • Ask follow-up questions and appreciate their participation.

    A More Trustworthy and Inspiring AI Helper

    Some AI-related features are introduced in Nitefly. In the test, some users asked: how could I know the challenge/route it recommends is good? This made me think of the problem that how to make AI less like a 'black box' but more inspiring. Then I made modifications on several details.

    01. Recommended Challenges
    Add supporting truth and call-to-action phrases.

    02. Find Good Routes Nearby
    Details-on-demand of different dimensions to prove the route condition.

    Increase the Visualibility of Users' Achievement

    During prototype testing, users expressed strong interest in 'achievement sharing', they felt it as an important motivation. Therefore, I tried to increase users' fulfillment by actively notifying users to see and share their achievements in a more visually-pleasing way.

    More Onboarding Sessions to Guarantee Learnability

    Users asked a lot on the game mechaism during the testing and current interfaces are not that intuitive to them. Especially users are confused about the functionality of the watch app and supporting phone app. Therefore, I tried to add a more smooth onboarding session for both phone and watch.

    1. Users get to know key functions when firstly open Nitefly phone app.
    2. Users are guided to install watch app in 'Apple Watch' app on their phone.(If not auto-installed)
    3. After users successfully install Nitefly on their watch, they will learn more information about keeping the fireflies and how this game works.


    Future Steps

    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.

    4. HOOK Theroy

    Recently I just started to read Nir Eyal's book called Hooked. His theory of habit changing could definitely be applied to runners and also help me modify current experience Nitefly provides.


    Google Internship