Jellyfi — Case Study

Ann Cai
8 min readOct 23, 2020

Duration: 10 weeks

My Role: User Research, User Testing, Branding, UI Design

Constraint: iOS mobile app

Tools:Sketch/Invision/Procreate

What is Jellyfi?

A self-care app that helps you with time management in order to achieve work & wellness balance.

Explore the space of virtual fitness

2020 caught everyone off guard with COVID-19 and the global lockdown the epidemic brought. Workout apps and videos, being easily accessible at fingertips, are what most people turn to when all the fitness facilities were closed.

In advance of the COVID-19 lockdown, virtual fitness training was already booming. Exercising by following online resources has gained more momentum than ever since now the fitness facilities are less available. I am one of the people who follow fitness YouTubers to get my workout done. I love having the freedom of exercising from home but meanwhile, I am also worried about making my chronicle injuries worse, and if my workouts are effective or not. I am very curious if the problems on my mind are common among people.

With some digging on the Internet, I found

  1. Virtual training has yet to achieve the same effectiveness as one-on-one training due to a lack of professional supervision and motivation.
  2. Beginners, infrequent exercisers, or people who have underlying health conditions can get injured or develop bad workout habits easily from virtual fitness training since there is no direct guidance.

I want to solve the problem:

“HMW make online fitness more personalized for beginners in order to help them stay motivated and safe on their fitness journey?”

Before I went into interviewing people, I made a list of assumptions that I wanted to verify when I talk to people.

  • My users are millennials who workout by following online workout resources.
  • My users want to know how to progress in fitness training and how far they have progressed.
  • My users need extra motivation to achieve their fitness goals.
  • My users have a need to use online workout resources with personalization and professional supervision in order to avoid injuries.
  • The common reason for my users to give up on their fitness plan is because they don’t know if it is effective.
  • My users worry about if they worked out correctly.
  • My users want to workout more frequently/consistently because they think it is a positive thing.

Interviews

6 participants, average age: 24 year old

Screening Criteria

  • Millennials
  • Use online resources to workout
  • Workout at least every other week

Through interviews, I found:

Although people do worry about if they worked out correctly or if their chronicle issues would come into the way, these are very small concerns on their fitness journey.

In fact, most of them struggle with working out consistently due to a lack of time management when life gets busy. The common reason for my users to give up on their fitness plan is because they no longer have the time or energy.

They do need extra motivation to achieve their fitness goals. They do want to work out more frequently/consistently because they think it is a positive thing. They do want to know how to progress in fitness training and how far they have progressed.

To make these interview insights ‘come to life’, I created Samantha who holds the key characters of my interviewees.

Primary Persona — Samantha

I also plotted out Samantha’s fitness journey to get a better sense of how might my solution comes into play.

Ideation

In order to help Samantha keep fit and feel good about herself, my solution will need to provide:

  1. A way to fitting workouts in her busy schedule
  2. Fun workouts that keep her going
  3. Exercise form corrections

From here, I decided that the focus of my app would be to help working professionals and students to slot in physical activities to their busy schedules.

Users can set a timer for how long they want to focus on the tasks that they are working on and a timer for how long they want to take a break from it. During the break time, they can select all kinds of activities that help them stay fit and relieve stress.

Paper Sketches

Lo-fi wireframe

Lo-Fi Wireframes - 1
Lo-Fi Wireframes - 2
Lo-Fi Wireframes - 3
Lo-Fi Wireframes - 4

User Testing

I conducted two rounds of user testing. The responses were overall positive and the major problems unveiled were:

  • I don’t know how to play the VR game.
  • I don’t know how to exit the session.
  • What the difference between a work session and a workout session? Are they the same thing?
  • The home page is overwhelming
  • Is this a music player? Can I play music? (refer to the Timer screen)

I tried to improve the interactions around the ‘VR Game’ section but decided to replace it with simpler self-care exercises. From talking to the VR headset users around me, I found it unrealistic to use VR as a way to get exercises done effectively due to the size and weight of the hardware. Also, the switch between the VR mode and regular mode might give users a seamy experience, which is the last thing they would want during their work breaks.

It was a difficult decision to make since I really wanted to build something innovative and futuristic. This also made me realize I might have gone into the problem space with a solution in my head before I even started exploring.

In the next iteration, I addressed the other feedbacks listed as well.

  • Changed the wording to communicate ‘work’ and ‘break’ more clearly
  • Redesigned the layout of the home page to make the main function stand out
  • Redesigned the navigation panel in session so that users don’t mistake it for a music player control

Mid-Fi Prototype

https://invis.io/C6YY7GKJBXM

Mid-Fi Wireframes - 1
Mid-Fi Wireframes - 2
Mid-Fi Wireframes - 3

Brand Development

Visual Identity

In order to visualize the look and feel of the app, I created a mood board by putting together a collage of images that represent the ambiance and potential color palettes of the app.

The challenge in this step for me is to define the brand keywords

https://projects.invisionapp.com/boards/PE40RU4WAQ8/ (Moodboard Link)

Keywords: Balance, Fun, Confidence, Creativity, Motivation

Moodboard

Brand Name

Options: WOKO, Re Leaf, Jellyfi

Chosen One: Jellyfi

‘Jellyfi’ suits the brand personality the most. Jellyfish resonates with the brand color ocean blue and a hint of yellow as if the jellyfish glows in the deep ocean. The symbolism of jellyfish — balance, follow intuitions, organized, tackle challenges quickly without stress.

Wordmark

App Icon

I asked about people’s opinions on which jellyfish they liked the most. 20 people participated in the vote and the majority of the votes were split between the second and the fourth one from the left. The second one from the left was chosen in the end since it has a better representation of the brand color and its simplicity gives more rooms for scaling down.

Hi-Fi Prototype

https://invis.io/TKZ59QJYN7U#/434582230_Home_Page_Copy_3

What I learned

Sleep On It

Just like what this app suggests “If you want to be more productive, you have to learn how to take breaks”, sometimes sleeping on a problem is the best way to solve it. I found myself coming back to the project with new perspectives when I left my interview notes there for a weekend.

Constraints are good things

I always thought having more constraints would make it harder to deliver a good project. During the process of developing Jellyfi, constraints helped me move forward in many ways. When I was injecting colors into the app, I was lost in the ocean of possibilities. Restricting myself to the color palette that I created really helped me follow the brand guideline and complete the look and feel of the app.

The Next Step — Let The World Know!

Once the product is ready, it is time for me to create a marketing site so that people who need Jellyfi can know its existence and use it to change their life for the better :)

Smart Wear Platform Exploration

In the future, I would also love to bring Jellyfi to the wearable market. I can see more potential in Jellyfi’s smartwatch app than its mobile app. With the support of smartwatch technology, Jellyfi can push users notification when the timer is up in a less intrusive manner. Without a mobile phone, users can also focus on their work better and have fewer distractions.

There are many other ways health and fitness apps can take advantage of wearable technology. In Jellyfi’s case, one example would be recommending users break activities that will benefit them the most based on their recent heart rate and activity level.

Design Impact

The Tarot Cards Of Tech — The Catalyst

Nowadays, more and more companies, especially in the tech industry, provide high-quality break room, gym, and other social elements to encourage a low-stress work environment. Jellyfi promotes the work culture that quality is over quantity. I can see Jellyfi help organizations improve human resources efficiency if their employees use the app in office. Jellyfi might even help coworkers form closer bonds if they happen to take breaks at the same time!

The app also would come in handy for freelancers and people who work from home to track their work and life balance.

--

--