Rinline

A platform for the avid runner or everyday explorer that allows the discovery new routes in your area!

Role
UX/UI designer

Tools
Figma

Duration
2 weeks

Problem and Background

The mobile app needs improved usability to help users complete purchases and find the "right match" based on relevant features.

  • 50% of users open an average of 7 item pages and then abandon the site never placing anything into their cart.​

  • 70% of the users who placed something into their cart do not finish the purchase. The users would abandon the cart at the registration page.

​The goal was to improve the conversion from browse to completion of checkout to increase revenue on the product’s mobile-web experience.

​The target audience was a 22–45 year old rollerblading enthusiast, who use roller blades to commute, exercise, or both. They are willing to spend some money on this investment, and prefer sturdy, high quality products that will last in an urban environment.

Research

Due to time constraints, my research consisted of:

  • competitive analysis of different companies to see how they designed for guest checkout and comparison features.

  • researching forums and specialty skating websites for information about rollerblade characteristics

I found that:

  • Rollerbladers value boot material, wheel size and hardness, brakes, frames, among other factors when purchasing rollerblades.

  • Some expressed difficulty in finding the right size, as brands have their own unique sizing chart.

Visual Design Guide

Sketching and Wireframing

I started with sketching my ideas on paper, and arranged the placement of elements on the browse page, compare and guest checkout. Then, wireframes were created to develop ideas and use for testing. When creating these sketches/wireframes I focused on:​

  • Designing for the least amount of clicks during checkout, to align with the business goal of streamlining checkout and expediting a purchase

  • Make clear calls to action, with bold buttons with high contrast to focus on “Add to Cart” or “Checkout.”

Visualizing User Workflow

I broke the user experience into two main flows:

User Testing

I conducted two rounds of testing, with 3–5 users each round, and iterated on the low and high-fidelity design based on the following findings:

  • Freeze the top/bottom column of the “Compare” page to increase readability of the different categories

  • Include user “Reviews” section in the product page, as users take into consideration how others interact with the product​

  • Add the average fit in the “Review” section to help the user gauge the actual fit/size of rollerblade

  • Avoid going straight to checkout after “adding to cart”, as it distracts from making other purchases

High Fidelity Prototype

Impacts and Next Steps

To measure the effectiveness of the app, I would:

  • focus on how many users opted to complete the purchase after adding to cart

  • how often people utilize the “Compare” function to compare different product specifications​

  • how often people checked out using “Guest Checkout” versus “sign in.”

For next time, I would:

  • explore different methods of shoe size conversion to ensure user is more equipped to make a purchase

  • explore adding an “express checkout” section for people who are signed in to expedite purchases

Key Takeaways

Don’t get too caught up with small details: When working under time constraints, prioritize working efficiently and focusing on the big picture rather than getting sucked into one tiny facet of a project.

  • Focus on the business and user needs: Always remember who you are designing for, and make sure their goals guide your decisions.

  • Competitive Analysis is a great tool: Finding inspiration in how other platforms solve design problems can be critical in formulating your own design.