Projects

Edee Mobile App Design

/ Contract Full-time 2023

Profile Design Revamp

/ Full-time 2022

Design System Creation

/ Full-time 2022

RoS Mad Libs Board

/ School Project 2022

Liven Magazine

/ School Project

Tokyo Tonight

/ Freelancing 2023

Others

Home

About

Poster Gallery

Resume

Project Overview

EdeeCare is a health-tech start-up that aims to provide an all-in-one solution to improve the lives of individuals with epilepsy. I joined the company as the only UI designer to help with the early-stage designs of their mobile application.

tools used

Figma

scope of work

  • UI Design,
  • Visual Design,
  • Design System,
  • Mobile design
Epilepsy, which is sometimes called a seizure disorder, is a disorder of the brain. A person is diagnosed with epilepsy when they have had two or more seizures.
- CDC -Center for Disease Control

PROBLEM

Individuals with epilepsy are faced with various health concerns related to their condition such as managing triggers, medication, and other chronic conditions they may have. Tracking these health factors can bring them a lot of benefits in terms of better understanding their health trends and cluing in triggers and risks for their conditions, increasing probability to minimize or even prevent seizures.

However, from the surveys and interviews, we found out managing these health factors in a convenient and relevant manner can be challenging, leading to difficulties in managing epilepsy effectively.

The Daily Journal

An easy way
To track health conditions

Daily Journal feature allows users to easily log what happened during the day to stay alert on their health trends. Our pre-selected questions allows users to promptly provide responses through simple interactions like slider and bubble-select.

Dynamic
Journaling

Every user is different and our health conditions vary each day. The Filtering allows users to select specific categories of questions relevant to them on that day.

Health Insights

The real magic happens in the insights page where it displays the summary of the important metrics captured from the Daily Journal in a comprehensible form.

Our Process

Insight from the survey of 36 users
One of the major challenges faced by people with Epilepsy includes:
1. Managing seizures, triggers and medication
2. Understanding the impact of their physiological and psychological conditions (such as mood, stress, sleep, other comorbidities) have on their seizures

With the Journal feature, our aim was to create a prompt way for our users to log the summary of their day to more effectively manage their epilepsy.
For this feature, there was an existing low-fi design.

wHAT WASNT WORKING

The tabs to log seizure, triggers, medication separately hindered the flow of information from one to the next. The experience of logging felt extremely rigid, irrelevant, and uninviting.

Setting Goals
Moving Forward

More relevant information organization & hierarchy

With the new journaling feature, we wanted to bring about a more cohesive way to tie different aspects about the user together for them to better map the relations between their lifestyle and its impact on their seizures.

Creating engaging, positive, and fun experience

Living with epilepsy can be really tiring and uncertain not knowing when another seizure might take place. Most of them have to take medication for a lifetime and they are more likely to suffer from other chronic disorders (such as anxiety, depression, and panic attack). Hence, it was also important to keep in mind bringing fun and inviting aspect into the design.

Applying the new Edee Branding

We have just launched the new Edee branding. The app should reflect the new branding.
UX researchers took over from here to build a better user flow that can execute the goals we have set.

Understanding user flow + scoping down

I was provided the above user flow. But some parts (circled in red) have been pushed to later launch due to the lack of capacity in the data science department. For the first launch, we decided to implement skeleton features for the journal and add on the other features upon getting more feedback and capacity.

Simplified User flow : Journal App Skeleton

UI Research

Before starting the design, I looked at various top Journaling apps on the market to gain inspiration for the UI. Whoop, Flo, Daylio were top apps that influenced my designs.

Visual + Interaction Research

On brand, engaging and friendly visuals.
Quick and easy one scroll interaction to complete today’s journaling, making the daily journal logging not a gruesome, but a fun process.

Project overview

I also looked at seizure management apps such as Seer, Nile, and Epsy to understand the current design standard of our competitors.

Although many of our competitor apps lacked engaging visuals, they had a clear visual hierarchy that made information easy to digest and quickly drew attention to important CTAs. Their huge library of health-research database also made them trustworthy brands.

Epsy is currently the #1 epilepsy app in the market. Although their modern visuals did stand out among the current epilepsy market, I felt using too many bright and contrasting colors are not very accessible especially for the epilepsy audience, who are more prone to have visual sensitivity than others (common triggers for seizures can be bright flickering lights).

Low-fidelity Design

With the UI/UX research and the user flow in mind, I created a low fidelity design to showcase my understanding of the user flow and my design decisions for the main interaction points.

Visual + Interaction Research

Sharing this with the rest of the product team confirmed that I’m going in the right direction and I can move on to the next step while letting other team members to get set up for what’s coming up.

Creating high-fidelity Design

Now comes the fun part of applying some colors and styles! But I kept in mind goals we set from the beginning and some things I noted down during my UI research.

Goals we set:

  • Quick, easy, and relevant
  • Fun and inviting
  • Edee-branded

Somethings to watch out for visuals

  • consider accessibility (Consistent use of styles and components)
  • Make CTAs clear and hard-to-miss
  • don’t use too many bright, neon, or highly contrasting colors

Design Decisions

Design Decisions

With Edee’s primary color, purple, in mind I wanted to give purple theme to the overall design of the app.

Using primary purple as a highlight color

The main purple is used only to highlight important interactive elements such as the links, CTA buttons, slider etc. When used with the lighter hue of the purple, it created very pleasant and playful aesthetic. I ended up using it across the whole platform; including for navigation’s active state, icons, etc.

Using secondary colors to create hierarchy

Secondary color yellow and orange was used to highlight less important elements such as the secondary button component, or to highlight a different state of a component. And they were used much less in the overall design. But whenever used, they created a playful contrast to the purple theme.

Design with Accessibility

Use of the grid and consistent use of color & text styles, spacing and sizing helped in accomplishing a professional and accessible design of the feature.

General Feedback
from Users

We later decided to incorporate a filter to select and track categories that are the most relevant to them.
Since adding their own question/category to the app required too much capacity, we decided to do a hotfix of adding a hyperlink that leads to a form entry so we can still retrieve all the desired categories user want to track. If there are enough requests of a certain category, they will be manually added to the app by Edee.

Design System Documentation

As I was the only designer of the company, I couldn’t spend too much time on the design system. But componentizing basic and recurring elements such as the texts, color, grid, buttons, text inputs, pills, etc., was crucial to keep designs organized and consistent moving forward.
Before starting the next feature design, I created a Figma design system that documents the text styles, color styles, and other basic components I used in the ‘daily journal’ feature.
Componentizing basic styles and components in Figma not only saved me more time when working on other features,  but also helped me to design within the constraints of Edee branding. The design system is still at the early stage of implementation but will solidify with more designs to come and with the growth of the company.
Instagram |LinkedIN |
© Katie Park, 2022