PurpleTie App Redesign
Completely reconstructing the user flows, design system, and visual aesthetics of the PurpleTie mobile app from user research and testing.
Role
UX/UI Designer and Researcher, working on entire product design from research to conception to handoff
Group Size
2 Design Leads, 4 Designers, 2 Tech Leads
Duration
8 weeks (Jan 19–Mar 16)
Type
Professional
Quick note from Nate:
Hi! Thanks for checking out my case study. Much of the work for this project was collaborative, but if you want to see my contributions specifically, the color I used to indicate my work in progress images is green.
As we moved towards higher-fidelity designs, my central focus was the @Home order flow. This portion is not differentiated by color.
You can find the name and LinkedIn of everyone on my team at the bottom of this page.
The onboarding screens for the @Home and @Work flows at the time of starting the project.
Weeks 1-2: Research
Week 1: Defining PurpleTie's current state
How did the service work?
In order to redesign PurpleTie, we first needed to understand how it worked from a both user and company standpoint. The user onboarding process was pretty standard, collecting key user information such as their location and contact details. Through discussions and trying out the app ourselves, we pieced together the ordering process:
1. "@Home" users schedule a pickup and delivery time through the app straight from their house. "@Work" users bring their dirty clothes to a PurpleTie closet at their work campus.
2. A route driver will pick up their clothes during a set three hour window from their home or workplace.
3. Clothes are brought to PurpleTie's local facility where they are sorted by hand based on its owner and care tag instructions.
4. Clothes are washed and folded, dry cleaned, or altered based on care tag instructions and/or customer specifications.
5. Orders are delivered back to their original owners, either to their company office or home address.
Note: Why we prioritized the "@Home" experience
We found out that users who place "@Work" orders do so largely offline through a physical closet at their office. They would still need the app to input payment information and track orders, but this meant we would be able to dedicate more time to the @Home ordering experience.
Constructing current user flows
Through individual and group experimentation of the existing PurpleTie app, we were able to document each step in the onboarding process. The onboarding flow, as we found out fairly quickly, directly led into the order flow.
Documenting these initial steps highlighted some questions and concerns from the design team, but we didn't want our biases guide our research. We needed to see the impressions of actual and potential users.
Top: Our interviewee demographics ranged from older professionals to younger students and workers, all of whom are current, past, or potential users of PurpleTie.
Bottom: A screenshot of our week 2 FigJam section where we brainstormed research questions (left) and took interview notes (right).
Competitor analysis
We conducted a competitor analysis to see where other companies stood in terms of app design, usability, and branding. The companies we analyzed included CleanCloud, Hamperapp, Laundryheap, Hampr, Poplin, and others. We also analyzed some companies' user-facing delivery processes, including Amazon.
Analyzing the strengths and weaknesses of these, as well as doing a general analysis of the on-demand laundry industry, allowed us to identify some ways that issues noted in poor reviews were addressed. It also showed us where other companies fell short, solidifying PurpleTie's strengths in terms of simplicity and core functionality.
Some of our notes on competitors in the on-demand laundry delivery industry, observing pros and cons of each app design and how these companies managed similar issues to PurpleTie.
First: Solidifying pain points. Affinity mapping from our interviews, taking our notes and placing them into categories based on common themes.
Second: Using pain points to identify a longer list of specific actions we could take to address the underlying issues in our future design stages.
Affinity mapping and pain points
The massive blocks of notes we took on our user interviews were barely decipherable to an uninformed onlooker, so we used affinity mapping analyze our data. This helped us categorize key takeaways and narrow our research down to more simplified pain points.
Primary research takeaways
While many issues were identified, the three areas I focused on were:
App Navigability: Users continually had difficulty navigating within the PurpleTie app
Primary contributing factors:
Recurring page content (back button, navbar) positions often changed
Button touch targets were too small and sometimes inaccessible
Page and button text were vague, non-intuitive, and often conflicting
Pricing Transparency: Users expressed concern over lack of visible pricing information
Primary contributing factors:
Pages with information on pricing and services were not clearly visible
PurpleTie prices for some services are weight-dependent, while others are item-dependent, and thus cannot be calculated before a user checks out
Information and FAQ pages required multiple clicks to navigate to, interrupting the user order flow
Company Trust: Users interpreted outdated design as PurpleTie's lack of credibility
Primary contributing factors:
Lack of a cohesive brand identity across pages made users feel the company was fake or untrustworthy
Immediate request for a payment method upon onboarding, followed by a redirection to placing an order, was deemed intrusive
PurpleTie only accepts credit or debit card
These issues stemmed from PurpleTie's current app design as well as other factors, including the pricing structure of different services, back-end development limitations for card processing details, client preferences for some aspects of the design, and some other factors beyond my control.
Given more time and less of these out-of-our-control limitations, my team and I could solve every issue identified in our research. However, the human experience inherently consists of too little time and too many constraints, so I learned to compromise; I would improve what I could in terms of design, while still working within parameters of the project.
Week 3: Decide
Defining our path
From our analysis of the above research data in conjunction with feedback from our client, we decided to:
reconstruct user flows
create a new design system
redesign interactive and informational components
…all while preserving the app's core functionality, simplicity, and PurpleTie's brand image.
Deciding on a visual style
To settle on a visual design style, we created moodboard, compiling designs from apps thought had relevant elements. We voted on our favorites and went from there, settling on a clean, simple, highly modular design. The goals which led us to choose this were:
reduce information overload (sectioning blocks of text, different services)
ensure the app was usable for all audiences (larger tap targets, simple font)
feel clean and professional (rounded corners, simple color scheme, dark mode)
We did the same gathering/voting process for fonts and colors, though these had to be changed later on due to technical constraints and contrast issues.
Our initial font choice was Area, a clean sans-serif Adobe font with a variety of weights, and eight shades of the brand's purple along with shades of grey.
Completing new user flows
At this point, we finished reworking the original user flows. We decided which flow we would each generally focus on (though our responsibilities often overlapped!) and which screens needed to be developed for each flow.
Left: Moodboarding to decide which visual style to use going forward, evaluating the pros and cons of each.
Right: Finalizing our updated order flows and (somewhat) deciding which ones to focus on individually.
Week 4: Build
Building the foundation of our app using our reworked user flows would be key to later phases of designing. As always, we began by focusing not on aesthetics, but function.
Crazy 8's
Crazy 8's, or sketching eight designs every eight minutes, helped us spit out as many designs as possible in the little time we had. Hand-drawing these designs helps ensure perfectionism is cast aside in favor of the composition of each frame.
Explaining our personal sketches to one another during our weekly meeting allowed us to create a more cohesive vision of what PurpleTie would look like.
Prioritizing quantity over quality, and concepts over execution, is key for early-stage designs. These are not all the designs we created, just the ones we remembered to photograph at the time.
Low-fi sketching
The sheer volume of designs created from our initial design sketching propelled us into our low-fidelity designs. At this point, we created our Figma file (yay!) and began designing digitally. However, we had to limit ourselves to shades of grey, placeholder text, and simple blocks to define screen sections.
We were a little too excited to finally begin creating the app that we had been researching and thinking about for weeks. We had to take a step back, slow down, and not marry ourselves to any particular design. It was too early in the process for that, and any design deemed "great!" at this point would still go through countless iterations.
Our low-fidelity designs on Figma. For some screens, we created different versions that we could discuss as a group and vote on our favorites.
Weeks 5-6: Refine
Moving on to mid-fidelity
Right off the bat, it's important to state that there were many design adjustments made throughout the mid-fi period. We were able to make so many iterations in such a short period of time by taking advantage of Figma's comment system, often not tracking smaller changes across different versions of our flows.
However, we made sure to document our overarching progress through the use of different versions for larger-scale adjustments, as I'll go into more below.
Comments were vital to creating so many minute changes to each of our mid-fi iterations within our designated timeframe. We ended up with 622 comments in our Figma file for PurpleTie.
My mid-fi designs
My focus for the mid-fidelity stage and onward was the @Home ordering flow. This was the core flow of the PurpleTie application, so the effort I put in here would play a large role in the success of our project. I was excited: this was my first opportunity to showcase my abilities and have my work reflected in an app that would be shipped in the near future.
Below are the primary three versions of my mid-fidelity designs (with comments hidden), and I'll walk you through how research was integrated next.
Images 1-3: The three primary iterations of my mid-fi designs, including componentry I built and temporary body copy (some of which ended up being less temporary). Note that some components have been updated or altered since these were constructed, hence the inconsistent spacing on some screens.
Image 4: The references I used for design (from Apoorva's low-fi designs, which we all liked) and user flow (from my earlier low-fi designs).
Integrating research into mid-fi designs
As I stated earlier, my three main areas of focus from our research were app navigability, pricing transparency, and company trust. Here's how I addressed these areas in my mid-fi designs:
App Navigability: Focused on the repetition of spacing and elements across screens
What I did:
Placed buttons and other navigational components consistently and added clear call-to-action text
Added a progress bar and lower navbar to aide user orientation
Standardized element margins and padding to ensure screen resizability
Pricing Transparency: Made pricing information visible or easily accessible during ordering process
What I did:
Clearly displayed pricing strategy alongside each service
Added "info" icons next to pricing details which brings a popup with a complete breakdown of price per item
Added "more info" dropdowns to all service cards which provides a summary of each service
Company Trust: Ensured designs were clean, consistent, and intuitive
What I did:
Only requested customer payment information upon order placement
Linked detailed service and pricing information to the order flow and included it within the navbar
Made designs clean and consistent throughout all pages, maintaining a consistent brand identity
These were how I initially addressed concerns from user research, though further modifications were made as we progressed.
At this point, on my mid-fi order screens alone, I had received and addressed 92 comments (yes, I counted) from my design leads, teammates, our client, developers, and mentors. Often, I would find conflicting advice about how to proceed forward with a certain feature or component. These were the points where I got to add my own personal touch to things, combining knowledge from all of these outside sources with my own personal understanding of the project.
Creating a design system
With our low- and mid-fidelity designs in mind, we had an idea of the components we would need for later iterations. Components in Figma are able to be updated throughout a design process by their very nature, so I don't have early versions to show for many of them.
As we constructed our initial mid-fi designs, we built the components for our user flows as the need for them came up. However, progressing into later stages of mid-fi designs, this created an excess of inconsistent components which were often only had a single use case. A cohesive design system would drastically reduce this waste of time, computing/developing power, and energy it took to design.
While we all contributed to the design system, it was created and managed primarily by Jahan, one of the designers on our team. We began by creating reference sections, a place where everyone on our team could refer to for standardized spacing, colors, typography, iconography, and more. Later, more refined, versatile versions of our components populated the rest of the design system.
Images 1-3: The reference sections we used to standardize our designs across pages.
Image 4: An example of nested styles used in a component, allowing for more customization within each component and reduced need for additional variations.
Image 5: A broader view of our complete design system.
Introduction to iOS Human Interface Guidelines
This was also the time to start integrating color and text styles. James and Noah, the tech leads for this project, gave a "How to Design for iOS" presentation at our week 5 meeting, which helped us realize that our Adobe font choice of Area was not ideal for a project like this.
We pivoted to SF Pro as part of our efforts to integrate our current design system with the iOS Human Interface Guidelines. We also began using a mix of native and non-native components (per recommendation) and reduced our color styles to the essentials.
Due to stylistic preferences, we ended up shifting our font one final time from SF Pro to DM Sans for our late mid-fidelity and remainder of our high-fidelity designs.
Here you can see some of the colors and components that didn't make the final cut, either because of client/mentor feedback, technical component limitations, or design pivots.
Weeks 7-8: Polish
High-fidelity designs
The final stretch had arrived: high-fidelity. As our final projects and exams approached, we began working later and later into the night. Our high-fi period was so packed because we received a few last-minute changes from our client which involved shifting around many of the currently moving parts— namely, integrating the order flow into the onboarding flow, similar to how it was originally.
Final pivots
Our research showed that integrating the order flow into the user onboarding flow was deemed to be invasive by users, but our client had a strong preference for it to be that way. Hence, we ended up compromising by adding a "skip" ability for users to bypass the ordering flow, but have it included by default.
Our one-screen solution to the redirection of users from onboarding to the middle of an order flow, with the option to either proceed or go explore the app first, giving users the freedom to make their own decisions.
Other shifts
In addition to this flow change, we also shifted towards a less purple-heavy color scheme, altered button placement so that it would be consistent across all screens throughout the app (not just all screens within the order flow), and modified the heading and subheading styles.
How I made my high-fi screens
Addressing changes like this took a good portion of our time, in addition to creating the final main flows of the app. For me, this meant creating the order flows for both first-time and returning users with all possible screen variations demonstrated.
For example, for a screen with collapsible cards and text boxes, I'd show an example of the screen with cards collapsed, expanded, and in mixed states, along with filled text boxes, empty text boxes, and mixed (some filled and some empty) text boxes. Additionally, including screens with all potential errors a user could face (e.g. invalid credit card information) was important to include for our developers.
Images 1-2: My end deliverable: the user order flow. It includes a light mode, dark mode, and has standardized componentry, colors, and margins, as well as directional arrows and annotations for the developers.
Image 3: My mid-fi and high-fi designs for the order flow, in light mode, side by side.
Refining and prototyping
Final steps in our process included linking all color and stylistic variables to our screen content (for both consistency and dark mode), annotating our screens, and creating a simple prototype for our presentation. A more robust Figma prototype is still currently in the works, as we could not finish a fully clickable one before our deadline, but we were able to successfully demonstrate the core features and functionality without too many bells and whistles.
Prototype walkthrough
You can watch me click through our prototype below!
Outcomes
As this project is still currently in development, we do not have any "before/after" user metric data regarding app usage or qualitative customer perceptions of our redesign. However, I will add new information as we receive it here.
Feel free to reach out to me if you have any questions or comments about this project or others! I'm open to comments, feedback, or new opportunities.
Thanks for taking the time to read my case study :)
-Nate
My team
My teammates for this project were awesome, feel free to reach out to them!
Other projects
Quickie Delivery App: Adding Features
Streamlining customer communications and adding user-requested features for a formerly operational college delivery app.
YesBank App and Bank Statement Design
Improving a bank statement and creating an accompanying mobile app experience while meeting research, technical, and time constraints.