Overview

As a popular bubble tea brand, Chatime's existing app has several flaws that discourse user engagement. As a user myself, I have personally encountered difficulties while using the app and have often contemplated ways to improve it. Therefore I took on a mission to redesign the app.

Problem Statement

The motivation to redesign Amazon's website arises from recognizing that it does not fully meet the evolving needs of its users. Despite its resources, users face a cluttered interface, difficulties with shared carts and wishlists, less personalized recommendations, authenticity issues, and a poor browsing experience. These problems cause frustration and inefficiency, making navigation, managing shopping lists, and finding relevant products challenging. Concerns about product authenticity and browsing further diminish satisfaction. The redesign aims to create a more intuitive, efficient platform, ensuring a smooth and satisfying user experience akin to a centralized hub for seamless transactions.

Role UX UI Design Tools Figma, Figjam Timeline May - June 2023

Creative Process

01 User Research

Online Review

While conducting my research, I explored the app store to examine user reviews of Chatime’s app. I found that many users were expressing frustration with the app's design, resulting in a significant number of one-star reviews. This feedback highlighted critical areas for improvement and emphasized the need for a more user-friendly and visually appealing interface.


User Interview

I have Conducted interviews for 3 Chatime users. Here are some questions I asked in interviews:


  1. How often do you use Chatimes app?

  2. How easy is it for you to navigate through the app?

  3. What do you primarily use the Chatimes app for (e.g., ordering, checking rewards, browsing menu)?

  4. Have you ever encountered any difficulties navigating the app? Can you describe a specific instance?

  5. How do you feel about the overall look and feel of the app?

  6. Are there any features that you feel are missing or could be improved?

  7. How do you feel about Chatimes overall experience?

02 Identifying Pain Points

Pain Point 1 - The home page is disorganized and lacks excitement, making navigation difficult.

Pain Point 2 - The layout for viewing and selecting store locations is cluttered.

Pain Point 3 - Accessing the menu is difficult without first selecting a location, causing unnecessary steps.

Pain Point 4 - There's no dedicated section for current promotions, causing users to miss out on deals.

03 Persona

Utilizing insights and details from the interviews and research, I developed a persona to steer my design process with empathy and prioritize the users' needs.


04 Ideation

User Flow

Wireframes

I designed each step of the wireframes. As I laid them out in Figma, I identified weaknesses in my initial ideas. By maintaining a narrow scope and iterating on these wireframes, I was able to develop new solutions.

05 User Testing

To ensure my app met the needs of my target users, I created a prototype in Figma and tested it with five participants. I established several test goals to guide the testing process.

Goal 1 - Determine whether users can navigate the app effortlessly and locate key features without confusion.


Goal 2 - Evaluate whether users find the app's design visually appealing and intuitive



Goal 3 - Verify that all primary features work as intended and meet user expectations.



Goal 4 - Assess how efficiently users can complete specific tasks within the app, such as selecting a location, adding a drink item, or making a purchase.



Goal 5 - Gather qualitative feedback on the overall user experience, identifying any pain points or areas for improvement.

Goal 1 - Ease Of Navigation

Goal 2 - User Interface Satisfaction

4/5 users navigated through the app effortlessly

5/5 users found the app design

visually appealing and intuitive

Goal 3 - Feature Functionality

Goal 4 - Task Completion

Goal 5 - Feedback

1/5 users had difficulty locating add to cart

5/5 users were able to navigate through the app

5/5 users were able to complete the task

5/5 users enjoyed using the sit and loved the redesign

06 Final Design

In redesigning Chatime's "Get Started" and login pages, I focused heavily on the visual aspects by incorporating a modern, vibrant color palette and sleek typography. This approach enhanced the overall aesthetic while ensuring that key elements, such as buttons and forms, stood out to guide users effortlessly through the process.

The Chatime homepage was transformed with engaging visuals and key information, creating a more immersive experience. A points progress tracker was added to keep users motivated, along with a personalized welcome-back message to strengthen customer connection and loyalty, making the page both functional and inviting.
I redesigned Chatime’s location page to be more user-friendly and visually clear, helping users quickly find nearby stores. I also added an option to save preferred locations to favorites, allowing for a more personalized and convenient experience.
The drink description page was redesigned with a cleaner, more organized layout, making it easier for users to browse and select their drinks. To further enhance the experience, images of available toppings were added, creating a more engaging and visually appealing selection process.
I revamped Chatime’s drink description page, creating a cleaner layout and incorporating images of the toppings for a more engaging user experience. Additionally, I improved the cart page for better usability and redesigned an order tracking page with a progress bar, allowing users to easily monitor their orders in real-time.
I redesigned the scan membership page to enhance usability and added an offers page, allowing customers to easily view current promotions and special deals. This new feature improves engagement by keeping users informed about the latest offers available to them.

Chatime Redesign

Working on the redesign of Chatime's app was a valuable learning experience that deepened my understanding of user-centered design principles. I learned the importance of conducting thorough research, including analyzing user feedback and app reviews, to identify pain points and areas for improvement. This project reinforced the significance of creating clean, organized layouts that enhance usability and engagement, as well as the impact of visual elements in guiding user decisions.


Throughout the process, I gained hands-on experience with various design tools, such as Figma, which allowed me to create wireframes and prototypes that effectively communicated my ideas. I also discovered the importance of iterative design; by testing my designs with real users, I gathered feedback and made informed adjustments, ultimately leading to a more refined final product. Overall, this project honed my technical skills in UX/UI design and enhanced my ability to empathize with users and advocate for their needs in the digital space.

Reflection