Fab iOS app

Navigation redesign - 2015

Intro

In early 2015, while freelancing, I got to work on reconstructing the navigation of Fab’s iOS app. The work I did was highly conceptual and it was all done for and in collaboration with the VP of Product.

Identified problems

  1. There’s little to no hierarchy in the current navigation
  2. Going back is a tedious task as the hamburguer-icon disappears after getting into a funnel
  3. Titles on the top navigation are inconsistent and at times non-existent
  4. The top navigation can get cluttered with many actions; these “overload” and clutter the navigation


Establishing a hierarchy

While going through the sections in the side drawer navigation, I identified 4 main themes/buckets.

One of the biggest changes I argued needed to happen was going from a side drawer navigation to a tab bar navigation. Under the original structure, it was difficult to understand which pages/screens mattered the most. Everything was equally important in the drawer. On the homepage however you could see some visual hierarchy, some sections had more prominence than others. For example, “shopping by category” (furniture, home, gifts, art, etc.) had large circular illustrations. Whereas “mother’s day gifts” had no icons or illustrations, it was placed on top of the screen but had been left subtle and a bit dull on purpose.

I pitched the idea that we could do the same with a tab navigation. We could create screens, like the homepage, and lay out the starting point of different funnels in more meaningful ways, with more structure.

After much ideation and collaboration with stakeholders, I put together ideas for what the tab bar navigation could look like and what these categories would contain. The complexity here was finding the right balance between what the user is interested in seeing and what Fab wanted to highlight/expose to users.

During this process we had defined certain things we wanted or needed to have additionally on the navigation. A “profile” and “saved items” tabs were defined as important, everything else could still be changed.


I had explored concepts of search becoming its own category in the tab-navigation, however search on its own category wouldn’t be sufficient under the current model.

Search was empty, dull and it didn’t appeal to the curiosity of the user. It needed more [I thought], so after some brainstorming and research across the competition I came up with concepts to show how search could fit into the discovery journey.


High fidelity

I was asked to look over the style guide and see if certain improvements could be made to the way components were designed and built. I took a look at what I had done so far and decided to apply some of my learnings to tab bar and top navigation.

I didn’t change the colors, just changed the ratio in which they were being used. I focused more on white, less on gray and red still as the accent color. The other visual change I proposed was switching to a new set of icons, I experimented with FontAwesome on this as they were free and easy to integrate.

The alignment of the logo could change depending on where they were. I showed this by redesigning the homepage.


Conclusion

I put together concepts around navigation which involved every product person at the time. I pitched some new ideas around search and how it should foster discoverability. Lastly, I influenced the brand by establishing a new ratio of colors and icons.

After 2 months, I left Fab. Much of the work I did made its way into the app in the following months.