Project: Product card revisions
Goal: Create a more logical product card to showcase all product offerings.
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.
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.
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.