UX Case Studey

Personalized Hydration and Reminder Setup

Bzt

Educators' Marking Experience with Deep Learning-Based AI Solutions

Project Overview

Modernizing Yangchon Brewery’s Website to Enhance User Experience and Integrate E-commerce Functionality

Role

Product Designer - Interaction design, Visual Design, Prototyping, Usability Testing

82%

Project Duration

12 weeks

Project Team

Tope Salami, CEO
Yu San, Software Engineer
Marcin Rygielski, Software Engineer
Max, AI/Deep Learning Specialists

The Problem

The AI feedback may be inaccurate or too generic, and educators often lack efficient tools for managing scores and delivering detailed feedback—this is a key focus of our MVP.

82%

Hightlight

Outcome

Outcome

FEATURE 01

Customized Hydration Reminders

Personalized Hydration and Reminder Setup

During the initial onboarding settings, users can determine their personalized daily water intake based on their body specifications and set up reminders with alarms.

FEATURE 02

Drink Tracker

Allows users to easily log their daily water intake, helping them keep track and improve their hydration habits.

FEATURE 03

Challenge

Users can join or create fun hydration challenges with friends. Users can track their daily water intake, earn badges, and encourage each other, making staying hydrated a shared and motivating experience.

Product Requirements

Review and Enhance AI Feedback

To allow educators to review, edit, and enhance AI-generated feedback on student answers.

Manage Scores and
Feedback

Enables score adjustments, answer corrections, and edit feedback for effective student evaluation.

Provide Feedback for
AI Improvement

Provides a platform for educators to leave feedback that improves deep learning algorithms.

Problem Statement

How might we use deep learning to help educators easily review and improve AI feedback, manage scores more efficiently, and enhance the accuracy of the AI?

Ideation

Calculate water intake page

Based on feedback, the interaction was considered cool and good, but users felt discomfort due to the excessive number of steps. Therefore, I have organized and streamlined the process, reducing the number of steps. Additionally, I have implemented a display for the selected status to enhance clarity. I've also redesigned the buttons to look distinct and clear, facilitating easy recognition for users.

Furthermore, I have replaced the 'skip' option with 'standard goal' to better align with user preferences.

Feedback from Leadership and Educator

Simplify Feedback Submission

Create a user-friendly interface that simplifies the feedback submission process.

Implement Consistent Design

Use consistent design patterns and styles throughout the design system.

Enable Batch Actions

Allow users to perform actions on multiple items at once, such as editing or deleting multiple feedback entries. This will save time and increase efficiency.

Ideation

Calculate water intake page

Based on feedback, the interaction was considered cool and good, but users felt discomfort due to the excessive number of steps. Therefore, I have organized and streamlined the process, reducing the number of steps. Additionally, I have implemented a display for the selected status to enhance clarity. I've also redesigned the buttons to look distinct and clear, facilitating easy recognition for users.

Furthermore, I have replaced the 'skip' option with 'standard goal' to better align with user preferences.

User Task Flow

Solution

13/

Customized Hydration Reminders

In this flow, users can set personalized water intake goals by entering their age, gender, and weight.
Also, they can set alarms to establish a consistent water intake routine.
02/

Drink Tracker

In this flow, users are allowed to add and track their beverages, from water to coffee, making it easy to monitor and improve their hydration habits.
03/

Challenge

In this flow, users can create challenges and invite friends to participate together.

User Task Flow

Three main user neeeds

User Testing and Major Improvement

Calculate water intake page

Based on feedback, the interaction was considered cool and good, but users felt discomfort due to the excessive number of steps. Therefore, I have organized and streamlined the process, reducing the number of steps. Additionally, I have implemented a display for the selected status to enhance clarity. I've also redesigned the buttons to look distinct and clear, facilitating easy recognition for users.

Furthermore, I have replaced the 'skip' option with 'standard goal' to better align with user preferences.

Set alarm reminder page

Following user testing, it became evident that some users encountered difficulty understanding the 'Days' buttons, primarily attributed to the use of only the initial letter of the first word and their close proximity. In response, I have introduced a new pop-up window with clearer and more user-friendly buttons. These buttons now also display the selected status for enhanced clarity.

Design Process

01/
Empathize

· Survey

· User interview

· Background research

· Survey

· User interview

02/
Define

· User Quotes

· Persona

· User Journey Map

03/
Ideate

· Idea Brainstorming

· Sketch

· Information
Architecture

· User Task Flow

04/
Prototype

· Design System

· Mid-Fidelity Wireframe

· High-Fidelity Wireframe

· Final Prototype

05/
Test

· Usability Testing

· Feedback Incorporation

· Continuous Iteration

· Case Study

04/
Prototype

· Design System

· Mid-Fidelity Wireframe

· Feature Analysis

· High-Fidelity Wireframe

05/
Test

· Usability Testing

· Feedback Incorporation

· Continuous Iteration

· Case Study







Daily hydration Intake result page

During the user tests, 

When people were figuring out their goals, they were a bit unsure. So, I made it simpler by using a standard measurement of one cup, which is about 250ml. This way, they could better understand how much water they needed.

Based on feedback, 

Users can easily change how much water they want to drink in this session, and I've made it simpler by using a handy toggle button instead of milliliter and ounce buttons.



I also added an edit button to change the goal.

Style Guide

From the survey result I found out that

High Fedeility



High Fidelity Wireframe

Reflection

What’s Next?

· Develop a feature that enables weekly and monthly analysis.
· Make a special page for badges when you complete a challenge.
· Want to add fun animations to make it feel like a game and boost motivation.

Lessons Learned

In my initial approach to my first UX case study, my focus was primarily on creating visually appealing designs with engaging interactions to attract users. However, as I delved deeper into the process, I came to the realization that prioritizing accurate status representation is paramount compared to merely having a stylish design.



User testing sessions, I gained valuable insights, underscoring the significance of user testing in the UX design process. This experience highlighted the need to balance aesthetics with functionality, ensuring that the user experience is not only visually pleasing but also reliably informative.

Next Project

Next Project