Veebe has been out there for several weeks now and I have been slowly advertising its existence while fixing issues. At this point there is a struggle between conflicting priorities - especially as spare time to work on this is in such short supply. Those priorities are:

  • Promotion - writing articles, contacting people, advertising etc.
  • Functional improvements - adding missing data or correcting inaccuracies, implementing features etc.
  • Cosmetic improvements - improving readability/navigability and aesthetics

Thus far, the first two have taken priority and visual design has taken a back seat resulting in an app that works well but lacks a quality finish and appears rather amateurish.

There is still a lot of work to do on promotion and that has to be top priority because without users there's little point in Veebe existing. In terms of functionality we are in a good place so it seems like a good time to revisit the visual design briefly as a slick finish could help with the promotional aspect as well.

Therefore, I have started to think about a complete visual redesign. If we were starting from scratch:

  • How would we design the visual hierarchy to emphasise the important information?
  • What layout will be best on mobile and desktop?
  • What do we need to do to make the app look and feel slick?

Initial sketches

I like to start by banging out a load of very quick sketches. These show the high level layout and nav without any real detail. The idea is to go as broad as possible before getting bogged down in specifics. I knocked out 20 in less than half an hour and as you can see from this sample they are very basic:

Candidates

Next we can discard the ones we don't like and narrow down to our favourite three sketches. We don't want to go too narrow so these three candidates need to be diverse - if we choose ones that are basically the same then we can become locked into one way of thinking and stunt our creativity.

Let's look at the concepts I have picked out of the initial 20:

Long page concept

The idea is similar to the current design where everything is laid out on a long scrolling page:

The key differences are:

  • Auto-scroll to matched ingredients when update clicked
  • Navigation overlay to auto-scroll between sections (visible when one or more matched ingredients)
  • Show key info only (e.g. top 3 deficiencies) and click to expand for more

This could use a snazzy parallax effect to give more depth as long as it's not too distracting.

Drill down concept

The idea here is to have a hierarchy of pages with progressively more detail going down:

The home page contains a box for entering ingredients with a footer overlay containing a very brief summary.

The summary updates as ingredients are entered and tapping on it causes it to expand to show more detail.

Tapping on the sections in the expanded summary goes to pages showing the full detail where calculations can be expanded.

The intention is that in most cases the detail pages do not need to be visited.

Highlighting editor concept

The idea here is to cut out a step and repetition of all the ingredients by merging the ingredient entry and matched ingredients together. The entered ingredients would be highlighted to indicate the matched text:

The matched amount would be augmented with its equivalent in grams.

Tapping on a highlighted ingredient would go to a page with the details for that ingredient.

A next button moves to the nutrition report page showing the key nutrition data with the ability to expand sections for more detail.

The good, the bad and the ugly

Each of these ideas has different strengths and weaknesses. Let's think about what we like or don't like in each design.

Long page

Good:

  • Simple to navigate
  • Parallax effect is cool

Bad:

  • Can't see summary or match errors while editing
  • Manual update
  • Nav bar wastes real estate
  • Repetition of ingredients

Drill down

Good:

  • Clean / minimal
  • Simple to navigate

Bad:

  • Can't see match errors while editing
  • May need to navigate up and down a lot if checking calculations

Highlighting editor

Good:

  • Can see match errors while typing
  • Combined entry and matched ingredients is compact
  • Report page is a bit cluttered

Bad:

  • Next/back button is a bit clunky
  • No summary while editing

Next time

We'll shine up each concept by stealing the best aspects of the others and decide on a final design then flesh it out with a lot more detail.