loading

Show info
Philippe Heckly
User Experience Designer

©Philippe Heckly, all rights reserved

The Grommet – UX, IA

Related

Details

2 states of one tile
3 screens of the blog on the iphone

The blog can be accessed on the phone. The three screens above are a representation of the flow. You will see tiles and when you select one it will bring you to the story. A more entertaining way to read only what interest you.

Revisiting the blog

 

Category:  UX
Tools Used:  Competitive analysis, Card sorting, Photoshop, Keynote
Date:  June 2015
Client:  The Grommet

The problem

The blog page of the Grommet is not getting much traffic. Doing a re-design of the blog pages is the solution the product manager would like to explore to address this issue.


Competitive research

There seems to be a trend toward using tiles as a way to navigate between pages. Direct competitors sites like Brika and Brit.co as well as sites like Shopify, Pinterest and Custom Made all have some kind of tiles to do just this. It is a quick and efficient way of glancing through information and while keeping a feeling of choice.

 

An excel heat map

An analysis of various direct and indirect competitors’  blog look and feel

The process

I only had a few days to wrap my head around the problem and started by focusing on the taxonomy of the sidebar which had a lot of apparent issues such as redundancies and a possible lack of clear meaning for people not working at The Grommet. The information architecture of that section could benefit from a revision but I would need to know more about the technical aspect of the labels before deciding on my own what should be done with it. I then decided to go for a high resolution mockup to get a real feel for the problem and try to figure it out at that level though I usually prefer to spend a bit more time at the wireframe stage to try to address larger issues first.


Proposed solution

Without challenging the possibility that how people are introduced to the blog and what they are looking for in it might be the real issue that goes beyond the task assigned, introducing tiles for navigating the page is a nice and efficient way to have a quick visual overlook of choices. From there the question would be to figure out the right number of tiles, the treatment of the sidebar and their respective minutiae. I only provided one option but there is a lot more to explore there in the future.

Reducing the clutter on the left margin. Creating inviting tiles with little heartwarming copy, and showing date and author as much as possible we aim at making the blog experience more inviting and interactive.

Good design is as little design as possible

—Dieter Rams principle #10 from Ten Principles For Good Design

Here is an option as to how to display the blog though I would still highly recommend to make the stories as short and sweet as possible. “Read more” which implies work has been replaced by “The whole story.” Something worth testing as the action verb might be necessary to engage the person on the other side of the screen.

Here are two states of the same tile. The title is no longer than 2 lines with a byline below that stick to one as much as possible. The photograph is inviting. Portrait of the author helps connecting with the piece. It is dated and signed. When tapped or hovered the beginning of the text shows up.

2 states of one tile

Here are two states of the same tile. The title is no longer than 2 lines with a byline below that stick to one as much as possible. The photograph is inviting. Portrait of the author helps connecting with the piece. It is dated and signed. When tapped or hovered the beginning of the text shows up.

 

The above is a design challenge I did for the Grommet. It was intended as a way to check on my UX and visual design skills. I enjoyed the challenge and wanted to share the results.