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 their UX could be enhanced just by looking at the UI. This is not a pixel-perfect redesign, but more like a presentation of ideas.

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. I considered navigation, product page and checkout to be the most important.

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.

Navigation

Problems

  • 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.

Solutions

  • I removed 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

Problems

  • 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.

Solutions

  • 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

Problems

  • 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.
  • Form fields do not provide 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.
The red line is a super optimistic example of how the user's eye bounces from one target to another.

Solutions

  • Checkout is divided into steps, a clear indicator shows the process
  • Secondary actions such as ”Remove” are less prominent than primary actions
  • Users can edit their checkout information at all times
  • Shopping cart can be edited on the right
  • Required input fields are marked with asterisks and possible error messages would appear below the input field
  • ”Store Pickup” option is more prominent (on the actual site the shipping and pickup options are in two separate accordions)
Mobile view.

Retrospective

During this project I learned a lot about what makes a good checkout process. I also learned to better group information to make the content more glanceable and organized.

In a real project, designing the best possible checkout experience would obviously include some research and testing, not to mention this project covers only a fraction of the things that need to be considered.  However, I believe that in many cases it is possible to make some improvements based on good industry practices like I’ve done here.

Thanks for reading!