TYPE & TIMELINE
End to End Design Process
PROJECT MANAGER APP | UI/UX DESIGN
“Click it. Bag it. Dry cleaning delivered.”
Exclusive Dry Cleaners (EDC) is a Toronto based pickup and delivery dry cleaning service where clients put orders through the app or website, and schedule a time and place for pickup and delivery. Less than 5 minutes to order your Dry Cleaning and more, delivered straight to your home or office.
HOW WE GOT STARTED
We met with our client and gained clarity on the business model, goals, and user base, and we discussed the scope of the project. EDC would like to design an app that improves the usability of the company’s Android and iOS app and improve existing infrastructure. Some of the questions that came up:
What are the problems customers are currently facing when using the app?
How can we make the order checkout process quicker and more efficient for users?
How can we improve the look and feel of the app to appeal to a wider audience?
What infrastructure on the app is helpful to users, and what needs to change?
DELIVERY & SCOPE
Redesign and improvement of existing infrastructure of the iOS app; Update the front-end UX/UI of EDC’s current app to enhance users’ satisfaction, by creating products and interfaces that are intuitive, simple and efficient. By understanding users’ current problems and pain points we set out to:
Optimize the process of placing an order to make it as streamlined as possible
Refresh the app’s current user interface
Improve the app’s user experience by adding new features
Provide a high-fidelity interactive prototype using Figma that represents the full scope of the EDC app.
Professional individuals, working in a corporate setting, family person (with1-2 kids)
- Age: 35-45
- Comfortable using technology
- Our target user needs a quick, simple and straightforward solution
- Current frustrations & pain points:
- Our target user needs to be able to place an order from anywhere at any time, with quick turnaround times
- Users are not price sensitive, and want the best service regardless of price
Streamlined and improved upon customer user flows and content throughout the app
Enhanced promotion/rewards system for VIP and corporate members
Enhanced and updated Personalized Coupon Code system for consistent users
Improved visual and aesthetic elements throughout the app
Implementation of “Driver Tracking” feature
Ability for users to purchase dry cleaning without creating an account
The goal of our research is to uncover and understand users’ current problems and pain points while using EDC’s app. The research phase will be conducted using the following methods:
Competitive and Market analysis
A cognitive walkthrough is a usability inspection process in which each task that can be performed in an interactive system is observed, and any problems are noted. This provides us with a deeper understanding of how users interact with the product. The walkthrough will help us determine what areas need to be reworked and the severity of each issue that arises.
Design: inconsistencies between Android and iOS versions - wording, design & layout
Login: no persistence on the log-in feature
Homepage: cluttered, no button hierarchy, no CTA to place order
Place an Order: cannot place order without credit card
Pricing: no categorization, no search tool
Promotions: No active promotions
My Account: no ability to add additional credit cards or addresses
A competitive analysis will allow us to determine the strengths and weaknesses of our client's competitors. As EDC exclusively offers its services in the Great Toronto area, we will research competitors who offer dry cleaning pickup and drop off services in the same region. Through this analysis, we will be able to see where we stand in relation to other players in the market. All of our client's competitors are relatively small businesses, the “Ma & Pa” type model, there is no one dominant player in the marketplace. We set out to find out what each competitor has to offer, their services, and notable features in their apps/websites.
Competitor 1 - Market positioning: environment friendly, family Owned, generous, affordable, accessible
Competitor 2 - Market positioning: well-established, luxury, best quality service
Competitor 3 - Market positioning: accessible, affordable, environmentally responsible
Competitor 4 - Market positioning: well-established, reliable, accessible, environmentally responsible
Our Client - Market positioning: Luxury, Convenient, Lifestyle; Offers varied services other than dry-cleaning only
All interviews were conducted using Google Meet. Each interview was approximately 30 minutes in length and were audio recorded. Recordings were then digitally transcribed and the data was reviewed and thematically analysed.
Has stopped using EDC’s services because he has switched to another provider who offers a more convenient locker drop off service for his busy schedule.
General Manager at a senior citizen home
Has been using the app for 10 months, puts in an order every 2 months on average.
Young Professional working from home
Hasn’t used the app yet, but has placed a single order through EDC’s website.
Operations Supervisor and Driver for EDC
Duties include: system backend, QA of company’s cars, training new drivers, QA of customer experience.
All users agreed that the services that EDC offer are very convenient and the app was pretty easy to use to place an order. All users switched to EDC from using a local brick & mortar shop. There were some areas in the app, however, they found to be more confusing than others.
OUR FINDINGS & KEY THEMES
Prefer additional login/sign up options such as Apple and Google
“...Google, or whatever login portal is connected”
Prefer to have the ability to customize their notification preferences
(text, email or phone popups)
“...prefer email as primary, text as secondary, but want both options for my orders”
Users would be inclined to use a reward/loyalty program if one were offered
“...I would be more likely to use the app if there was some sort of a reward program”
Navigation through the app could be more intuitive
“...needs a better layout, better landing page...”
It is not clear what some of the items are labelled as (ex: hand pressed, laundered shirts, etc. Pricing structure is also confusing, as the charges are different for shirts/polos/etc.
“...why are the prices for a shirt and polo different”
Order History Page
Lacks details on previous orders, users didn't know dates/items that were dry cleaned
“...the app doesn’t acknowledge the previous order I placed”
Delivery/Drop Off Times
Delivery times are spread out over the course of a day, making it difficult for some users with
busy schedules who cannot be home for pick-up/drop off
“...didn’t need to worry about coordinating to meet someone at the door”
In this usability test, we tested the main user flows of the EDC app with 5 users using a fixed script, and recorded the feedback expressed verbally or indicated by user actions. This is useful for finding what users consistently struggle with in the app.
LOOK & FEEL
New users generally thought the overall look, feel and behaviour of the app didn’t imply a polished and efficient user experience, and would hesitate to use it based on their first impressions:
Felt the main page had a cluttered feel and lacked a distinct hierarchy
Felt a lack of orientation throughout the app stemming from limited branding on individual pages
Felt the visual design and organization of the app could be improved
Found the aspect ratio on the emails they received regarding receipts and pick-up times/notifications made reading them uncomfortable
Found that they didn’t feel they could really get a sense of who EDC was from the app: they felt that knowing more about EDC would make them feel more comfortable in placing an order
Users found the main actions of the app navigable, but lacking some expected mobile app conventions:
Asterisks were present on the account creation page, but it wasn’t explicitly stated anywhere that an asterisk marked a required field
Users found the organization and presentation of the pricing page was confusing and difficult to navigate
The Promotions page being present without any active promotions frustrated users
Users found the Profile and Orders sections were frustrating to use, and lacked some of of the standards that they would expect from an ordering application
Improve Login & Sign Up
Improve User Profiles - form autofill, allow users to save multiple addresses & payment details
Improve ‘Place Order’ flow
Homepage: better navigation & CTA
Pricing page: easier navigation
Active Loyalty & Rewards Plans
Add notifications settings
Increase brand visibility on app
Once the research was conducted, the information we obtained was used to develop a value proposition canvas and a lean canvas. A value proposition was used to highlight the business services and how they lined up with customer wants. A lean canvas allowed us to focus on more specific interactions between the customer and the business. We were able to determine if the customer wants and pain points were being addressed with the services offered by the business.
VALUE PROPOSITION CANVAS
A user journey and site map were developed from the insights gained through conducting research. Following the user journey and site maps, we were able to quickly sketch some interface ideas. The sketches were a great way to quickly put ideas down on paper, and see how viable they were.
SKETCHING THE INTERFACE
LOW FIDELITY MOCKUPS
From the insights gained through conducting research, we were able to quickly sketch some interface ideas. The sketches were a great way to quickly put ideas down on paper, and see how viable they were.
DESIGN CONCEPT & STYLE GUIDE
After presenting our sketches to the client, we proceeded to show him different design concepts - including colour, images, fonts. Below are the final colour palette and fonts we chose to implement in the final product.
A modern and clean colour palette consisting of a dark blue as the main colour, a white background, and gold colour for highlights and select buttons.
A navigation bar including 4 icons with the home, account, my orders and rewards pages. The icons shall be filled with a dark blue, and unlabeled, with the hanger graphic which acted as the navigation divider. The colour of the icon would change when it was selected and the hanger icon would move above the icon respectively
A personalized homepage which consisted of a call to action button, a personalized welcome message, and a background image.
Additional elements to be implemented were drop shadows on buttons and fonts.
VALIDATION & DESIGN ADJUSTMENTS
At the next phase, we implemented the feedback we received in our concept review with the client and insight drawn from our prior research to draft and prototype an early iteration of the final product. We then put the prototypes to the test with a round of usability testing.
Our usability testing aimed at testing real features of the app with users; This allowed us to find any usability or UI issues. Our users completed 8 tasks each, navigating through the app.
USABILITY TESTING INSIGHTS
Users expected to find more info on the business
Buttons that are orange look “deactivated”
Price Estimation tool was overall confusing, and not noticeable enough
Some pages look cluttered
Non-editable text should not be in boxes
“The orange needs to pop a little bit more because it makes the buttons and links look deactivated, looks too pastel and can be an issue for colour blindness.”
“I like the colour scheme, it is simple and clean. I think the pop of colour is nice. Blue and white only might feel like Facebook.”
“Tasks are mostly straightforward; harder to go through as a first time user. The app is legible, tidy, and clean; I like the use of the photo in the homepage.”
“UI is self explanatory, clean & smooth. 1st order was a little more confusing; the nav bar icons & rounded bubbles are a bit outdated; the colour scheme makes things legible.”
Try new things
Many a Figma tutorial was viewed, and learning new software Balsamiq. Every idea suggested was valued, although not all ideas made it into the final product.
Draw from insight gained in research
We learnt that research informs effective design decisions, and constantly referred back to our findings.
Strive for synergy - with the client and within the group
Synergy: the interaction or cooperation of two or more organizations, substances, or other agents to produce a combined effect greater than the sum of their separate effects.
Identify and utilize individual strengths
We found that this streamlined our work-flow, and enabled each team member to contribute their best efforts to the project.