top of page

TIMELINE

Jan - Feb 2023

ROLE

UX/UI Designer

(+ Partner)

TOOLS

Figma, FigJam 

METHODS

Brainstorming, Low-Fi Prototyping, High Fi Prototyping

UX/UI Design Club Competition

Check out our hi-fi prototype! 2023 Winners ✨

Student Challenge Prompt

The purpose of this project is to provide students a challenging, fun, and somewhat realistic UX design problem to solve, giving the opportunity for them to ideate, design, and prototype a reasoned solution. 

The Challenge

Product display pages (or PDPs) are the heart of any e-commerce website or application. They’re where users can look closely at a product, scroll through product images, see different colors and options, and read helpful reviews from other customers like themselves. PDPs are also informative, listing key features and benefits, technical specifications, and they visualize that information in an easy-to-understand way. Ultimately, it’s a big win when a user adds a product to their cart, but other actions are valuable too: saving or favoriting an item for later, or clicking
on another suggested item. 

For your challenge, redesign a product display page for an item that you’d love to buy from Basspro.com that better allows a user to determine whether the item is the best option for their need and to persuade them to ultimately purchase the product. 

​

You can use any real information from the product’s current page, or modify/add to it as you like.

Essential User Stories

  • As a user, I want to view key product information and details without scrolling too far so that I can quickly see if the product appeals to me.

  • As a user, I want to be able to select the right options (e.g. color, size, etc..) of the product so that I get a product that fits my preferences and needs.

  • As a user, I want to be able to save this product for later as a favorite, or to another list, so that I can find it again later.

  • As a user, I want to easily see information that helps me decide if this product will meet my needs.

  • As a user, I want to be informed of other relevant products, so that I can compare other options or find more products that I might be interested in.

  • As a user, I want to be able to add this to my cart when I’ve decided it’s right for me, so that I can finish or continue my shopping journey.

  • As a user, I want to see and confirm that this item has been added to my cart, so I know that I can move on to the next step of my shopping journey.

Some examples of Product Detail Pages on BassPro.com

Considerations

Your design can be as creative as you like—and it’s okay to have a different look and feel from the current BassPro.com website—but the design should look appropriate for the brand.

  • You may pull any photos or assets from the websites, apps, or other publicly-available sources.

  • You can omit any details or sections you don’t want to include, and add anything new that you’d like.

  • Some interactions might support the inclusion of additional models, screens, flyouts, drawers, or temporary messages. Feel free to explore them as part of your solution.

About BassPro

Bass Pro is a national retailer of leading outdoor goods, with locations all over North America and beyond. For 50 years, it’s been a go-to outfitter for fishing, hunting, camping, and other gear that helps customers get out and enjoy the great outdoors.


Bass Pro’s digital team is focused on improving the customer’s experience on its website and apps to be more inspirational, informational, and usable—with a mobile-first perspective at the forefront. 

About Our Users

The Bass Pro user is a fan of the retail shopping experience in store, and is probably into one of the major shopping categories like fishing, hunting, camping, shooting, boating, or other outdoor recreation activities. They may be a beginner looking to get started in an outdoors activity, but some may be very experienced and knowledgeable.


Users span every generation and demographic, from young families and individuals to older users who have been shopping Bass Pro for decades. Among all user groups, the use of mobile devices has continued to increase and is now accounts for up to 80% of site visits. 

Brainstorming

image.png

Thought Process

1. Gathered the criteria into FigJam

2. Collaborated by brainstorming changes that could be made to the PDP taking into consideration not only the elements/features that made up the PDP but also the user stories, BassPro brand, and user demographics.

3. Decided on mobile application redesign rather than the desktop version

Why? Because we wanted to design from the shoes of the company BassPro, which puts a"mobile-first perspective at the forefront".​ Additionally, 80% of the users prefer mobile devices.

4. Decided on a Product to focus on for our prototype

