CASE STUDY SEPHYR

1

Peter ChangUX Designer

Case Study

Let’s get away from dust allergy together.

2

ResearchIntroductionProblemSolutionStatisticGoals of DesignCompetitors

67891011

Target AnalysisUser SurveyTarget AudiencePersonas

151718

UI / UX DesignStoryboardSketchesUser TasksUsability TestingFinal Design

2224253135

Proof of ConceptUser Task 1User Task 2User Task 3Prototype Link

41454849

Style & Product MoodboardColor & TypographyLogo DesignUI ElementsProduct Design

5354555658

ConclusionConclusionBibliography

6263

Table of Contents

CASE STUDY SEPHYR

3

3Case Study Introduction

“Allergies are the 6th leading cause of chronic illness in the U.S.”

CDC, Gateway to Health Communication and Social Marketing Practice. Allergies.

CASE STUDY SEPHYR

4

Allergies are the 6th leading cause of chronic illness in the U.S, and the most common one around me is dust allergy. Most of my family and friends are plagued by dust allergy. In order to help them improve their life qualities, I started to brainstorm solutions involved in producing an actual product or a phone application.

Why I choose dust allergy?

CASE STUDY SEPHYR

5

5

RESEARCHIntroductionProblemSolutionStatisticGoals of DesignCompetitors

CASE STUDY SEPHYR

6

Sephyr is a solution to help you get away from dust allergy. Now, you can do more with the air purifier remotely. It also provides more information that fit your needs when dealing with the dust allergy.

Introduction

CASE STUDY SEPHYR

7

Dust mites are one of the most common indoor allergens. Generally, vacuuming and dusting are not enough to remove dust mites. Cleaning up the room and wash bed linens regularly are also important in-house habits. Additionally, as a dust allergic person, having an air purifier is essential. However, they may not notice the need to turn it on until they start sneezing.

Problem

CASE STUDY SEPHYR

8

An application can be a great solution to solve the problem. Firstly, the application allows users to control their air purifier remotely. Then, we can provide more information to help their allergy problems, such as air quality tracking or notifications. Therefore, I started designing an air purifier application.

Solution

CASE STUDY SEPHYR

9

Dust mites thrive in temperatures

of 68 to 77 degrees Fahrenheit (20

to 25 degrees Celsius).

TEMPERATURE

Statistic

They also like humidity levels of 70

to 80 percent. There are at least 13

species of mites.

HUMIDITY

They feed mainly on the tiny flakes

of human skin that people shed

each day.

HUMAN SKIN

What causes the dust mite

CASE STUDY SEPHYR

10

Goals of product

Users are able to turn on/off the air

purifier without staying in the room.

REMOTE CONTROL

User condition and Real-time air

quality tracking help the application

learn more about the user and give

the best advice to them.

ALLERGY/AQI TRACKING

Based on the air quality, the

application will send the notifications

if users need to clean up the room or

change bed linens.

SCHEDULE NOTIFICATION

Users can change the fragrance

of the air purifier to feel more

comfortable staying in their rooms.

AIR PURIFIER FRAGRANCE

CASE STUDY SEPHYR

11

Competitors

I did research about two different directions for Sephyr’s competitor. The first one is an application to obtain weather data and receive more knowledge about allergies. The other one is an application to control its air purifier. For this project, my goal is to combine the advantages of these applications.

CASE STUDY SEPHYR

12

• A wealth of allergy information• Offers a personalized allergy and weather

forecast each day• Extensive library of allergy articles and videos

Pros

• Interface is overcrowded• Ads lower the UI quality• No air purifier control panel

Cons

Web MD Allery

CASE STUDY SEPHYR

13

Mi Air Purifier• Remote controls the air purifier• Real-time air monitoring• Multiple modes for users

Pros

• PM2.5 number is provided but does not indicate level of air quality

• Focus on air quality but not allergy problems

Cons

CASE STUDY SEPHYR

14

TARGET ANALYSISUser SurveyTarget AudiencePersona

CASE STUDY SEPHYR

15

I invited 51 people to answer the survey and analyzed their needs on dust allergy problems.

User SurveyGender

Male

Female

Percentage

52%

48%

Age

18 - 25

26 - 35

Percentage

23%

63%

36 + 14%

CASE STUDY SEPHYR

16

From the results, 72.5% of interviewers have allergy problems. Moreover, 71.8% of them have dust allergy.

However, 70.6% of interviewers don’t have an air purifier at home.

After explaining how an air purifier can help the dust allergy problem, 94% of interviews showed interest in buying it

If there is an app for dust allergy, 72.5% of interviewers think they would want to be updated on the current air quality.

User Survey Results

CASE STUDY SEPHYR

17

The target audience are between ages 18-35, who have their own room, and care about their dust allergies.

Target Audience

CASE STUDY SEPHYR

18

David Brown28

Sunnyvale, CAProduct Designer

