UX End-To-End:
Ecommerce
for Cyclists
Problem
An bicycle e-commerce website is seeking to improve conversion that is suffering because of at least two pain points. The hypothesis is that visitors are abandoning their purchase journey because they are unable to determine which bike is best based on relative features, and users must make an account to purchase.
Solution
I focused my efforts on putting bike features at the forefront. This allowed me to test the appetite for and functionality of selecting features and refining bike comparison. I also built in a guest checkout feature that allowed users to bypass the need for creating an account, which was a purchase blocker.
Role: UX Designer • Context: Conceptual solo project with provided design brief and time constraints
Duration: 90 total hours over 6 weeks • Tools: Figma, Adobe Illustrator
Leveraging existing UI kits and developing a project plan allowed me to focus my efforts and test my ideas rapidly.
Pre-work: Planning
With only 90 hours to complete an end-to-end UX design and solve for 2 problems, creating a plan and a supporting timeline was necessary.
Familiarization with the space
I took a look at the ways that industry experts have approached similar problems and achieved similar business goals. Not to cut and paste, but to look for opportunities and what I might do differently in this case.
Defining a brand, quickly
With tight timelines, I needed to develop my ideas efficiently. For this I leveraged existing UI kits that had baked-in UI elements that I could tailor for my own design. I found pre-built visuals and rough style guides that aligned with the brand attributes I was after. With the time block I gave myself, I was able to create a quick company name and logo, and define fonts, a color palette, and key UI elements.
Mapping out and blocking time
In order to achieve the end goal in the allotted hours, I built a project plan on how to slice up the needed work. This accounted for:
Methods and deliverables for each design phase
Rationale behind research, design, and testing methods
Time allotments for each step
Phase 1: Discovery
Secondary research was performed online to get a better understanding of user behaviors and the problem space. Reviewed were case studies, articles, and videos. The rationale behind this was to leverage research that has already been performed and potentially save valuable time.
Research highlights
Checkout optimization is highly valuable.
Forms should be simple and easy to complete.
Safety and security should be conveyed. Displaying of trust signals reduced abandonment.
Increase conversions by removing any friction and potential sticking points.
Offering guest checkout (and/or social sign-in) boosts conversion.
Mobile-friendly should be prioritized as half of online purchases are on mobile .
Primary action items and flows for MVP:
Make guest checkout clear, but capture email is priority
Develop easy-to-understand rating system/features list/features sorting to allow users to determine which option is “best.”
Secondary research made sense given the problem space and time constraints.
Phase 2: Design 1
I developed two user flows for my main red routes: selecting a mountain bike based on features and completing a purchase. Adhering to the project plan, I went straight to digital with both user flows and wireframes.
Designing mid-fidelity wireframes saved time in the long run and helped me stay on schedule.
Phase 3: Validate 1
Because of the understanding of the problem space, the time limitations, my project plan called for quickly scouting 3 test participants for usability testing. I reached out to my personal and professional network and spent roughly 30 minutes with each tester. I gave them 2 tasks to complete:
With features in mind, navigate to and select a mountain bike for purchase.
Complete the checkout process.
Guerilla usability testing proved to uncover some pain points an opportunities.
Synthesis
After observation and note-taking, I captured input and saw where my prototype and design approach had usability issues. I ranked pain points and created some directions to consider for refinement before building more detailed screens.
Phase 5: Validate 2
An opportunity to pressure test the high fidelity prototype I designed paired with the learnings from the first round of testing. My first round of testing with wireframes revealed a few holes in my script and I reworked my approach to get more direct feedback from what I’d designed. Once again, I took the same approach and recruited 3 individuals as fast as I could and gave them 2 revised tasks to complete:
Find a mountain bike that has 5 features of your choice, and decide which bike is best for you.
Complete the checkout process.
My high-fidelity prototype was used to test my learnings from earlier testing.
Phase 6: Design 3
(Refinement)
This was the opportunity to tighten the screws on the prototype, fix bugs, and try to improve the product based off of insight from the last round of testing.
(Left to right) The search bar was prominent on nearly all screens, and I took the opportunity to reduce the search function down to a single icon. I found this on other various sites, and I appreciated the clean look and simplicity, which also allowed for a slightly more enticing hero image.
(Left to right) Finding a solution for when it came time to compare products was a challenge for me. Comparing items was popular among testers, so I felt I needed to devote some tome to the functionality. Initially, users would just land on a pre-populated comparison screen, but questions arose as to how to use the feature from the onset. I developed a pop up when the user first chooses a bike to compare while they are in a product description page.
What I’d do next
I would like to further develop a comparison system, especially one that is responsive from the main navigation/results pages.
Conclusion
90 hours to complete this project was a new challenge, which forced me to be practical and honest about my abilities. This was a unique exercise to get a problem-solving idea developed in short order, and with my own choice of research methods.
One of the more interesting things I learned is that my assumptions were often wrong. I initially added elements that were intended to be helpful, but were overlooked. That is why it was good to test and re-test, to focus efforts on solving the problem from the user’s perspective.
Phase 4: Design 2
(High Fidelity)
This is when I got to put the UI kit that I had chosen to good use. Having the bulk of components I needed already provided and organized gave me a head start on fleshing out my design into something realistic. Learnings from round 1 of testing were worked in at this moment.
Changes made to design after round 1 testing
Shipping options reduced. Local delivery was removed. This is a non-issue as these options were not a driver or sticking point for purchase.
Added a guest checkout modal to better align with the brief and test the user appetite for creating an account vs. one-time purchasing.
User reviews on the comparison page were given more emphasis.
“Refine search” and “More bikes similar to this one” buttons were paired and given more prominence.
A few more product pages were added to help the prototype feel more realistic.
General usability bugs/failures related to prototype setup were addressed.
Participant Notes and Key Observations
Updating the script and asking testers to find bikes with X-number of features (tester’s choice of features, only the number was important) was a more direct approach for testing the strength of the feature-sorting designs I had developed so far. This was a challenge in the first round, and now gave the users a clearer direction which allowed for better observation.
Having bikes automatically sorted by number of features was helpful and made narrowing down selection more obvious.
When bikes that had matching features were presented, ⅔ of testers would make their selection based on reviews/stars, even if the other option(s) were less expensive.
Same results as round 1 testing:
Having to not log in or create an account was a bonus, especially with a website that a user imagines they would not visit often enough to have an account.
Sorting and filtering that I had designed was not used.
Price was always a driver for users to look at a bike further.
Comparison was appreciated and acted on, but the end result was not tailored enough in the prototype and looked buggy.