Improving the Shopping Experience.

 
Client

REI

Role

User Research
Wireframing
Prototyping
UI Design/Visual Design
Usability Testing

Objective

For this design challenge, I worked to revamp REI’s mobile platform in an effort to improve the online shopping experience for customers.

 
 

Business Challenge

REI’s record profit continues to expand over the past 15 years in both their brick and mortar stores and online whereas many retailers struggle to stay competitive in the new digital era. The business identifies the necessity to differentiate their digital presence by creating a brand that impacts the outdoor community. However, as their brand succeed through their online and physical store, their mobile application seems to sing a different tune. How can REI build a mobile platform that adheres to their branding goals while staying competitive against other online retailers?

Customer Problem Statement

They love the REI brand, but unfortunately they do not feel the same about the REI - Shop Out Gear app. Customers are unhappy with the the interface of the app which they find difficult to navigate and purchase items from the store.

Research or Assumptions

Research on the brand was conducted by observing the design layout of the website in comparison to their mobile app. Reviews were read on both in the apple and google play store for a clearer understanding about the customer’s experience in regards to using this app. As it turns out, many loyal customers use the REI app to purchase items, however, there were many low ratings due to the flaws with the interface.

 
 
Ntrinh_FinalAssignmentBrief.png
 
 

Design Process

Ideation

Several ideation sketches were inspired by other retail-based apps such as H&M, Nike, Urban Outfitters and Old Navy. I also refer to the REI web browser on the mobile version to ensure I was still following the company branding.

NTrinh_prototype.png

Prototype Concept

  • The tile layout is commonly used for most retail-based interface. The solution is simple and users are comfortable with the familiarity of it.

  • Pen and paper were used to create a low-fidelity prototype. It made it easier to sketch out the wireframe, but users do not get much content to understand the concept as a whole.

  • Three prototypes were tested performing the same task. The chosen concept appealed to most of the testers due to the user flow being intuitive and the layout was considered visually engaging.

  • Concept prototype had too many steps to complete the intended task.

 
 
 

Usability Prototype

Link to Usability Prototype

  • The homepage was divided into two main section “Explore” and “Shop”. The original iteration focuses more on outdoor engagement by providing hiking trails suggestions. I did not want to take away from that feature, so I created a section for “Shop” on top of the hierarchy to draw attentions to users.

  • Adobe XD was used to create the wireframe. Aligning the layout was simple, however, there were some error to the interaction that may caused confusion.

  • Users were asked to complete the task of finding a backpack for a camping trip. Users easily navigated from the main homepage to the items page.

  • In this iteration, there were three stores to which users can browse through at in the “Shop” page. That caused confusion to which store the users were purchasing from.

 
 

Stakeholder Prototype

Link to Stakeholder Prototype

  • Additional images and content provided a higher fidelity. The rearrangement in the shop layout minimized the confusion caused by the previous iteration.

  • Adobe XD was used to add the finishing touches. Adobe made it easy to add images to the layout, however, I was limited to what kind of animation I could create.

  • Users were asked to completed the task of looking for camping backpack. Users were encouraged to explore the application.

  • Users found the icons fun and engaging. There was confusion to why they could not find the item they were looking for in Travel when the icon is literally a backpack. Otherwise users found the flow to be intuitive. 

 Next Steps…

The next step would be adding more functional links throughout the store and conduct user testing before going into the development phase. We would also want to apply a similar user flow to the other stores REI offers such as their REI Outlet and Used Gears. This is to maintain consistency throughout the application.