David is a product designer working at a tech company and lives alone in Sunnyvale. He has a heavy dust allergy, so he always needs to turn on the air purifier when he feels he wants to sneeze.

About

Even though he has an air purifier, his dust allergy still bothers him because he can’t turn on the air purifier all day long. Therefore, he is looking for a solution to solve this problem.

Needs

Persona 1

Single, Long working hours, Heavy dust allergy

Keywords

CASE STUDY SEPHYR

19

Jessica Mitchell33

New York, NYSales Director

Jessica is a sales director working at a marketing company in New York. She has two children, and both of them have dust allergy problem, so she cares about the air quality and often cleans up the house.

She needs an app to show the current air quality and remind her if she needs to clean up the room or change bed linens.

Family, Notification, Air quality info

About

Needs

Keywords

Persona 2

CASE STUDY SEPHYR

20

Vivian Kao21

San Francisco, CACollege Student

Vivian is a college student who is studying in San Francisco. These days, poor air quality often happens in the Bay Area, so Vivian is concern about her dust allergy problem and health issues.

About

She wants an air purifier that not only freshens up the air but also provides indoor and outdoor air qualities. Additionally, she wants that product can be remotely controlled so that it helps filter the air before she arrives home.

Needs

Health issue; Remote contorl; Indoor & Outdoor air quality

Keywords

Persona 3

CASE STUDY SEPHYR

21

UI / UX DesignStoryboardSketchesTaskflowsUser TestingFinal Design

CASE STUDY SEPHYR

22

Storyboard

CASE STUDY SEPHYR

23

Information Architecture

CASE STUDY SEPHYR

24

Sketch Wireframes

CASE STUDY SEPHYR

25

User Flow 1

New UserLogin and Control Panel

David is a new user of Sephyr. He wants to connect his air purifier to the application, go though the introduction and turn his air purifier on remotely.

01

Login Go throughthe introduction Device page

Completed

Input yourcondition

Turn on yourair purifier

CASE STUDY SEPHYR

26

User Flow 1

CASE STUDY SEPHYR

27

User Flow 2

Frequent UserNotification and Schedule

After getting the notification for room cleaning from the app, Jessica cleans up her room. Then she checks the next schedule of room cleaning. However, she already has a plan on the scheduled date, so she edits it to the next day.

02

Notification Open theapplication Schedule page

Click edit

Input yourcondition

Click finish Edit the date Done edit

CASE STUDY SEPHYR

28

User Flow 2

CASE STUDY SEPHYR

29

User Flow 3

Frequent UserAir Quality and Mode

Vivian is on her way back home. She opens the Sephyr application check the current air quality in Tracker page. Then, she decides to turn on the air purifier with the high-speed mode to fresh the air before she arrives home.

03

Open theapplication

Tracker page Device pageCheck hourly

forecast

Turn on theair purifier

CompletedTurn onhigh-speed mode

CASE STUDY SEPHYR

30

User Flow 3

CASE STUDY SEPHYR

31

Usability Testing

I ran a usability testing with two target users because both of them have dust allergy issues. They did the testing with low-fidelity wireframes and gave me some valuable feedback.

CASE STUDY SEPHYR

32

Improvement 1

Some testers said that they want to change the air fragrance on this page, so the “more” icon appears on the right-top side. Then, users also curious about the air quality range. Therefore, the new interface shows up the range for current air quality as well.

Device Page

CASE STUDY SEPHYR

33

Improvement 2

For the old version, Device page and Tracker page provided some similar information about the air quality. Thus, the new version reduces this problem and gives users a better understanding of the current outdoor air quality details.

Tracker Page

CASE STUDY SEPHYR

34

Improvement 3

Schedule page was kind of confused the testers because it had limited information. Based on their feedback, the new Schedule page produces a count-down bar to the next cleaning day to help users easier find out the current progress.

Schedule Page

CASE STUDY SEPHYR

35

The new user can log in the application with his/her air purifier ID and password. Then, he/she will need to go through the application introduction of some main functions.

Log In & Introduction

Final Design

CASE STUDY SEPHYR

36

Final Design

On this page, the user can remotely control his/her air purifier. It shows the current AQI number and the air quality condition. The user can decide to turn on/off the device or modes with all the information.

Control Panel

CASE STUDY SEPHYR

37

Final Design

We will track the user’s condition every day when he/she opens the application to receive data and give the best advise. Also, the user can check the current outdoor air quality details and hourly forecast on the tracker page.

Tracker & Forecast

CASE STUDY SEPHYR

38

Final Design

Based on the dust allergy condition feedback from the user, we will advise the best time period for he/she to clean up the room or change the bed linens. He/She can also edit the schedule to fit the needs and get notifications.

Room Cleaning & Bed Linens

CASE STUDY SEPHYR

39

In Settings, the user can check does the air purifier connect successfully. Then, he/she will able to change the device fragrance smell or check the air filter status on this page.

Fragrance & Settings

Final Design

