FRRRREDERIC LIU

Thank you for being here.
Please use wider screens for a better experience.
←
Back
about
b-side
Nitefly is a delightful, safe and romantic outdoor-running experience in Apple Watch and mobile.
With a firefly-collecting game, users could overcome laziness and bad running habits, also important concerns for outdoor runners such as safety will be solved with suitable guidance.
🕒  3 Months
🥇  MUSE Creative Award 2023, Gold Winner ↗
🏷️  Gamification, Wearable App, The Flow Theory
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies as pets
Fireflies are flying on your watch plate, they will fly away to indicate your laziness.
Achieve 'mile'stones while running to collect fireflies
Guidance to set challenging but attainable running goals.
Tips and data summary to avoid danger and develop good running habits.
Run with your friends and share your accomplishments in mobile app.
Find, save and manage your outdoor running routes in mobile app.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Nitefly is a delightful, safe and romantic outdoor-running experience in Apple Watch and mobile.
With a firefly-collecting game, users could overcome laziness and bad running habits, also important concerns for outdoor runners such as safety will be solved with suitable guidance.
Nitefly is a delightful, safe and romantic outdoor-running experience in Apple Watch and mobile.
With a firefly-collecting game, users could overcome laziness and bad running habits, also important concerns for outdoor runners such as safety will be solved with suitable guidance.
Outdoor running has become an increasing trend especially among young people. Therefore, we started the design process by identifying their needs with contextual inquiries and user surveys.
Check out the detailed findings
↗
Personas
Henry, the purposeful runner.
His goals are keeping fit and living a healthier life.
Run without any warm-up and choose the route that along the busy streets.
I’m a lazy guy. I am easy to give up when trying to lose weight by exercise.
Christina, the casual runner.
Her goal is to relax and get refreshed.
Wear earphones with loud music and usually start too fast and get exhausted quickly.
Outdoor running is a great way for me to release my pressure after work.
User Journeys
Laziness, bad habits and unenjoyable running process are key pains.
Based on these pain points, I summarized key design principles and key challenges to guide our design process.
🙆 User needs
💭 Design principles
🔵 Key challenges
A ‘friend’ to help and motivate me to develop a good outdoor running habit.
Guidance should be sensible and caring for users to change their behaviors.
How to help people develop a better outdoor running habits?
A focused, safe and happy outdoor running experience.
Accessible interactions and suitable cognitive load while running.
How to help people overcome laziness and be more spontaneous?
A ‘personal trainer’ that assists me to enjoy, track and manage my running.
A more personal experience and also flexible user flows.
How to provide a more enjoyable outdoor running experience?
→
→
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
How to help people overcome laziness and develop good habits?
I obtained ideas and inspirations about how to change users' behaviors from a competitive analysis on fitness and habit-developing apps. Then I came up with 3 design options and consolidate them into one concept.
📢 Notification
✅ Get informed of the concrete data
⛔️ Need strong self-motivation
🎲 Gamification
✅ Provide fun and kill laziness
⛔️ Distract users from running itself
👥 Social Influence
✅ A good supervisor and motivator
⛔️ May cause too much peer pressure
Design Concepts
Notification +
Social Influence
Notification +
Gamification
Gamification +
Social Influence
Concept Testing
Users love the fireflies idea, they felt it’s more romantic 🧚 and interesting than other apps.
Map game can distract them from running itself 🏃🏼, and also they are worried about 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.
How Might We
Enable runners to collect fireflies by outdoor running and keep them at their devices as pets?
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
How to provide an enjoyable outdoor running experience?
Wait... what is an enjoyable experience? I deeply dived users' expectations and summarized ideal solutions in two different elements: physical context and psychological status.
Physical Context
Based on research, users think there are 5 external elements important for an enjoyable outdoor running.
🏝 Afforestation
🌦 Weather & Clothes
🏙 Scenery
🥾 Road Condition
💡 Lumination
So how might we provide an all-in-one map on the mobile to help them find suitable routes when going outdoor running?
Also, we could let users rate their running places or routes based on these criteria to get all the data unavailable from the public web.
Psychological Status
I referred to a psychological theory: The Flow 🌊.  It is a mental status describing the feeling of fully involvement and happiness.
I used a Mental Status Matriic created by a famous psychologist Mihály Csíkszentmihályi.
After asking 7 runners to place their feelings during the running process into the matrix, I found that why they cannot get into ‘the flow’ ↓
Hover on the legends below ↓
Most of runners' self-report didn't fall into these fields: worry, apathy.
Runners' self-report usually fall into these fields: anxiety, arousal, etc.
It shows that the challenges they took is not suitable for them.
Runners' ideal mental status: flow.
To achieve this , runners need to use their mid-to-high abilities to solve mid-to-high challenges.
The problem is obvious with the chart:
Their challenges ≠ Their abilities
So, how might we recommend runners with suitable running goals based on their abilities and daily situation?
We can provide guidance for users to better arrange their daily and long-term challenges.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Based on these thoughts, I created a user flow chart to guide the design and then finished the main flows in low-fidelity mocks.
Check out the full view of user flow diagram
↗
With the low-fidelity mocks, I did a rapid user testing session to consolidate the usability of the user flow and main interfaces. Then I refined the design with the feedback.
Rewards system
In the testing, 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.
I came up with 2 design alternatives ↓
Fireflies’ Scenarios as Rewards
Enable fireflies to fly in different scenarios. Users could unlock the scenarios by achieving different long-term goals.
Titles as Rewards
Users could receive different titles by achieving different long-term goals. Friends see the title on the leaderboard.
With 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 Scenarios as a reward system 🎈 for long-term achievements.
Iteration on user flow
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.
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.
Refined user flow ↓
Open Nitefly on Apple Watch
Get reminders for overall good habits
Set running goals
Get tips for good pre-running habits
Start running
Collect Fireflies + Run
Finish Running
Get tips for good after-running habits
Before
‍The tips for good running habits is easy to be ignored and forgotten.
After
‍Users will see the appropriate notifications of short phrases right before and after running.
Quick and more accessible running start
In the research, 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.
One-click start
‍Users will see recommended challenge and start running with one click.
More convenient goal setting
‍Users will set their running goals by scrolling rather than clicking.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
After all these iterations, I created a visual style and created high-fidelity mocks and an interactive prototype with Invision.
Then the product went through usability testing and review it with design principles. With these, I finished the final audit for the product.
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.
Dark background and fluorescent lime gradient is selected to provide a sense of refreshing and also align with our key theme: fireflies.
Also, I tried to provide a high color contrast (over 7:1) to increase the readability 📝 , especially when users are running in strong light.
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.
A More Trustworthy and Inspiring AI Helper
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 ↓
Recommended challenges
‍Add supporting truth and call-to-action phrases at the home page.
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.
Notification for achievement
‍Users get notifications for any new achievement.
Instagram stories
‍Users can see and share their achievement with fancy animated pages of their reward and fireflies.
More Onboarding Sessions to Guarantee Learnability
Users asked a lot on the game mechanism during the testing and current interfaces are not that intuitive to them.
Therefore, I tried to add a more smooth onboarding session 🙌🏻 for both phone and watch.
Step.1
‍Start onboarding on Nitefly phone app
Step. 2
‍Install Nitefly watch app on ‘Apple Watch’ app
Step. 3
‍Continue onboarding on Nitefly watch app
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Fireflies, kept in your Apple Watch.
Future steps
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.
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?
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.
HOOK theory 🔁
‍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.
←
Previous
Google Insights Finder
Next
Yahoo Membership Design Language
→
ƒ.ℓ. All rights reserved.