MasterLink Cycles Mobile Site
Project Scope
MasterLink Cycles’ mobile site is my response to a problem brief that was a part of Springboard’s UX/UI curriculum. Over a six-week period, I created a solution for a high-end bicycle company’s e-commerce mobile site that is struggling to make sales. My role in this project was brand creation, competitive analysis, and end-to-end design for a mobile site. I completed multiple rounds of user testing to ensure a successful customer experience and enhance revenue.
Problems to solve:
Most customers are viewing products and abandoning the site before adding them to the cart because they can’t decide which bicycle has the right features for them.
70% of customers who do add products to their cart are abandoning the site somewhere during the checkout process because it is cumbersome and requires them to create a profile with an email address.
The Project’s UX Process
Brand Creation
A key component of this project was to create a high-end brand style for MasterLink Cycles that would resonate with cyclists. I wanted to develop a sleek, modern kit that would appeal to cyclists’ passion for the sport. I designed a logo and branding template that is bold and engaging to represent the brand’s overall look and feel. The branding kit serves as users’ entry point to MasterLink. It ensures that the visual elements of the brand are consistent throughout all of the marketing materials and maintains recognition with MasterLink’s customers.
Competitive Analysis
With so many effective e-commerce sites in use, there were numerous examples of mobile sites for competitor bicycle companies that could be analyzed for effective user experience designs. During my analysis, my goal was to look at five different sites and determine what worked and what didn't. I then compiled a list of things to include in my site to ensure a useful and usable experience for MasterLink users. To better direct my research, I started with questions that would help me solve the usability issues presented in the project scope.
How do other company’s sites better display product features to help customers decide which product is right for them?
How do other websites lead customers to add products to their cart?
How might MasterLink have an easier checkout system that doesn’t require registration?
Are there any other features that would make customers prefer to use MasterLink’s mobile site as opposed to other retail locations or sites?
Wireframing
After conducting the competitive analysis, I used the opportunities I uncovered in competitors’ mobile sites to begin designing the basic structure of MasterLink’s mobile site. To help improve the usability issues in the prompt, I added features like a bike customizer tool and a quick express checkout, which were featured heavily in competitors’ sites. The basic functionalities in the wireframes served as the blueprint for the high-fidelity prototype.
Prototyping
Using the wireframes as a starting point, I further developed the design for MasterLinks’s mobile site using the branding kit as well as features uncovered during the competitive analysis. The prototype served as a simulation of the user experience I then presented during usability testing to potential users.
Usability Testing
For usability testing, I screened for five topic-literate test participants and conducted in-person tests. Each participant completed a series of tasks ranging from browsing different bikes, utilizing the “Find My Bike” and bike customization features, and checking out. I used a task success rate to measure the effectiveness of the prototype. The testing uncovered both positive and negative feedback from potential users that I could use to iterate on the designs. For example, one participant mentioned they weren’t sure what size they should choose for their bike and would like to see a size guide on the product detail page. Likewise, another participant said they liked that they could choose express checkout as a quick option. At the end of each test, I asked each participant to complete a System Usability Score (SUS) survey with 10 questions. The SUS scale is a well-known usability scale that is a reliable and valid measure of perceived usability. The results of the survey helped me set a baseline for usability for the prototype that I could use as a measure of success and against future design iterations.
“I like that I can use the Find My Bike option so I don't have to scan through bikes that I don't want.”
— Test participant
Conclusion
After analyzing the results from usability testing, I went through a final design iteration and revision, focusing on specific feedback gained from participants. Based on the task success rate and the results from the SUS survey, the potential users enjoyed the look, feel, and functions of the Masterlink mobile site. The next steps in a real-world scenario would be to launch the site and use various analytics, such as bounce rate, conversion rate, and heatmaps, to evaluate user behavior and continuously iterate, adjusting the design as needed to meet sales goals.