Image by

Project: Product card revisions

Client: Mapsted

Goal: Create a more logical product card to showcase all product offerings.

The task

Create a more logical product card to showcase all product offerings.

Mapsted offers a variety of products to a customer looking for location-based services. When you click "products" on their website you are greeted with this card of products. 


Thought Process

What could I do to make this card layout more intuitive and easier to understand?

  • I found the line separating the parent category ( Location Positioning Technology) from the subcategories (Indoor Maps & Wayfinding, Indoor Positioning & Location Services, Map Management CMS) to be confusing segregation of information. Were the products related? 

  • I also found that there was no real differentiation between a selected product and its key features. I also decided to change this. 

Screen Shot 2022-01-25 at 8.02.16 PM.png

Design Changes

Making simple changes to increase usability. 

The end result

Not every change needs to be drastic to help the user along their journey. Sometimes a little change makes a big difference. 

  • I decided to delete the line between the parent product and its subcategories to show they were related. 

  • I changed the selected product to a different colour so the user knows which product they are on as well as keeping the underlining. 

  • I also changed the Key Features to the same blue to show that they were related to the parent product.