5. Started Sketching/Brainstorming off one another --> I wanted to put my own spin on it with my own passions by making the app more accessible to users with vision and motor impairments (features below). Additionally, we worked to redesign the shopping cart and lists page to improve the customer retention rate and experience.

​

Lo-Fi Prototype

After brainstorming and discussing, we went into sketching! Here's my sketch below:

image.png

Clickable
Hi- Fi Prototype

Click around the app here >

HOW DID YOU ARRIVE AT THIS SOLUTION?

How we arrived at our design solution, what we decided to include, and why we thought it works well. 

*Hover to click through OR click for full view*

HOW DID YOU CHOOSE THE LOOK & FEEL OF THE UI DESIGN ELEMENTS?

Features & Changes

General

  • rounded corner edges for buttons (add to cart) 

  • increased visual elements (icons) to reduce overwhelming text to users 

  • added brand coloring to the PDP

PDP

​

  • product name replaced with Back to Search

    • CTA button more clear for user navigation

  • relocated product price and star rating

    • left to the right side to denote importance as users read left to right

  • edited the magnifying glass (with a + sign to signify an increase in size) 

  • added AR mode 

    • users to get an idea of what their item looks like in their space

  • color choice changed to circles, removed select color option

    • to reduce redundancy, users can just click the circle color

  • changed the quantity to a drop-down 

    • capped because with the current quantity system, there is no limit to what a customer can buy

    • convenient on mobile for touch screen button pressing rather than typing in quantity

  • added static add to cart button

    • current app doesn’t show that at first and it is not intuitive to select product options for it to appear

  • added add to list button 

    • users can save their items to their own customizable list or default favorites list

  • relocated return policy up on the product page

    • easier navigation when you need to find return information

  • reduced product descriptions 

    • long, run-on to short, concise, important bulleted list

  • added text-to-speech 

    • audio read-aloud option for users to play the name + description of the product to make it more accessible to disabilities 

  • removed recommended products and customers also bought

    • combined it into “similar products” which recommends items similar to the product with good reviews/number of buys (related to bottom of the page)

  • changed reviews format

    • reviews were changed to clearly indicate the start and end of each review and a more organized structure

    • removed “No or Yes, we do/do not recommend product” because some of them didn’t match up and were redundant since the comments tell you how the customer feels

  • created filter drop-down

    • large number of reviews, we created a “filter” dropdown that can sort by images/videos, color, and size along with a “sort by” dropdown that can sort ratings and pricings (Low to High and vice versa).

  • added a list button on the bottom bar 

    • users can easily access their favorites list (default) or their customizable lists to go back to saved items

Lists

  • created a new page for easier navigation to the lists feature

  • added a view of the number of items in the current list 

  • simplified the list view by reducing redundancy in list names

  • added intuitive ‘swipe to delete’ feature to remove items from list and ‘swipe to move’.

  • reduced amount of extraneous information of products in the list - only shows name, sku, color, size, price, and “add to cart” button

  • included ability to toggle between list and gallery mode to display the products

  • continued the visual style by adding a green colored indicator of the items to the left

Shopping Cart

  • relocated pricing to the left

  • replaced quick drop-down bar to change the quantity of items

  • changed color of “Remove Item” button to a red outline for more visible, intuitive color that is used to signify removal

  • added “Add to List” button if users change their minds at checkout but still want to save the item for later 

  • In the “Order Summary”, replaced shipping $----- with FREE in green to decrease the ambiguity 

  • relocated “promo code” to the order summary so that users can insert before clicking the “Checkout” button

Future Steps

With more time:

  • More in-depth UX Design process

    • Persona building​

    • User Flow/Journey

    • Usability Testing and Iteration + Feedback Incorporation

    • Style Guide

    • Ethical Considerations

  • Scalability

    • Discuss how design could adapt to handle increased user numbers or fit into business context ​

  • Accessibility

    • Ensure usability for people with a wider range of abilities


For more work inquiries or coffee chat, please email me at nanitang89@gmail.com ☕️✨
Thank you for reading! 🧠

bottom of page