This was one of the first MVP I had the chance to design from scratch. Initally part of a small product team, my responsibility revolved around concepts ideation and prototyping.
The project later moved from prototyping to building the MVP. From this point on I became the lead designer and worked on the visual aspects of the product as well as working in parallel with the developer building the service.
When we started working on the design we didn’t know what kind of device the service would be used with. On top of that it was still unclear the amount and type of content that would populate the pages. So we designed the MVP to be screen agnostic because we felt that that was the best way to ensure the content looked great anywhere.
For our design we used used the font size as a baseline for our proportions. Using the principle of the Golden Grid System we used percentages for column sizes while the gutters where kept proportional to the body font size (1em).
For the UI elements and their distribution across the page we used the same principles as with the layout. We designed everything with multiple of 4px (or 1/4em on most browsers).
After a few user testings the interface showed some clear interaction flaws.
We looked again at our initial design and decided to make some changes. Below is a selection of those changes.