SWEET BY
HOLLY
Role
UX Researcher, UI Designer
Team
Solo Project
Duration
1.5 weeks
Tools
Figma, Zoom, Google Suites
Overview
Redesigning e-commerce sites to improve traction and increase sales. Understand their business needs and create a custom design to attract and engage customers.
THE CHALLENGES
To design Crewfare’s split payment and managing reservations features to make group planning seamless for mobile devices.
Problem #1
Complicated steps to purchase a product were leading users not to complete purchases.
Solution #1
Minimize the steps and time of executing tasks.
Problem #2
Primary navigation was challenging to understand. Users would get lost trying to find products.
Solution #2
Restructure the site's information architecture.
Problem #3
The current site aesthetic is outdated and difficult to read.
Solution #3
Visual makeover aligned with acessibility guidlines.
THE DESIGN PROCESS
DESIGN PROCESS
Gathering Data
Our Users' Needs
Stimulate UX
Research
Empathize
Define
Ideate
Prototype
Testing
Understand Our Users
Brainstorm Solutions
Validate with Users
Discover
Before creating any ideations, we gathered data on what can be improved on the existing site and how it compares to the competitors. Also, finding out who is the target demographic and what their needs are.
User Survey:
To learn more about users' preferences and travel habits. Through an email blast to Crewfare’s user base, we received 40 responses.
Heuristic Evaluation:
Identified usability issues within Crewfare's interface utilizing Nielsen Norman's list of usability heuristics.
C&C Analysis
Compare Crewfare features with other direct competitors and comparators to identify the best features to include for the redesign.
We analyzed 11 companies to better understand users' perceptions and experiences with splitting payments and managing reservations.
Define
Before creating any ideations, we gathered data on what can be improved on the existing site and how it compares to the competitors. Also, finding out who is the target demographic and what their needs are.
Affinity Map:
After conducting 16 user interviews from our target demographic, we created an affinity map by grouping and clustering similar ideas into categories. View the full affinity map
“I don’t want to figure out the calculations”
“I prefer not having to remind people they owe me money”
“I want transparency on who is paying for what”
“I want others to take accountability”
KEY USER INSIGHTS
1
Don’t want to figure out the complex monetary calculations on their own
2
Transparency in the way expenses are split and payments tracked
3
Feel uncomfortable reminding family/friends to reimburse them
4
Want their friends to bear some financial responsibility and not be the only individual accountable
Persona:
We humanized the collected data by consolidating the insights from the survey and affinity mapping into personas. The personas provide insight into the user's motivations, needs, and expectations.
User Journey:
A hypothetical scenario to help emphasize the critical pain points Crewfare's user base could face. Understanding the user journey enables us to create more effective and engaging user experiences.
Planning
Resevations Set
1st Reminder
Ready to Go
2nd Reminder
Jenna plans a weekend trip for her and her friends
Jenna books hotel rooms and texts her friends to pay her back
Jenna makes a joke about Henry holding out
Jenna is frustrated Henry still has not paid her
Jenna feels slighted that it took this long to be reimbursed
Henry doesn’t help plan but confirms he’s in
Henry forgets to send Jenna money
Henry is embarrassed he was publicly called out
Henry still has not paid Jenna and is oblivious
Henry hopes no hostility bleeds into the weekend
The Problem...
How Might We...
Jenna needs a way to hold her crew accountable for their expenses, while Henry wants to take financial responsibility to avoid hostile encounters.
Enable all group members to be held financially accountable to ease the role of the “planner” in managing expenses?
Develop
With an understanding of users' behaviors, needs, and frustrations. We began ideating how the split payment and reservation management features would take shape and function.
Sketches
Wireframes
Wireflow:
Visual representations of how a user will interact with a product or website. By mapping out the flow of interactions, we are able to refine functionality and improve usability.
SPLIT PAYMENT FOR ROOM
1
Split Cost of Room: Select the method of splitting cost - equally, by item, or custom
2
Assign Guest/Friend: Who will be responsible for the cost of the room
3
Input cost : indicate how much each friend will pay untill total amount is covered
MANAGE GUEST/FRIEND
1
Choose Guest: Click on which guest they want to manage
2
Manage Guests: Edit guest information, replace/remove guest, or send a reminder
3
Send Reminder: Send an email or text reminder to the guest to pay their share
Prototype:
We humanized the collected data by consolidating the insights from the survey and affinity mapping into personas. The personas will be our guide when designing for Crewfare’s user base.
Deliver
Deliverables is grounded in user-centered design principles, ensuring that the end result meets the needs and expectations of the users. Whether it's a wireframe, prototype, or user journey map, we use these deliverables to communicate ideas and concepts clearly, drive collaboration, and keep the project on track.
Prototype:
We created a clickable prototype to understand how users interact with the product in real-time—ensuring that the end product meets the user's needs.
SPLIT PAYMENT
Split Equally : User selects which friends will be responsible for payment.
Split by Weight : User assigns shares/quantity of the items to selected friends.
Split Custom : User enters the exact amount each friend is responsible for paying.
MANAGE RESERVATION FEATURES
Changes to reservation: User can add or remove extras and rooms.
Manage Guests: Add/remove friends, send reminders, and see everyone's payment status.
Reassign Rooms/ Add-ons: When a guest is removed, the user can re-allocate their expenses to another guest.
Testing:
By conducting usability tests, we identified and fixed any issues users faced interacting with the product, allowing us to refine the designs before final deployment.
Split Payments
Users had the most difficulty splitting the cost of a room using the custom feature.
​
Users attempted to adjust the custom price by clicking the price display.
CORRECT PATH
Manage Reservation
TASK: Assign a custom split to room 1
​
Users did not see any clear distinction on editing the guest list and assigning costs.
Users thought toggle bar took them to the customization screen to allow to assign guests.
CORRECT PATH
Next Steps
Iterate designs in accordance with user testing data to remedy issues users experienced while interacting with the prototype.
​
Potentially removing the “Divide by Shares” option as users found this to be confusing.
​
More usability testing to retrieve user data on the iterated designs.