VelocityPeo

About

VelocityPro, a bike-selling enterprise, operates primarily through its mobile-web platform. The company is currently focused on upgrading this platform, particularly in the areas of browsing and checkout. The objective is to enhance the overall usability of their product, ensuring that customers have a seamless and efficient experience when navigating and making purchases on their mobile-web site.

The primary business goal for VelocityPro is to boost the conversion rate from browsing to purchasing. This goal is centered around refining the customer journey on their mobile-web platform, from the initial browsing phase to the final purchase. The enhancement aims to simplify the selection and buying process, making it more intuitive and user-friendly. Through these improvements, VelocityPro seeks to increase sales, elevate customer satisfaction, and solidify its competitive edge in the market. The project focuses on delivering a streamlined, engaging, and hassle-free shopping experience, encouraging more users to complete their purchases after browsing their selection of bikes.

Roles

I assumed the following roles in designing this app:

  • User Experience (UX) Designer

  • Interaction (IxD) Designer

  • User Interface (UI) Designer

  • Visual Designer

  • UX Researcher

Overview

Deliverables

Interaction Design:

  • Competitive analysis

  • User surveys and one-on-one interviews

  • Personas

  • User journeys and task flows

  • Site map

  • Low-fidelity wireframes

  • High-fidelity mockups and prototypes

  • Design system and UI kit

  • Usability tests and findings

Project Specifications

  • Duration: 3 weeks

Tools

  • Figma

  • Miro

Problem

The data presented by the Product Manager (PM) highlights two primary issues affecting user conversion on the site:

  • High Item Page Abandonment: 50% of users visit an average of 7 item pages but leave the site without adding any items to their cart. The PM hypothesizes that this is because users need help to compare features and determine which bike is best for them.

  • High Cart Abandonment: 70% of users who do place an item in the cart do not proceed to purchase. The main drop-off point is the registration page, where users must create an account to complete the purchase.

Solution

The solutions below are to enhance user experience and improve conversion rates by making it easier for users to choose a product and complete a purchase.

  • Add Compare Feature: To mitigate the high item page abandonment rate, adding a "Compare" feature would allow users to evaluate the relative qualities of different bikes easily. This is aimed at helping users make more informed decisions about which bike to purchase.

  • Introduce Guest Checkout: To reduce the high cart abandonment rate, the PM recommends introducing a guest checkout option that simplifies the checkout process. This feature will capture the user's email but won't require full account creation, thus speeding up the checkout process and potentially increasing conversions.

Empathize

Interviews

To gather insights on bike shopping, feature preferences, and the checkout experience, I interviewed five experienced bikers who primarily shop online. My objective was to understand how insufficient and overwhelming feature options and mandatory account creation can impact the final purchase decision.

Here are some of the questions I asked:

  • What was the primary reason if you added an item to your cart but didn’t purchase it?

  • How do you feel about the clarity of details provided in the products?

  • How important is a speedy checkout process for you?

  • How do you feel about the requirement to create an account before purchasing?

  • What prevents you from adding an item to your cart after viewing multiple products?

  • Does any part of any checkout process influence your decision not to complete a purchase?

Define

Affinity Mapping

I created an affinity diagram to help refine my key takeaways from the interviews and surveys. I looked for common themes and divided habits, quotes, and experiences into four categories:

User Persona

Using the insights from my affinity diagram, I developed a user persona for the VelocityPro.

Ideate

User Flows

Based on VelocityPro's issues, I've crafted two separate user journeys. The initial journey delineates the steps a user takes while browsing and utilizing the comparison page to assess bikes, ultimately culminating in the checkout process. The second journey centers on the guest checkout procedure.

User Flow: Enhanced Bike Comparison on an E-Commerce Site

User Flow: E-Commerce Site with Guest Checkout

Prototype and Usability Test

Wireframe

I have created two wireframe designs in response to VelocityPro's two main issues. The first wireframe aims to enhance the bike comparison feature on VelocityPro's website. The second wireframe is dedicated to improving the guest checkout process.

Wireframe: Enhanced Bike Comparison on VelocityPro’s site

Wireframe: Guest Checkout

UI Kit

The UI Kit features the SF Pro font, which enhances readability and versatility, appealing to a research-focused, trend-savvy audience. The chosen color palette, mixing vibrant tones like Burnt Orange and Jonquil with sophisticated hues like Fire Brick and Prussian Blue, appeals to high-income biking enthusiasts. Accents of Ghost White and Jet Black add a modern, luxurious feel. Together, they create a user experience that embodies sophistication, energy, and reliability, perfectly aligning with VelocityPro’s audience's expectations of quality and style.

Color Palette

