smug-thumbnail.jpg
Group 96.png

sMug

“sMug” is a smart mug with a temperature control and maintenance system. Users could link physical mugs to their phones and set/keep the temperature for their drinks on the “sMug” app.

Objects

• Brand and design a mobile app for the smart mug.

Role

• UX research
• Branding
• UI UX design
• Prototype

Tools

• Figma

• Adobe Photoshop & Illustrator

Year

2021

DESIGN APPROACH

approach.jpg

RESEARCH

Problems

Coffee and tea have become the most popular drinks nowadays. People do need more caffeine during the pandemic time especially for those who work from home.

“sMug” is designed for home or office warm drinks which need to keep the temperature stable. Users could download the “sMug” app to change or keep the temperature of their drinks. Users could even customize their own drinks and set the temperatures based on their preferences. 

User Research

I interviewed some friends who enjoy coffee/tea/milk tea. The interview questions include their habits about daily drinks, what’s their needs and goals, and what’s their frustrations about the drinks. Even though they have different preferred drinks, they all have the problem with drinks getting cold before finish.

user interview.jpg

Research Findings

Based on the users’ needs/goals/frustrations/concerns, I believe there could be a lot of potential opportunities to develop a mobile app to keep the drinks warm. I got some inspiration from users’ habits, requirements, worries, and suggestions in terms of the UI design.

Features

As a mobile app connected to a physical product, the features should be related to the product seamlessly. From the previous interview and research findings, here are some basic features for ‘’sMug’.

features.jpg

Easy Pair

Temperature

Control

Recommended Temperature

Customize Drinks

Pair sMug and the mobile app easily through bluetooth

Set the temperature on her/his habit

Check recommended
temperature for different drinks

Setup your personal favorite drinks in different temperatures

DEFINE

Persona

The target customers for “sMug” would be coffee/tea lovers who work from home or office. So I created the persona about Olivia, who is a Graphic Designer based in Dallas, TX. She is a coffee enthusiast who enjoys trying different coffee beans. The temperature matters a lot to her drink during daily life.

smug-persona.jpg

INFORMATION ARCHITECTURE

Site Map

After defining the target users, I started to design the information architecture. First of all, the Home/Dashboard is the essential part of the sMug app, after users connected the devices, the Dashboard page will pop out. Users could adjust drink temperature, choose recommended drinks temperature, or add their personal drinks here. Also, they could edit, move, delete drinks on the Home page. In the menu bar, there would be several options including Account, Devices, Settings, and Recipes. I believe there could be more potential choices in the future like Shop, Personalization, etc.

map.jpg

User Flow

Then I mapped out the most frequent flow of users, which is the flow of how users pair a new sMug, adjust the temperature, set up/delete customized drinks.

flow chart.jpg

BRANDING

Colors & Logo

The attributes of the sMug app would be healing, supportive, reliable, and have a relationship with coffee or other drinks, so I believe the brown/gold tone would be the best choice. For the secondary color, I chose a red color for some call to action.
Then I started to design the logo. It’s a brownish mug with a heating effect both at the bottom of the mug and on top of the mug, which brings the concept of keeping warm for your drink. Then I designed the charger underneath, which represents the physical charger of sMug.

branding.jpg

WIREFRAMES

SKETCH

I sketched the wireframes based on the information architecture. The process on paper gave me lots of inspiration about what the interfaces could be and how the frames link together.

IMG_2FDAF8735994-1.jpeg

SOLUTIONS

User Interface

I designed the user interfaces after the branding attributes are defined. The product includes three segments as follows:
-Onboarding: The process that users log in or sign up, connect devices to smartphones.
-Controlling: The dashboard for users to adjust the temperature for drinks, select recomanded preset drinks’ temperature, set up personal customized drinks, and edit preferred drinks in the dashboard.
-Menu: Where users set up for their preferences, manage her/his account, add/delete devices or other potential pages like recipes, shop, etc.

UIs.jpg

Prototype

