Designing an MVP for a new web service

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.

My role

User testing
UX Design
UI Design

Type of project

Design sprint

the foundations

Working with a fluid grid.

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.

Lots of text looking good

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

Design details

A consistent proportional system

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

Hover me
Created with Sketch.
UI: Redesign

Fixing the flaws

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.

  1. The alert number is redundant.The number of notification usually is low.
  2. The alerts take too much space and push important content below the fold.
  3. The color contrast makes the tab navigaton hard to see and the use of a burger menu for the mobile view the other pages.
  4. The content from the blog doesn’t stand out enough, making it less enticing.
  1. Alerts are now grouped in a column that is less obtrusive yet still very prominent.
  2. The alert style uses color and a san serif font to make it stand out from the rest of the page.
  3. The new navigation is simpler and uses a scrollable interaction on mobile.
  4. The content in the blog uses now a more editorial look and feel, making it more readable and functional.
styleguide

Striking the right balance between function and form

The service we were designing for was trying to play two games. On one hand it was very functional, providing alerts and call to actions for the user to follow upon

On the other hand the service was meant to engage users with text based content i.e. articles.

To strike the right balance between form and function we used a clear bold san serif font for the former, and a serif font for the latter.

Icongraphy

During our research with users we found something uncanny. As it turns out most people perceive padlocks as a sign of security, to the point that the more we used them the more people perceived our service as safe.