Overview
A UI Redesign for Sharp’s Cocoro Wash App
This project was an assignment for a UI design module that focuses on redesigning the information architecture (IA) and key page layouts of a multi-tasking smart home gadget assistant app. For this case, I’ve chosen the Sharp’s Cocoro Wash App.
Design Approach:
User-Centered Design: The redesign will prioritize user needs and behaviors. User research through surveys, interviews, or usability testing will be conducted to understand user pain points and expectations for a smart home control app.
Information Hierarchy: Information will be structured logically and presented in a clear hierarchy, making it easy for users to find the controls and features they need quickly.
Visual Hierarchy: Visual elements will be used strategically to guide user attention towards important features and functionalities. Icons, color coding, and clear labels will all contribute to an intuitive user interface.
Consistency: A consistent design language will be maintained throughout the app, ensuring a seamless user experience across all functionalities.
Expected Outcome:
The redesigned app aims to provide a user-friendly and efficient platform for managing the Smart Washing Machine within a smart home environment. By focusing on user needs and implementing a well-structured IA, the app will empower users to control their Smart Washing Machine with ease and personalization.
01 | Redesign
Before
Text heavy & Lacks Visual Hierarchy
Text Heavy: The text-heavy design with minimal use of icons or graphics can be overwhelming for users. There is a lot of text crammed into a small space, making it difficult to quickly understand what each button or function does.
Lacks Visual Hierarchy: All the text appears to have the same size, weight and color. This creates a uniform block of text that lacks visual hierarchy. Important information or frequently used functions don't stand out from the rest, making it difficult for users to find what they need quickly.
Information Density & Not Intuitive
Information Overload: Too much text, crammed into a small space, overwhelms users. They can't quickly grasp what each function does, leading to confusion and wasted time.
Learning Curve: Unintuitive interfaces require users to spend time figuring things out. This is frustrating, especially for everyday tasks like operating a washing machine.
After
Clear & Concise
A clean and uncluttered layout, with minimal text and clear icons. This makes it easy for users to understand the wash cycles progress and settings at a glance.
The color-coded weather outlook lets users see good laundry days in green and not-so-ideal days, like rainy days, in grey. This makes it easy to plan your washing schedule.
Effortless Sync
No complicated manuals or button combinations needed. Simply follow the app's instructions, and your washer will be ready to go in minutes.
By prioritizing a user-friendly visual syncing process, smart washing machines with app connectivity make a positive first impression and encourage users to explore the full range of their washer's capabilities.
Visually Captivating, Not Confusing
Clear and concise language paired with engaging visuals like illustrations or animations keeps users engaged during onboarding.
This not only makes the process more memorable, but also sets the tone for a positive user experience throughout the app.
Save Time
No need to remember complex settings or recreate your perfect wash cycle from scratch. With a tap, you can recall and reuse the settings from your previous successful wash. Ideal for those go-to loads of delicates or your favorite towels.
By remembering your past laundry victories, smart washing machine apps take the guesswork out of wash day, letting you achieve clean clothes consistently and effortlessly.
Goodbye Guesswork, Hello Optimal Care
Unravel the mystery. Simply scan the care label on your garment using your phone's camera. The app translates the symbols into clear and easy-to-understand instructions. No more deciphering washing temperatures, spin cycles, or ironing symbols – the app does it all for you.
No more ruined garments or trips to the internet for laundry label decoding. Scanning features in washing machine apps are your secret weapon for optimal clothing care, all accessible from your smartphone.
Your Laundry Insight Hub
Energy Efficiency at a Glance: See clear and concise charts that track your electricity and water usage over time. This empowers you to monitor your laundry's environmental impact and identify potential areas for improvement.
Proactive Maintenance: The chart page displays a personalized maintenance schedule for your washing machine. Receive timely reminders for cleaning cycles, filter replacements, and other important maintenance tasks, ensuring your machine runs smoothly for years to come.
Saving Green, Washing Clean: The app provides eco-friendly laundry tips based on your usage data. Learn how to adjust wash cycles, water levels, and detergent amounts to save energy and water while achieving optimal cleaning results.
Your Laundry, Your Way
Personalised profile advantage for you. Laundry day shouldn't be a one-size-fits-all affair. Smart washing machine apps with personalized profiles allow you to tailor the app experience to your specific needs and preferences.
02 | Discover
Problem
While Cocoro Wash boasts smart washing machines, user adoption of the companion app remains low. This disconnect suggests the app might be failing to meet user needs.
Feature Overload: The app may be cluttered with too many features, overwhelming users and hindering their ability to find the functionalities they need most frequently. Users might lack the technical knowledge to understand complex features, leading to frustration and ultimately abandoning the app altogether.
Limited Visual Guidance: A text-heavy interface can be difficult to navigate for users who are not tech-savvy. The lack of clear and concise visuals, such as icons or illustrations, might make it challenging for users to understand washing machine controls and available settings offered through the app.
By revamping the Cocoro Wash app with a focus on user-friendliness and intuitive design, we can bridge the gap and encourage users to embrace the convenience and efficiency offered by the app.
Hypothesis
If the app is visually attractive and easy to understand, then more people will use the app for their smart washing machine.
Research
To understand how to improve the Cocoro Wash app, we employed a multi-pronged research approach:
User Survey:
Goal: Explore user behavior and decision-making related to smart devices and laundry.
Focus Areas:
General user comfort level with smart devices.
Pain points encountered when using apps for smart device control.
Desired features and functions in a smart washing machine app.
Decision-making process before starting laundry (e.g., sorting, planning cycles).
The survey provided valuable insights into:
User comfort level with technology and smart devices.
Specific frustrations related to existing smart device control apps.
User expectations and desired functionalities for a laundry-specific app.
Laundry habits and planning processes, informing potential app features.
Competitor Analysis:
Benchmarking: We analyzed leading smart washing machine apps with high download numbers (4/5+ ratings) compared to Cocoro Wash's current app (100k+ downloads, 1.3/5 rating).
Objective: Identify strengths and weaknesses of competitor apps to inform improvements for Cocoro Wash.
Through competitor analysis, we aim to understand:
Features and functionalities contributing to high user satisfaction in competitor apps.
Areas where Cocoro Wash can differentiate itself and offer a superior user experience.
Industry best practices for smart washing machine app design.
Combining the insights from the user survey and competitor analysis will create a comprehensive picture of user needs and expectations. This will guide the development of a revamped Cocoro Wash app that is user-friendly, feature-rich, and aligns with user laundry routines.
03 | Define
Defining the Path to a Better Laundry Experience: Unveiling User Needs
I've now gathered valuable data through a user survey and competitor analysis. This stage of the Double Diamond process, Define, focuses on synthesizing this information to understand our users better by building empathy through Affinity and Empathy Mapping.
Armed with user-centered insights, I craft a "How Might We" statement. This statement will challenge me to think creatively about how we can address user needs and elevate the overall user experience of the Cocoro Wash app.
By combining these steps, I will define a clear direction for the design process and identify essential features that will address user pain points and ensure a user-friendly, efficient, and enjoyable laundry experience.
Empathy Mapping
Affinity Mapping
User Journey
Personas
Primary
Secondary
How might we
make the app more intuitive, familiar, and informative?
Instructive onboarding
Attractive visuals
Just the right amount of info
Easy scheduling
Clean interface
Usage insights
Personalised setting and information
04 | Develop
Sketches & Wireframes
User Flow
Logo redesign
Current Logo
Cocoro means Heart in Japanese and the logo is a heart shape while the circular shapes signifies the different strokes of the Heart Chinese character, 心.
Idea Sketches
Final Logo
Variation 1
Variation 2
Based on the 3rd sketch, it follows the Chinese character for heart, Kokoro, where the strokes are placed in the heart shape.