UX/UI Case Study
E-commerce
A customize designed purchase flow for a telecommunications company
Company: Frontier | Date: Summer 2021
Scope: Redesign the E-commerce experience for Frontier.com
Tools: Adobe XD, Photoshop, Illustrator, UserZoom, Jira
Role: Lead UI/UX designer, usability researcher
Team: Agile, self directed, CX feedback
Challenge
Redesign of the existing online e-commerce experience. Data revealed the previous experience was performing at a low conversion rate of only 1%.
Along the journey, we encountered numerous blockers we had to overcome. Including: complex business requirements requiring users to preform the unwanted credit check before completing a purchase, vendor induced payment limitations, poor performing API’s, all of which resulting in a poor user experience and overly complex user interface.
We had to be very clever with the copy and order of the task flow in order to generate solutions. As we awaited long overdue API upgrades.
Design Process
It was user-centered design (UCD) process. Places focuses on the users and their needs in each phase of the design process. In the process I involved the users throughout with variety of research and design techniques, so that I can make a really useful and usable product for them.
Empathize
Understand the user you are designing for.
User Research
I watched numerous user testing clips collected during the Primary Research phase. We conducted 15 unmoderated remote usability tests to understand their frustrations and gain insights of their pain points using the current getfrontier.com experience. I was able to started to identify the user pain points for my data analysis.
Observations
After watching the unmoderated user tests above. I gathered my findings that I referred to often to help me improve the design (listed below).
Define
Define everything about the user.
Demographics
Demographic data captured by Quantcast collected from visitors on Frontier.com
User Personas
Using the collected data from the targeted users, I created a user persona to understand their primary needs & challenges. This helped me to create unique design solutions for the benefit of the users.
For this project, I developed two personas: A primary Vincent and a secondary I named Dorothy (Dotti). Each has different needs and goals. Vince is a young, cost conscious Millennial who purchases online often. He avoids telephone calls at all costs. Dotti, on the other hand, is an older woman who is hesitant to purchase online and fearful of identity theft. Her needs are different. She is not quite as trusting when it comes to technology. These two personas were borne out of the research done in the previous phase. View Vincent’s persona. View Dotti’s persona.
User Journey Map’s
I made this user journey map to visually demonstrate the user flow of the application from Vince’s perspective. It outlines all the touchpoint interactions that he encountered from the begging of his journey through the shop internet flow process of selecting an internet plan. See a larger version of Vince’s user journey map.
I made this user journey map to visually demonstrate the user flow of the application from Dotti’s perspective. It outlines all the touchpoint interactions that he encountered from the begging of his journey through the shop internet flow process of selecting an internet plan. See a larger version of Dotti’s user journey map.
Product Goals
Listing project goals can help me form a clear overview of the product, pave ways for determining product features, and make the proper decisions. I summarized user goals from my user persona and empathy map, collected business goals from the project brief, took technical goals into consideration, and visualized the project goals.
Ideate
Come up with creative solutions.
Minimum Viable Product (MVP)
I began designing for the MVP the most basic, launchable version of the product that supports the minimal, yet must-have features identified. An MVP is created with the intent to enable faster time to market, attract early adopters and achieve market fit from early on and sets the ability to make incremental improves and changes.
Design
Build solutions.
Responsive Designs
Mobile first high-fidelity designs
TEST
Return to the users to test. Learn fast.
Interactive Prototype
Thanks for viewing!