Cycle Pro was an optimized e-commerce project selling bikes via a mobile web platform. Sales conversion was the core scenario of this project; thus, the business goal was to improve conversion from browse to checkout completion to increase revenue by enhancing the usability of the experience. I was responsible for wrapping up the problems and transforming the project ideas into solutions by analyzing existing information and data to facilitate customer engagement and site usability.
.svg)
Depending on the sources related to the company information, the brand's personality represents an expert who knows the latest trend products, and the attribution was Savvy, Focused, Serious, and Dependable. I conceptually scoped the company name, Cycle Pro, to approach the brand personality maximum: Cycle for bike cycling, Pro for professional.
On the other hand, I did a quick search via ChatGPT, relying on the target audience for prevalent and preferred color tones; I picked a font and downloaded a basic e-commerce UI kit as a prominent visual guide for attribution. The result summarized that black was the standard staple color tone for most bikes' practicality and style. Fluorescent colors became more prevalent because they enhance high visibility in urban and weak-light environments.
Hint: Please look at the updated UI kit in the Design Prototype section.
The existing data showed that about 50% of users open an average of 7 item pages and then abandon the site without adding any items to their carts. Additionally, 70% of users who place an item in the cart do not purchase it; the highest rate of purchase abandonment was from the registration page because users must make an account to buy in the current stage. The project provided a hypothesis as the problem statement was that users needed help determining which bike was best based on its relative features.
Apart from the data above, the project also generated two ideas for design challenges: product comparison and guest checkout, but check-out as a guest requires email captures. Moreover, it has several lightweight page wireframes from product discovery to check-out completion.
Before starting the site optimization, I studied and captured some e-commerce sites from industrial leaders as primary references. I also drafted a project plan to expedite the Discovery, Design, and Validation design phases because it was a good practice and habit for time management while the project began. Adhering to the problem statement, I reviewed existing pages and found that each page may need more informative sections for users to look at. To ensure my secondary research ran smoothly and that being familiar with the product bike, I created a research plan that led me to explore why users eventually abandoned purchases and good-to-have content from competitors' sites.
During my secondary research, the reasons for cyclists' abandoned purchases reminded me to transfer and determine essential site content, such as information on the item page. For a comprehensive evaluation, I selected three competitors, namely Canyon, Specialized, and Cannondale, to explore their purchase flows on their respective sites. The aim was to identify any missing pages or content that could inform the relevant sections to be included in the current wireframes. Additionally, this analysis aimed to uncover these competitors' notable strengths and weaknesses regarding site content and usability. To gather and cluster the research findings easily, I also synthesized them into an affinity map, which generated several opportunities as my consideration to work on my design.
Canyon, a German-based brand is known for its high-performance road, mountain, and urban bikes.
Specialized, a global brand known for its innovative bike designs and cutting-edge technology.
Cannondale, renowned brand approach to bike design and engineering as a priority.
By adhering to the problem statement and competitors' site experiences, I sketched two user flows from discovery to check-out completion. The flows assisted in inspecting missing pages and content to existing wireframes, which caused lower conversation at the present stage.
Product Catalog, Compare Results, and Checkout Process Pages (address, shipment, payment, order confirmation, and response) were some pages that needed to be added compared with the existing wireframes. Moreover, transforming the project ideas, product comparison, and guest purchase into checkout completion involved three nesting model screens: Product Compare, Guide, and Add-to-Cart Response.
The site content affected users' engagement and conversion because the existing site content was less than enough to inspire their desire to purchase. Thus, I referenced competitors' studies and why people abandon purchases from the research phase. I developed additional content, such as product authority, customer reviews, product filters, etc., to create a medium wireframe prototype and conducted usability testing to validate the efficiency of site content and flows.
I remotely sought four males and one female from my former company to participate in my moderated testing. Since everyone has an online shopping experience, besides the flows, I focused on validating the page information to be readable and understandable. Click to see the entire testing script and report
As a result, two findings needed iteration, although all participants smoothly experienced the guest checkout flow and quickly recognized the “compare” functions and the size guide.
I iterated on my mock screens and updated my UI kit since I received improvement insights from testing the low-fi prototype. I created a high-fi baseline prototype for my second usability test with the same questions and tasks. Still, this time, I also added some questions to my testing scripts that validated the interfaces overall regarding visuals and feel and tended to uncover any user thoughts that could apply to the subsequent iterations. I recruited another five participants to run the testing. Click to see the entire testing script and report
All participants quickly completed all the tasks, and most of them felt the site was concise and clear and adhered to the sport and active impression of the brand. The average rating for the site was 7. However, several observations and feedback were still worth paying attention to.
Reviewing all contributions to this capstone project, I found that determining the site content on product information would be a design constraint because I was not good enough to be familiar with the product initially. Besides researching the motivations of people considering purchasing a bike, I needed to learn some technical terms and components of the bike product to help me better structure the content on the product comparison page. Although I felt difficult at the beginning of the content collection, it was necessary to learn more about the product, whether it was a physical product or a service.
Additionally, some references from our competitors were worth working on, although they were not exposed in these usability tests in the present design phase. For instance, showing the total number of customer reviews for each bike or allows users to translate the reviews if customers purchase the product outside the U.S.
Because Cycle Pro was a mobile web project, it should be a responsive site and compatible with different devices; however, the performance of some layouts and components would be changed, especially from a mobile viewpoint. My following efforts were to finish the rest of the pages to fit in the tablet and mobile view. As mentioned, I will go ahead and list some nesting feature components and conduct a quantitative survey in the future to see what else people want to see on the site.
