Disclaimer: No AI was used in the creative process of producing art, neither in design nor prototyping.

ZeeZee

This Case Study shows its full process, from concept to a high fidelity prototype.

Case Study

About my role

As this was a project provided by the teaching facility CareerFoundry, I was responsible for the whole process as a product designer. I had to come up with solutions and my own artwork. Since I was allowed to combine this workflow with AI, I scarcely used it in order to learn, but only using LLMs in testing phases and simulating walkthroughs was helpful.

Scenario

Design a new web app in the field of health, where users can measure their data and benefit from it.

Come up with what problem you want to solve and how.

a person holding a smart phone next to an electronic device
a person holding a smart phone next to an electronic device

DEFINE

PHASE ONE

knowing what's the case

A problem to solve

People who lack of quality sleep need a way to enhance it step by step because the longer good sleep gets neglected, the longer their bad sleep affects other aspects of life.

We will know this to be true when we see that the regular amount of hours per sleep decrease too much over three days in a row.

The potential solution

An app that offers several scientific approaches to improve one's sleep routine as an editor plus dashboard and milestone view to track given achievements.

People can use it anytime and even input their tracked hardware data e.g. health-rings or electronic mattress.

Competitive Analysis

The following apps display potential competitors in the field
of sleep assistance apps, categorized in their availability:

striped blanket and pillow on bed
striped blanket and pillow on bed
blue

auditive ambience sleep help apps

- Sleep Cycle

- Calm

- BetterSleep (Relax Melodies)

- Sleep Sounds

black

Sleep routine assistants (most close to ZeeZee)

- Neura

- ShutEye

- AutoSleep

green

Paid premium apps with clinical subscription

- HelloBetter Schlafen

- somnovia

- somnio

Competitor profiles for Neura & ShutEye

+ Overview, marketing profile, SWOT profile and competitive analysis

Competitor Profile 1: Neura

Neura is an AI-powered sleep hygiene app that links daily habits with sleep data to create personalized routines for better sleep.

Key Objectives

Improve sleep quality through holistic analysis of stress, nutrition, and exercise.

Overall Strategy

Integration of lifestyle factors into a central dashboard for preventive sleep optimization.

Bottom line

● AI-based predictions.

● Automated reminders.

● Community challenges.

Market Advantage
Strengths

● Strong personalization through AI.

● Seamless multi-app integration.

Marketing Profile

Holistic approach beyond pure tracking, ideal for users with complex routines.

Bottom line

● Data linking with apps.

● Scientifically backed plans.

Targets wellness enthusiasts with a focus on prevention and integration.

Bottom line

● Social media influencer campaigns.

● Partnerships with fitness apps.

● Free trial with data import.

● Content marketing on sleep science.

SWOT-Profile
Weaknesses
Opportunities
Threats

● Dependent on user data quality.

● Steeper learning curve.

● Expansion to B2B wellness.

● New sensor partnerships.

● Privacy concerns.

● Competition from big tech health.

UX Analysis
Usability
Layout

Highly intuitive with automatic analysis and simple onboarding.

Linking daily factors to sleep causes via AI.

Apple Health, Google Fit, wearables like Oura or mattress sensors.

Compatibility
Differentiation
Navigation Structure
Calls to Action

Dashboard-dominated with graphics for trends and recommendations.

Prominent "Start your plan" buttons and subscription nudges after insights.

Modular tabs for insights, routines, and settings.

Competitor Profile 2: ShutEye

ShutEye is an all-in-one sleep app with tracking, habit reminders, snore detection, and journaling for comprehensive routines.

Key Objectives

Complete sleep monitoring with behavior and habit optimization.

Overall Strategy

Combination of tracking and interactive tools for experimental sleep improvement.

Bottom line

● Gamification elements.

● Personalized sounds.

● Weekly reports.

Market Advantage
Strengths

● Comprehensive tools including diary.

● Good free version.

Marketing Profile

Versatility as an entry-level suite for routine builders.

Bottom line

● Affordable entry.

● Broad feature set.

Appeals to multi-users with an "all-in-one" promise.

Bottom line

● App Store optimization.

● User-generated content.

● Promo deals for premium.

● Viral challenges.

SWOT-Profile
Weaknesses
Opportunities
Threats

● Interface can feel overloaded.

● Variable sound accuracy.

● Extended wearable syncs.

● International localization.

● Feature copying by giants.

● Rating fluctuations.

UX Analysis
Usability
Layout

Flexible but initially overwhelming due to features.

Snore detection and integrated journaling.

iOS/Android, HealthKit, basic wearables.

Compatibility
Differentiation
Navigation Structure
Calls to Action

Dashboard with tracking charts, sounds, and journal views.

