Powergrip

Re-imagining Europe's biggest Disc Golf store product page & checkout

Disclaimer: I am not affiliated with Powergrip in any capacity.

Project info

Project type: UI review, Unsolicited redesign
My role:
Analysis, Design
Tasks included: Sketching, Wireframing
Tools used: Pen & paper, Figma

Project background

I recently ordered some discs from Powergrip and while I enjoyed their wide selection and the information they provided, I noticed there’s also room for some improvements. Keep reading to see how I think the UX could be enhanced just by looking at the UI.

Workflow

Scope: I can’t fix everything, so I focused on the key things that help not only the customers but also the company to achieve their goals.

Analysis: I briefly analyzed business and customer needs within the chosen scope. Based on those needs, I moved on to analyzing the problems in the UI. To put it shortly, customers want to find the right products and complete their purchases effortlessly, and the company wants to sell their goods without their customers getting frustrated and leaving.

Sketching: I did some pen-and-paper sketches to try out different solutions.

Wireframing: I turned those sketches into wireframes to present my ideas in a more refined way.

Some of the sketches I made for this project.

De-cluttering the navigation

Navigation before

  • There are many elements that compete from the user’s attention: ungrouped elements above the main navigation bar, and a side menu on the left. This makes the UI non-glanceable, and it’s harder to understand what’s important and what’s not.
  • Some elements, like ”Retail locations”, are repeated in both menus.
  • Information such as PG-logos is irrelevant to most visitors, and should be presented elsewhere, e.g. in the footer.
  • There are two search fields (top and left), one is labeled as ”search” and the other is labeled as ”product search”. Counter-intuitively, the one labeled as ”search” is the one that suggests products when typing.
Two menus and scattered information will make it harder for the user to decide where to continue.

Navigation after

  • I dropped the menu on the left. I combined and grouped the information so that the hierarchy is easier to understand, important things stand out and there’s less clutter.
  • I left out some secondary information which can be placed on e.g. the footer.
  • I put one prominent search bar on top so that it’s easy to find, and put the advanced search option right next to it, so that they are grouped together but there’s a clear difference between them.
  • I also added more negative space to help organize the information and reduce visual distraction.

Product page

Product page before

  • The UI is overall cluttered, making it difficult to focus on the main task (select a correct disc and add to basket).
  • Selecting the disc weight/color combination is not self-explanatory, and the UI might look very different in some products. This forces the user to constantly learn new things.
  • The explanatory text on the disc flight rating numbers is too small to be legible.
  • Users can add only one disc at a time to the basket.
  • Text on the stock update notification button is vaguely ”save”. A better wording would be for example ”order notification”.
  • ”Add to wish list” and ”Login to rate this product” do not promote registering for new customers.
  • The site does not show similar/related products, which could help the customers find similar items and possibly boost sales.
Flight number labels are not legible, and selecting weight and color needs some interpretation.

Product page after

  • I divided the page in two: left side for all the information about the product, right side for purchasing.
  • I chose a dropdown menu for selecting the details. This can be used for other products too, making it easier for the customer to recognize the functionality.
  • I removed the explanatory text on the disc flight rating numbers. The user can either hover over the numbers to see the labels or click the question mark after the heading.
  • I made it easier to add multiple copies of the same product to basket.
  • ”Add to wish list” and ”Login to rate this product” would encourage new users to register when clicked.
  • Bottom section would promote other items, like similar products, items the user previously viewed or new arrivals.

Checkout

Checkout before

  • Customer, shipping and payment information are all on the same page, which is a lot of mental work at once and thus causes fatigue.
  • The button for clearing the ”Additional info and wishes” field looks like a primary function, which is not a good practice for a button that deletes something.
  • The checkout page is the last chance to convince customers to make any last minute purchases, but it’s not utilized.
  • ”Login” does not promote registering.
The red line is a super optimistic example of how the user's eye bounces from one target to another.
  • Contact and delivery information forms provide no information about what is wrong or missing, instead it will only prevent the user from proceeding when they try to choose a delivery method if at least the email is correct.
  • This is a bad practice for both the user and the business. The user might get frustrated when they have to figure out what’s wrong and go through all the fields. Faulty information might also cause some extra work and costs for the company.

Solution

Navigation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Product page

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Checkout

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

To be continued...

This case is still a work in progress, but will be updated shortly. Stay tuned!