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