Parfaite App
UX Case Study
This project was completed as part of the CareerFoundry UX Design Immersion Program
Project Overview
Objective
The goal of this project was to create an app that would provide expertise and facilitate the process of searching for gifts online.
Role: UX Designer
Duration: 6 months
Tools: Pen & Paper, Zoom, Balsamiq, Sketch, InVision, OptimalSort, UsabilityHub
Problem Statement
A user of the gifting expert app needs a way to quickly narrow gifting options through personalized recommendations because they are overwhelmed by the options available online, short on time and looking for the support they would find with an in store experience.
Solution/Outcome
My solution was to create an app that offers a more personalized and connected gifting service to customers, while still maintaining a digitally focused experience. By offering customers a direct line to a personal stylist and recommendations that are “outside the box”, the app can help customers to achieve their gift giving goals. It was important that the solution be easy to understand and navigate, demonstrate value through the content offered and that ultimately customers feel like they are receiving a personalized experience they can’t find elsewhere online.
Project Phases
PHASE 1: Discovery
Competitive & UX Analysis
Competitive analysis was completed as a first step to better understand what functionality and expertise was available to shoppers who were looking for personalized recommendations, extensive gift selections and the opportunity to save those idease.
Main takeaways:
-
Navigation, whether hamburger menu and/or bottom tab bar, should be easily understandable or clearly labelled
-
Homepage that draws people in, provides necessary information/ideas and allows for possibility of personalization
-
Having tool tips or pages that clearly explain functionality make it a more seamless experience, along with action icons that pop for easy find-ability
-
Overall goal should be to provide customers with options in a joyful way that focuses on organization and simplicity.
Stitch Fix App
Competitive Analysis
Onboarding:
-
Straightforward styling & clear process
-
Helpful recap "how it works slide" included on homepage
Product offering:
-
Customers have to complete a number of steps before accessing app & related products
-
Opportunity to see more product upfront
Style Quiz:
-
Adds value through personalization
-
Opportunity to streamline experience by indicating required questions and/or choosing multiple options
Pricing:
-
Transparent presentation of information
-
Highlights incentives to get started
Giftagram App
UX Analysis
-
Step by step onboarding - understand how to use the app, create an account & navigate
-
Check out flow makes sense, but may be opportunity to specify required fields and add form labels
Usability
Navigation
-
Hamburger menu icon widely recognized icon
-
Opportunity to review IA and parent/child category relationships
CTAs
-
Clearly labeled and highlighted to stand out, such as "gift this" button on PLP is clear action indicator
-
Opportunity to more clearly define product cards on PLP
Giftful App
UX Analysis
-
Sign on pop-up messaging helpful
-
Opportunity to make forgot password action clearer
-
Interstitial pages with directions guide the process well
-
Opportunity to connect with other users
Usability
Navigation
-
Bottom navigation icons are not easily recognizable, opportunity to add labels
-
Search bars provide quick access to results
-
No clear homepage to navigate to/from
Layout
-
Onboarding illustrations are fun and inviting for new users
-
Form fields could have greater contrast for easier visibility
-
"Add a wish" action on wishlist page could be highlighted more
User Interviews
User interviews were conducted with three participants over the phone and one in person.
My first step was to determine research goals, create an interview script & questions, then conduct interviews and organize notes to create an affinity map from which to determine key insights.
Main takeaways:
-
Users want to simplify how they track events and want reminders to be in their face
-
Users are frustrated by the amount of options available online, feels like an endless search that leaves one feeling stressed
-
Users have found ideas on social media or by listening to people, and feel gift guides are impersonal
-
Users expect they'd be able to share information with a Stylist such as: upcoming event details and preferences for style, price point, timeline & shipping
-
Users also anticipate Stylist would provide back recommendations that were personalized
-
Users will typically go to category first on a site or app when searching for a gift and filter from there
-
Users consider saved information, easy to use navigation and clear check out process very important functionality—convenience is key
-
Users like chat functionality that it is quick & easy, so they don’t have to talk go through numerous prompts and the answers are from a real person, not AI
Stefania, Ecommerce Manager
"I love gift giving, I like to keep an ear out all the time on what people like/are looking for. If I'm going to get a gift I want it to be meaningful."
Aimee, Digital Agency Executive
"I think [store associate/stylist] can be helpful to reduce time searching and find the best product for what you're looking for and might not normally choose."
"I don't necessarily see myself chatting with someone, but could also [see a personal stylist] being helpful because I'm not someone who just likes to browse"
Annie, Paralegal
"I like giving gifts and feel like it's a nice gesture. Even though it takes some time and logistics coordination it's a fun connection to get something in the mail."
Nancy, Volunteer
PHASE 2: Concepting
User Personas
User Personas were developed utilizing the findings gathered from the user research. Three personas were created to represent the hypothetical audience for this app including: personal details, activities & behaviors, goals & motivations and current technology usage. These personas were referenced throughout the design process to help shape future phases and keep the work centered around the end user(s).
User Journeys
User journeys were captured for each persona to visually convey the steps which they might take to accomplish their goals. Each journey outlines a scenario and the goals/motivations specific to that persona. In addition to the task itself, the journey also outlines their thoughts, emotions and opportunities to support the user throughout the app experience.
User Flows
For each user story/scenario, a task analysis was completed and then optimized to identify the critical steps that would make up the user flow and lead to success.
Sitemap
To support in refinement of the app sitemap created based upon prior concepting, an open sort card sorting exercise was conducted, using OptimalSort as a tool, with the goal of seeing how participants would group cards and name categories with no prior direction.
Main takeaways: From the results analyzed, I determined I should focus updates to “My Account”, create a category that more clearly addresses interactions with the Stylist and a separate category for subscription management. Because no one identified a “help” or “support” category as part of category groupings, this was de-prioritized as a category header.
Original
Refined
Current
PHASE 3: Prototyping
Wireframes & Mock-ups
Lo fi wireframes were initially created using pen and paper to detail out the critical tasks based upon the previously developed user flows.
From there, mid fi wireframes were built out using Balsmiq to bring the sketches to life digitally. The overall focus of these wireframes was on placement of functional elements.
Lastly, two versions of hi fi wireframes were designed in Sketch based upon the mid fi wireframes and additional detail was included such as logos, copy and more realistic icons & content blocks.
These wireframes were linked together to create a hifi prototype, which could be utilized for usability testing in the next phase of the design process.
PHASE 4: Evaluation
User Testing
After creating the hi fidelity interactive prototype in InVision, six participants were recruited to complete moderated remote usability testing over Zoom, following this Usability Test Plan. Participants were provided with open ended questions, a set of scenario tasks to complete and optional closing comments, outlined in the Usability Test Script.
All notes and feedback were gathered and organized in an affinity map to categorize them into: Observations, Errors, Positive Quotes & Negative quotes. With this information a rainbow spreadsheet could be developed to identify issue trends, severity level and potential actions plans.
As a final step, a Usability Test Report was generated outlining the top five issues and proposed solutions.
Main takeaways: Most of the participants during usability testing found the Parfaite app easy to use and fairly intuitive. Testers were excited by the idea of feeling less overwhelmed and supported in their gift shopping by utilizing this app. By improving the sign up flow and gift recommendation history page functionality, I’ll be able to create a more user-centered design and improve the overall user experience.
Flexibility with how to use the app is appealing.
“Definitely get that the intention is for some sort of gift or exchange”
“[Onboarding screens] give a good overview of all features that I can use”.
Issue #1: Account Profile (high)
Observation: Confusion about how to complete account profile
Recommended change:
-
Change up flow to complete later on & move into preferences after saving account info
-
Highlight category on navigation to indicate where user is
-
Add indicator for required fields
After
“Annoying to remember all that stuff [events], feel like it would be helpful to have all in one place”
After
Issue #2: Gift History Attributes (medium)
Issue #3: Gift History Access (medium)
Observation: Need to add more functionality to attributes
Recommended change:
-
Update verbiage for event tags to be more specific
-
Add icon to indicate "Recommended by Stylist"
-
Update date tag to notate it is date recommended/added to list
Observation: Unsure how to access gift recommendation history
Recommended change:
-
Rename category on bottom navigation (from "Your Account")
-
Create additional category/icon to house standard account profile info
Before
After
Issue #4: Viewing Homepage (medium)
Observation: Seeing page too late in user journey
Recommended change:
-
Add CTA to welcome screen (after creating account) to lead users to Homepage
-
Include welcome message as part of Preferences tab for new users
Issue #5: Onboarding steps (low)
Observation: Too many steps before being able to access app functionality
Recommended change:
-
Remove step of updating profile before accessing app (but still after creating an account so email information is captured)
Preference Testing
Preference testing was conducted with ten participants using UsabiltyHub to further analyze the onboarding experience, specifically the screen to create an account.
Main takeaways: Version 2 was the clear winner of the tests, chosen by 90% of participants. Based upon these findings I incorporated version 2 into the onboarding flow, which also allowed me to remove one additional screen and further streamline the experience.
Version 1
Version 2
I like the flow your eyes follow from the logo design down to the directions.
I like the larger graphic and the screen generally looks more welcoming.
It looks less medical/professional. It’s inviting.
The entry fields are more visually appealing to me as well. Other one seems a bit more dated or highly technical application.
Style Guide & Pattern Library
To effectively communicate and maintain the integrity of the design, a style guide & pattern library were created to document app typography, color palette, UI elements, Images, Icons and copy standards.
Final Mockup & Interactive Prototype
Completing this process has included multiple iterations of the Parfaite App and culminated in a final prototype, clickable below.
Closing Thoughts
Next Steps
Updates:
-
Homepage - adding search results page
-
Notebook - adding gift idea log search results page
-
Settings - expanded category navigation to include Subscriptions page
-
Planner - adding in landing page for when users click into a date with a previously added event
Future Enhancements
Hypothesis
I believe that by creating an onboarding quiz for new users to complete upon account creation will allow for a more customized and seamless experience because the Stylist will have more information to reference before connecting with users and any content and/or products displayed can be more personalized to the user’s needs.
Hypothesis Validation
Through usability testing I would be able to validate my hypothesis and make iterative changes accordingly. For any future user testing I would want to include participants who are new to the app as well as users who have previously tested so I would have both points of view.