Redesign RMS
Home Screens
(May, 2022)
(UX/UI Design)
35%
decrease expected in accdiental taps
900+
employees' experiences and productivity were optimized
50%
decrease in Task Completion Time
Helping Urban Outfitters optimize their warehouse employees experience
DESCRIPTION ✍️
This project is centered around resolving the challenges that warehouse employees at Urban Outfitters faced. The result sucessfully reduced the task completion time by 50% and enhance user accessibility.
Deliverables
High-fidelity Prototypes across all devices including: Web, Tablet, and Mobile
Role
Product Design
UI Design
UX Research
Wireframing
Prototyping
Stakeholders
Urban Outfitters (Nuuly RMS) Warehouse employees
Urban Outfitters (Nuuly RMS) Product Managers
Tools
Sketch
Invision
Timeline
April 2022 - June 2022
"With the other hand busy holding clothes,
we only use the device with one hand."
How Might We?
The Process
Research
User Interviews
Usability Testing
Competitor Analysis
1
Analysis
Personas
User Journey Maps
Insight Analysis
Feature Definition
2
Design
Ideation
Wireframing
Prototyping
Iteration
3
Evaluation
Expert Feedback
User Testimonies
Success Metrics
4
Problem #1
Accidental Taps
Warehouse users normally navigate the platform using only one hand, while the other hand holding clothes, leading to unintended taps
Problem #2
Reduced Productivity
Warehouse users complete tasks with a single hand can impact efficiency, raising the need to optimize Single-Handed Mode
Problem #3
Frequent Scrolling
Ware house users struggle to navigate through layers of menus to find their intended feature, leading to a slower task completion
Problems Triggered
credits
UI Design & Illustrator: Cheryl Vo
UX Research: Cheryl Vo
Mentor: Ashley Kane, Laura Petrini
Special thanks to: Nuuly UX Design team for all the feedbacks and guidance through this whole project. I could not have finished this without your help!
Revamping the warehouse home screens, aiming to address existing pain points for a more intuitive interface
Phase 1: Tackle the Home Screens
Define Product Opportunities
Informing Design Decisions
.jpg)
This approach ensures that the project's design is not only based on theoretical concepts but is grounded in the actual experiences and needs of our users. The insights gathered from observing users' daily activities have greatly contributed in guiding design decisions. They have influenced the project's direction by addressing specific challenges users face
Testing Gestures And Actions
In this testing phase, I conducted an interaction testing to compare two menu prototype options and masure their performance. The protype was tested 20 times based on three hands' length sizes: 6" (Small), 7.35" (Medium), and 9.8" (Large). The below videos were recorded from the Small hand testing.
However, the overall results show that one option emerged as notably faster. The Swiping options show to be from 0.8~1 second faster than the Scrolling option. This testing provides general understanding on our direction to redesign the interface.
Our goal is to bring clarity to the Warehouse Home Screens by redesigning confusing visual elements.
Together, we incorporate the two phase to deliver the best outcomes
Phase 2: Tackle the Iconography
Evaluation of Current Iconography
The in-depth evaluation of the current iconography was conducted. The pain points being identified include varying visual weights disrupt the hierarchy and ambiguity in representation causes confusion, resulting in errors and delays
High-Fidelity
After finishing with the redesigned iconography, I start phase 3, which is incorporating the new iconography with the updated users flows. In this stage, I prioritize the attention to detail and pixel-perfect precision
Setting Up The Standards
After the evaluation, I identify areas of improvements for the icon systems. Each icon was carefully analyzed for its visual style and its meanings:
User-Centric Approach
I conducted user interviews from employees in the warehouse to gather feedback, guaranteeing that the icons were not only visually appealing but also intuitive and user-friendly.
Iterative Design
The icon redesign process involved multiple iterations and feedback loops. I collaborated closely with the UX Design & Developer team to make necessary adjustments and improvements, ensuring that the icons met the project's objectives.
Design Exploration
I delved into a creative journey that involved numerous sketches, conceptualizing ideas, and pushing the boundaries of innovation. The sketches stages allow me to have a playground for testing different design approaches, as well as helping me shaping my design decisions
Define Iconography Opportunities
The Refresh Iconography
After four weeks of work and mentorship and throughout several iterations, the redesigned icon system has been finalized. Now, the redesigned iconography is successfully implemented and is currently in active use.
After finish redesigning the iconography as well as the low-fidelity for the Warehouse Home Screens, I took further steps to find a cohesive solution for High-fedelity Prototype
Phase 3: Incorporate
User Research - A Warehouse Visit
To gain deeper insights into the user experience, my manager and UX Team helped me conduct an on-site visit to our warehouse. The primary objective was to observe how employees interacted with our app in a real-world, hands-on environment.
During the visit, I closely observed employees as they navigated the app while performing their daily tasks. It became evident that many employees were, indeed, using the app with one hand while holding items in the other. This confirmed the importance of our project's goal to minimize interactions and enhance usability.
Evaluation of Mobile & Tablet Interfaces
The primary weakness of the existing mobile and tablet interfaces is lack of gestures-friendly features. Among these challenges, the most significant pain point is the lack of space between each UI elements, which can result in accidental taps
Final Product
Problems the final product effectively adressed:
Single-handed friendly
Ensuring an efficient experience even when operated with one hand
Simpler workflow
Reducing unnecessary steps and optimizing operational processes
Thoughtful and intuitive visual design
Prioritizing user understanding and minimizing cognitive load
What I learned...
Predict the Users' Needs: One of the most profound lessons I learned is to predict the needs of the warehouse employees. By immersing in their daily activities, we could understand the challenges they face, sometimes before they themselves realize it.
Solving Unspoken Problems: The experience of redesigning the warehouse system revealed that users may not always articulate their problems. Sometimes, it's about uncovering unspoken issues and addressing them through thoughtful design solutions.
The Art of Simplification: A core lesson learned is the art of simplification. Complex processes can be simplified, and design can be a catalyst for making users' lives simpler and more manageable.
Design Exploration
I explored various options including
Springboard Menu Carousel
Side Tab Menu
Switch Components
Side Tap Components
Results & Evaluation
By creating a uniform interface that seamlessly spans Web, Tablet, and Android Mobile App platforms, the aim is to significantly reduce any friction that users might encounter as they transition between these devices. This approach guarantees that users can effortlessly switch between platforms
The improved redesign of the employee home screen directly addresses the daily challenges faced by users. Through a thorough evaluation process, the design enhancements have been tested and refined to ensure maximum usability.
Low-fidelity Exploration
At this stage, I try to create sketches and wireframes that helps me outlining the layout, structure, and core functionalities of the home screen. By keeping the design basic, I was able to easily identify potential usability issues and make necessary adjustments.
Design Iterations
After revising several design iterations, our team decided to simply the menu display, as well as allowing users to have both interactions to navigate between screens: Swiping and Tapping
Warehouse Visit Takeaways:
The Two Problems
The pain points within RMS extends beyond the home screen but also with the confusing iconography. Recognizing raised problems, we strategically divided the redesign process into two stages:
1. Redesign the home navigation
2. Redesign the iconography
Marvel & Disney:
Interactive Chat Experience
a popup that enhances visibility and encourages users to take the next steps