CASE STUDY SEPHYR

40

PROOF OF CONCEPTUser Task 1User Task 2User Task 3

InVision Prototype >>

CASE STUDY SEPHYR

41

User Task 1

New UserLogin and choose a seat

David is a new user of Sephyr. He wants to connect his air purifier to the application, go though the introduction and turn his air purifier on remotely.

01

CASE STUDY SEPHYR

42

1/9 Start the application 2/9 Enter your air purifier ID and password

3/9 Click Log In

User Task 1

CASE STUDY SEPHYR

43

4/9 Learn about the AQI and click next

5/9 Learn about the modes and click next

6/9 Learn about tracking and click finish

User Task 1

CASE STUDY SEPHYR

44

User Task 1

7/9 Submit your condition 8/9 Turn on your air purifier 9/9 Task completed

CASE STUDY SEPHYR

45

User Task 2

Frequent UserNotification and Schedule

After getting the notification for room cleaning from the app, Jessica cleans up her room. Then she checks the next schedule of room cleaning. However, she already has a plan on the scheduled date, so she edits it to the next day.

02

CASE STUDY SEPHYR

46

User Task 2

1/6 Get notification 2/6 Submit your condition 3/6 Click finish

CASE STUDY SEPHYR

47

User Task 2

4/6 Click edit date 5/6 Edit prefer date and click save

6/6 Task completed

CASE STUDY SEPHYR

48

User Task 3

Frequent UserAir Quality and Mode

Vivian is on her way back home. She opens the Sephyr application check the current air quality in Tracker page. Then, she decides to turn on the air purifier with the high-speed mode to fresh the air before she arrives home.

03

CASE STUDY SEPHYR

49

User Task 3

1/6 Open the app and submit condition

2/6 Go to Tracker page 3/6 Go back to Device page

CASE STUDY SEPHYR

50

User Task 3

4/6 Get notification 5/6 Submit your condition 6/6 Click finish

CASE STUDY SEPHYR

51

Prototype Link

https://invis.io/KYQ49VGCUMT

Prototype & Video

CASE STUDY SEPHYR

52

STYLE GUIDEMoodboardColor & TypographyLogo DesignUI ElementsProduct Design

CASE STUDY SEPHYR

53

Moodboard

CASE STUDY SEPHYR

54

Primary

#0088FFRGB (0, 136, 255)

Secondary

#1CD760RGB (28, 215, 96)

#FFC200RGB (255, 194, 0)

#FF4F00RGB (255, 79, 0)

#DADADARGB (218, 218, 218)

#474747RGB (71, 71, 71)

Header / Title Body / Paragraph

Open Sans Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdef-ghijklmnopqrstuvwxyz1234567890‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*

Open Sans Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdef-ghijklmnopqrstuvwxyz1234567890‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*

Color & Typography

CASE STUDY SEPHYR

55

SEPHYRSEPHYR

SEPHYR SEPHYR

Logo Design Exploration

CASE STUDY SEPHYR

56

Logo with color

Logo in B&W

Final Logo Design

CASE STUDY SEPHYR

57

Icons for control panel

Icons for menu

App Icon Design

CASE STUDY SEPHYR

58

Product Design

I also designed the Sephyr Air Purifier in this case study. On the surface, you can easily see the power and mode controls.

CASE STUDY SEPHYR

59

Product Design

The concept of this air purifier is that I want it to be approachable to understand the current air quality.

Good Moderate Unhealthy Hazardous

CASE STUDY SEPHYR

60

How it works?

Internal structureAir Filter

CASE STUDY SEPHYR

61

CONCLUSIONConclusionBibligraphy

CASE STUDY SEPHYR

62

I really enjoyed the design process of this case study. Firstly, the topic that I chose is highly related to my daily life, so I can see a lot of opportunities in the project. Optimizing all aspects of information, such as researches, wireframes, and user testing, gave me a great chance to improve my design thinking skills. Finally, designing both the application and product expanded my understanding of the connection between hardware and software. To sum up, I would like to push this project further in hopes that this product will be released on the market in the near future.

Conclusion

CASE STUDY SEPHYR

63

Ratini, Melinda, “‘Dust Allergies.” WebMD, 14 Apr. 2017,<https://www.bloomberg.com/news/articles/2017-02-16/-smart-mirrors-come-to-the-fitting-room>

“‘Dust mite allergy.” Mayo Clinic, 16 May. 2018, <https://www.mayoclinic.org/diseases-conditions/dust-mites/diagnosis-treatment/drc-20352178>

Dust Allergy: <https://acaai.org/allergies/types/dust-allergy>

Molekule Air Purifier: <https://goo.gl/9d8HfH>

Mi Air Purifier: <http://www.mi.com/en/air2/>

Mobile Patterns: <http://www.mobile-patterns.com/>

Mobbin: <https://mobbin.design/>

Bibligraphy

CASE STUDY SEPHYR

64

THANK YOU