This color palette masterfully merges vibrancy and sophistication, aligning perfectly with the characteristics of your target demographic — the serious, research-driven, high-income biking enthusiasts. Colors like Burnt Orange and Jonquil bring energy and enthusiasm, resonating with the adventurous spirit of your audience, while deeper shades like Fire Brick and Prussian Blue add a layer of seriousness and sophistication, appealing to their mature, detail-oriented nature. Ghost White and Jet Black offer a sleek, modern backdrop, enhancing the other colors and appealing to the luxury and elegance appreciated by high-income earners. This combination of colors effectively captures the essence of an expert, savvy, focused, and dependable brand, matching the expectations of a demographic that values both quality and style in their biking investments.

Hi-Fidelity Prototype: Homepage

To expedite the purchasing process, I've implemented a payment UI/UX that will likely be familiar to most users. This intuitive design reduces the learning curve, allowing users to complete their transactions quickly and efficiently.

Main pain points that were discovered during the tests and addressed in the iteration:

Order Status

When guests completed the checkout process, they were not presented with a confirmation or order status page, leaving them uncertain whether their order was placed. To address this issue, I designed two additional web pages: one to indicate that the order is being processed and another to serve as an order confirmation page. This aims to give guests a sense of assurance that their order has been successfully placed.

Photos

Upon visiting the product page, users indicated a need for more visual content within the product details to help them make a well-informed choice about buying the bike and evaluating its features. To address this, I incorporated extra photos highlighting the bike's various features into the product details section. This update is designed to offer users a fuller understanding of the bike, aiding them in making a more confident purchase.

I created a prototype in Figma and conducted two rounds of testing with ten users. I gave the users 4 tasks.

  • While browsing, filter out mountain bikes and add bikes to compare.

  • Achieve using the compare tool to compare three bike’s features.

  • Add the last bike to the cart.

  • Achieve guest checkout.

Font

Its readability ensures ease of information consumption, which is crucial for a demographic that values thorough research. The font's versatility supports varied branding needs, from technical details to bold marketing, aligning with your audience's savvy and focused nature. Its tech-savvy appeal resonates with users who are always in tune with the latest trends. At the same time, its professional yet approachable style perfectly complements a brand that is knowledgeable yet accessible. Thus, SF Pro embodies the balance of sophistication and approachability ideal for engaging your target user group.

Hi-Fidelity Prototype and Solutions

These high-fidelity screens showcased here emphasize VelocityPro's solutions. The first screen illustrates the enhancements made to the bike comparison feature on VelocityPro's website. The second wireframe is designed to enhance and streamline the guest checkout process.

Hi-Fidelity Prototype: Product Page

Hi-Fidelity: Mobile Web Experience

A notification will appear when a user, who is already knowledgeable about the features they desire, selects up to three bikes for comparison—a design choice to optimize mobile app usability.

Solution: Guest Checkout

The shipping information fields are conveniently located on the same page as the email field during guest checkout. This streamlined design minimizes the steps users need to take, making the user's purchase quicker and easier. Once a user fills these out, users are seamlessly directed to the next page to enter their payment information.

From a UI perspective, comparing fewer items results in a simpler, uncluttered layout, improving navigation and mobile-friendliness—key for smartphone-using shoppers. Limiting bike comparisons to three enhances user experience and business performance, fostering a more efficient and pleasing shopping environment.

Solution: Compare Feature

Users can compare up to three bikes of their choice. Additionally, filters are available to help them find the type of bike they're interested in.

By restricting the comparison to just three bikes, we streamline the decision-making process for customers. This targeted approach facilitates a more straightforward evaluation of essential features and minimizes decision fatigue, enhancing the overall shopping experience. Quicker and more confident choices can increase cart additions, higher conversion rates, and higher customer satisfaction.

Testing

Conclusion and Takeaways

As I embarked on my second capstone project and delved into research and design for the third time, I realized that not all alternative research methods and designs are universally applicable. The key is to tailor your research approach to the specific scenario. For instance, in the case of VelocityPro, interviews with experienced bikers yielded the most relevant insights.

In my UI/UX design journey, I've understood several key principles that go beyond the surface level. Conducting user interviews has been fundamental to adopting a user-centric approach; this direct feedback informs my design choices rather than assumptions. I also recognize the value of simplification and streamlining; for example, limiting product comparisons to three bikes was a conscious decision to make the user experience more focused and less overwhelming. I've found that balancing speed and security is a crucial aspect, especially during the checkout process. Users don't just want efficiency; they want assurance, which led me to implement an order confirmation page. Focusing on experienced bikers taught me the significance of segment-specific design, addressing the unique needs of a particular user group. Being responsive to user needs isn't just about device compatibility; it's about evolving the design based on ongoing user feedback. This feedback loop is essential and enables me to pivot my design strategy when necessary. I don't just consider individual interactions in isolation; my approach is holistic, considering the entire user journey from browsing to checkout. Internalizing these principles has deepened my understanding of UI/UX design, enabling me to create effective and user-friendly experiences.