Upsell after first analysis with "Unlock Full Insights".

Bottom tabs for Home, Track, Diary, and More.

Silhouette of woman using phone with city view.

User Stories

Login / Sign up flow

As a newcomer to the app, I want login asap, so that I can dive directly into the routine creation.

System for submitting your own health data

As someone who is not as educated on sleep as doctors are, I want a simple onboarding, so that I understand what health information is relevant.

Dashboard of all data

As a person with not much headspace for complex information all at once, I want a clean interface, so that I can get a quick understanding of my current situation of sleep hygiene.

Analysis page

As a constant improver, I want to see if my results can get summarized, ideally in any analysis graph, so that it will be easy to see any progress.

Learning space for new ways to improve one’s own sleep

As a person who lacks sleep, I want to improve it and learn in a very simple way, so that I can implement this routine without reading endless passages of blog articles.

Achievement Area

As a fan of seeing progress, I want a playful feedback system, so that I stay motivated.

Routine editor

As someone with a complex routine, I want a way to build my own sleep system, so that it adapts to what I have to do.

Notes section

As someone who might forget what I’ve learned, I want a simple note function in place, so that I have all my sleep hygiene learnings right when I need them.

In order to get a clear understanding of what the product will need:

Interviews
& surveys

Research Goals

1. To better understand user behaviour around the activity of sleeping.

2. To determine which tasks users would like to complete using a sleep routine app.

3. Documenting user pain points with existing sleep routine apps on the market.

4. (Collecting data on the context in which users would use a sleep routine app.)

7

84

Interview Results

Participants

Affinity Mapping

Many of the participants show an interest in a sleep routine app, but there is concern for privacy usage of their health data.

  • There is a mutual understanding how good sleep can improve performance at work.

  • Making sleep as a habit that sticks is a common concern.

  • Some already use sleep meditation help and classic ways to calm down, but others never heard of these techniques.

It seems to be worth focusing on making a sleep routine stick for the first few nights. This would niche down the problem statement to:

”How might we help users to make their sleep routine stick and improve their sleep hygiene, while making it fun and motivating?”

Card Sorting

16 cards and 5+ categories, hybrid mode on UX-tweak.com, participants were asked to sort features as cards by categories or create them on their own.

Able to reach 9 active respondents who sorted 100% of all cards.

Results: Standardization Grid
Results: Similarity Matrix
Summary

Results display a very similar constellation like the first prototype of the sitemap. Design was intended to stay generic to minimize confusion. Results prove themselves as a win towards this attempt. Next time better pre-study explanation for Avatars and Routine Editors to reduce confusion.

User Personas

5 personalities inspired by our collected insights:
They should help us understand the potential user better.

Student / Programmer,
often working through the night

9to6 Work routine,
focus on sleep rituals

Freelancer with flexible work times,
late sessions

Strict work schedule,
focus on sleep hygiene education

Student life with BUSY LEARNING PHASES,
focus on ENTERTAINMENT aspect

Mental Models & User Journeys

In order to understand the very opposites of user personas, the amount of personas got narrowed down to Night Owl and Early Bird. Additional User Journeys help for further analysis.

Simon works too late

ZeeZee has the potential to help Simon by not only showing his statistics of lacking sleep. It offers the setup for his ideal bedtime routine and keeps a goal to go to bed on time for at least 3 nights.

Yvonne keeps scrolling

To improve her condition it might be a simple but boring task: no more phones in bed time. ZeeZee can help out as beneficial game that gains only when keeping the routine.

Task Analysis & User Flows

Provide a general summary of the services you provide, highlighting key features and benefits for potential clients.

Goal of Simon's journey map

Simon wants to to bed on time, but first check his current sleep habit stats on an app. He just installed ZeeZee and tries to set up his health data.

Goal of Yvonne's journey map

Yvonne has her strict routine and lacks of good sleep, so she sets up a new ritual to increase its quality. She just installed ZeeZee and tries to set up her routine.

Claire works remote and she tends to get tasks very late due to different time zones. She just installed ZeeZee and tries to find methods that engage her with better sleep.

Goal of Claire's journey map

Mobile-First and Cross-Platform Optimization

black Android smartphone on bed
black Android smartphone on bed
A pocket tool and desktop widget
  • Usage primarily oriented before and after bedtime, but stays available as desktop sized experience.

  • Functions contain health smart wear integration and sync, usually benefit from mobile sized designs.

  • Someone who stays on his/her private phone won’t be willing to exclusively go on his/her computer just to launch ZeeZee before sleep

Content Audit

This project aims to develop a user-friendly mobile application that enhances productivity and organization. Through intuitive design and seamless functionality, users can efficiently manage tasks, set reminders, and collaborate with team members.