I implemented the prototype on Figma after the basic pages are designed. Every single process for the users’ path is achieved nicely. I also designed the animations for some unique processes if necessary. For example, the processes of auto sensing sMug, the effect of the thermometer panel, etc. The following process shows how the UI works on the functions.

1.gif

Onboarding

The process of how users login/ sign up for sMug account, search and pair a new sMug device. The user could go back to the previous process easily as well. 

Dashboard

After the user selects the device, the dashboard will show up automatically. The user could select the default pre-set drinks to adjust the temperature. Also, the user could drag the indicator on the thermometer to adjust the temperature. 

2.gif
3.gif

Custimized Drinks

The user could add her/his drinks any time by tap the plus button. The setting choices will slide from the bottom. The user could select the icon, define the name, and set the temperature of the unique drink. If the user wants to move/delete/edit the drinks, she/ he will tap the edit icon on the right side.

Menu

The prototype of how the menu bar works. The user could set up her/his account, add/delete devices, change the system settings here. There would be more potential pages here in the future like recipes, shop, etc. 

4.gif

Testing

User Testing

After the UI and prototype were implemented, I conducted the user test. I interviewed 4 participants and all participants will go through the prototype and finish the following tasks:


- Login and pair a new sMug device.
- Change the temperatures for the default drink.

- Select different default drinks.

- Add your personal drinks, including edit and remove.

- Go through the menu bar and change the metric of the temperature. 

The following affinity map shows the wins, pain points /frastrations, and suggestions based on the UI and prototype. 

affinity map.jpg

User Affinity Map

Research findings

and changes

First of all, I'm glad that users love the branding and UIs, for example, they like the color scheme, logo design, and they thought it is a great product that could solve some actual problems about drinks in their daily life.

The onboarding process exposes some problems about secure or pair process. For example, some of them need confirmation after they input the username and password. And when the users are paring new devices, they may need some other ways to confirm except the series number(a little bit hart to read).

The home/menu page impressed some of them as well. Some participants love the layout like the indicator, the icons of the drink. And they could easily find out how to add their personal drinks. However, I'm glad they found some problems, too. For example, the text size is too small when they browse that on their phone devices, and some participants tend to change the metric on the home panel directly. 

Iterations

Log in

confirmation

The first change of onboarding is the login confirmation, the previous version didn't include this specific page about the user, I added the confirmation page between these steps. The registered user could either use his/her previous sMug, or pair a new sMug on this page.

Before

Screen Shot 2021-11-15 at 8.08.56 PM.png

After

Screen Shot 2021-11-15 at 8.08.56 PM.png

Home

​First of all, I enlarge the text/button size of the slide-up menu, which is a lesson about dealing with the mobile UI design -  always preview the screen on your phone.

Then I revised the metric switch. Users could change Celsius or Fahrenheit directly on the home panel.

Before

After

add drink-1.jpg
add drink.jpg

Before

After

home-add jasmine.jpg
menu.jpg

WHAT I LEARNED & NEXT

Mobile App

Designing an MVP for a brand new mobile product is a challenge, but it is a great opportunity for me to implement my idea from zero. I believe I gained a ton of experience about how a product was born after the idea

The research is important. After I got the idea, I wasn't sure about some exact functions, but after the research was implemented, I could define what users were thinking and the hypothesis was settled down to concrete features. 

The branding is crucial, it's great to define the tone and attributes of your brand, after I summarized the adjectives and objectives(mugs, coffee, tea) of sMug, the color scheme popped out afterward.

UI and Prototyping with animation is a great visual tool before the product is handed to the engineering team.

The core of the dashboard is the thermometer and drinks, so I took a lot of time to design the UI and make the animations.

Next

I believe there would be more imagination for sMug App. sMug has a physical product so we could add the online store to enlarge the potential target audience. It’s based on people’s daily drinking habits, so we could add some recipes to make the users have more engaged. We could also add some social features like sharing drinks with friends to spread the lifestyle of using sMug.

Thank you for scrolling :)

More Case Studies