Information Architecture

To summarize all features and pages that should be accessible, a sitemap provides essential data and guidance. After the card sorting just minor tweaks:

Refined State

This is the version after people sorted the features into their according categories, e.g. Device Sync was put to 6.0

First Version

Regular starting sequence with intro, login and general terms & conditions. After that you get to the dashboard, from there the core features 1.0 to 6.0 are accessible.

Designing the Zees

The visual core of ZeeZee's first look

As main inspiration of the game mechanics, that should motivate users to fix their sleep schedule, is to help a little friend. As like in Tamagochis, a so called "Zee" should look simple enough. This pushes one's own imagination to add what is looked for - and of course this look is extremely time efficient.

The Zee 1.2

For further testing it required a more expressive and various variants, herefore I used my experience as 2D animator and kept it simple: 3 frames, 15 variants

Zee No#6 Linda
Zee No#1 Zegg
Zee No#8 Wesley

Design System

Prototype's essentials depicted

Wireframes

From first scribbles straight to a functional mid-fidelity prototype

Low-fidelity Wireframes
Mid-fidelity Wireframes

Mid-fidelity Prototype

High-fidelity Wireframes

ZeeZee High-fidelity Prototype ver1.2

Test the mobile prototype in the link down below

Usability Tests & Ai Workflow

Due to the fact that CareerFoundry - the company who supervised this project - went into bankruptcy while I just had finished half of the course, I had to buckle up before their website and course materials went offline. I had three days for 45% of the remaining exercises, which originally were around 50 days.

person wearing brown and white watch
person wearing brown and white watch
The very unexpected (true story)
Product Design Speedrun

Thanks to the rising advancement and accessibility of AI, it was the ideal case to try out accelerating my workflow to finish the course. In my experience was Perplexity AI Pro a reliable tool, because of its sources linked to every output, so I could double check information and credit them accordingly. AI simulated UX.

PRESENTATION

PHASE SEVEN

Build your own dreams

Or someone else will hire you to build theirs. Here is how you can take action – starting today.

Project based questions

What were your learnings or takeaways from the prototyping process?

Keep it simple and short. If you don't figure out what to insert or write make a placeholder, no matter what to keep the momentum. It's a way to channel the flow and creativity for the most relevant aspect which is most presented in that moment to be added. In my case when going through the scribble phase I said to myself almost every time: "You can change everything later on, nothing has to be perfect but to be there. This is an early pre alpha".

How would you figure out whether your prototype does what it’s supposed to?

To figure out whether the prototype does what it's supposed to is to stick to its sitemap. To "mise en place" all pages offers overview. Second phase is testing the prototype immediately and going through a persona's user flow. If I don't reach the expected end sequence, I will know what to tweak.

Did you draw inspiration from existing apps? How did this inspiration influence your work?

Getting to know the App Game Pokémon Sleep was literally a huge help in understanding gamification for sleep assistance apps. The reduced UI and playful auditive experience caries through the whole game. On the other hand simple Smartwatch Sync apps such as from CMF Watch inspired the display of most relevant sleeping data.

How does your prototype meet the requirements for your project’s business goals?

By ensuring the business goals while creating the projects design language, because this represents all necessary components to reach these goals. If I don't make the design playful in the first place, how do I promise to keep the user's motivated and engaged in the first place?

What role do UX and UI design play in product design?

User experience an user interface are key parts of product design. Together they form the essentials: UX is the cognitive aspect while UI is mostly visual, although they rely on each other. As Product Design it is a complex play between their implementation in order to achieve solving given problem statement. A button has its rules which size color and placement it gets, an on the same time it depends a lot when and how often it occurs when using the product. This, as simple example, may depict what UX and UI are about within product Design.

Who do you admire, follow, and are inspired by in the industry?

Masahiro Sakurai, famous Game Designer and inventor of the famous character / Franchise Kirby, Super Smash Bros and more. As one example, he always manages when leading a product / game production to find an ideal middle between stakeholder interests and user satisfaction plus vision fulfillment. His approaches are simple but genius, keeping complex systems playable for even children and seniors, which seems for me like an master task.

How do you estimate the amount of effort a project or task will take?

Experience, and if not given, I'd try to figure out what the project / task is built of, in tiny tasks which may be calculable easier.

How do you hand off to engineering?

First of all have enough meetings with the Developers in the first place to find out what they personally need and how the work. The Design aspect should work for them as easy to handle like a building manual from IKEA - at least that's my rule of thumb. Creating a visual pleasing clean overview of the project's visuals and naming as much layers as possible in order to not let any question open. And if so, staying ready to be called for help.