Jacob Lindström

Redesigning HoodinFall 2019

After building several critical features Hoodin were eager to improve the user experience. I was leading product design. The project included research to identify and define user problems, exploring and prototyping solutions, and deliver a visual overhaul. As the UI is not fully implemented and not public yet, I cannot share too much of it. This case study will focus on my process to improve the main navigation and the overall product.

  1. 👂 Empathize01
  2. 📌 Define02
  3. 💡 Ideate03
  4. 🛠 Prototype04
  5. 📋 Test05
  6. ⌨️ Development06
  7. 🎯 Outcome07
  8. 🛠 Role & credits08

The final navigation with clear seperation of user and project, improved hierarchy and fewer navigaton links.

👂Empathize

  • ↪️ Overwhelming experience
  • ↪️ Disoriented

From user observations I identified that new users struggled to understand our product after onboarding. Partly because we had added features without identifying the correct context for them.

As I analyzed our interface, talked to users, and analyzed their behavior it was clear we lacked hierarchy. Every page and feature were equal. When you’re working on a product for years the hierarchy might be clear to you working on it, but not the users.

User struggled to know or find where to go. The main navigation covered the entire screen (across all screen sizes) and contained categorized groups of links. There was pretty much links to every page of the product — even terms.

I had created three personas prior the redesign whom reflected our user base. With the insights from my observations I made updates to their goals and pain points accordingly. The personas where used throughout the project and was helpful to keep focus in coming feedback sessions.


📌 Define

  • ↪️ Lack of hierarchy
  • ↪️ User and project intertwined
  • ↪️ Functionality far apart

I defined one of the main problems to be hierarchy (or lack of). The lack of hierarchy led users to feel overwhelmed, our product felt bigger than it was and there was no obvious way forward.

Another issue was that the user and a users project were intertwined — for example it could be hard to tell which settings belonged to my user and which to my project. (A user can have multiple projects).


💡 Ideate

  • ↪️ Design Studio workshop
  • ↪️ Mapping product

Before jumping into any design tools I hosted an internal Design Studio Workshop with almost everyone at the company (~10 persons). I emphasized on the struggles of our personas and set loose constraints to only touch on our core features. The workshop was good for two main reasons:

  • We could kick start ideation with a multidisciplinary perspective and I got ideas to explore and follow up.
  • Buy in. Everyone felt part of the project and was contributing to improving our product — which was important for the feedback sessions to come.

Before designing new user flows I had to go through all pages to label them as keep, merge, or remove, this was collected in something similar to a visual feature map. As a result a rough hierarchy was established here.


🛠 Prototype

  • ↪️ Figma mid-fi prototyping
  • ↪️ Visual style explorations
  • ↪️ Reduce to simplify

I used Figma to develop prototypes and explore various directions. Creating mid-fidelity prototypes in Figma let me rapidly explore multiple directions and get autonomous feedback.

I wanted to test the new hierarchy established during the ideation phase as soon as possible. I quickly prototyped the most important pages (roughly describing their content) and how a user would navigate between them. The progress was presented and discussed during a feedback session before iteration.

🔁 Iterating swiftly and often. 🔁

By using the personas, their context and goals, I worked to improve the most important pages by merging satellite* functionality into the users workflow.

*a feature or function acting on its own.

🔁 Iterating swiftly and often. 🔁

Simultaneously I had iterated on the main navigation. I had decreased the number of links by merging pages or functionality, and moved other links to the correct context (available when the user needs it).

🔁 Iterating swiftly and often. 🔁

When the biggest parts had settled I focused more on visual explorations. I created a typographical scale, was a little bit bolder with color and spacing, and increased legibility.

Throughout the project I had to switch between a holistic view and a detailed view.


📋 Test and evaluation

  • ↪️ Feedback sessions
  • ↪️ User testing

Weekly or biweekly I held “fika” feedback sessions letting anyone critique my work. I set up the sessions around specific parts or problems of the work. By setting these constraints we had detailed and efficient discussions.

After any feedback session I shared a link to the Figma prototype in our Slack channel. This gave everyone a chance to add feedback in writing.

A little less frequently I did user test on potential users to validate key questions. - such as how the navigation worked.

This phase is immensely important to drive the project forward.


Iterate

🔃

⌨️ Development

  • ↪️ HTML & CSS
  • ↪️ JavaScript & Vue.js

I implemented the new main navigation with HTML/CSS and compared with the previous version I made it accessible with more input modes (mouse, keyboard and touch) while keeping JavaScript to a minimum. I dived deeper into Vue, a JavaScript framework similar to React.

🎯 Outcome

  • ↪️ Establishing hierarchy
  • ↪️ Less complexity in navigation

By improving the main navigation we manage to built a clearer hierarchy. A hierarchy helping the user to navigate the entire product.

It’s still to early to tell how this will preform compared to the previous version. I think we will look at churn, support tickets, and if it has any changes in activity or our core features.

We have implemented parts of the project but much remain to design and develop. In terms of design we need to keep iterating to improve our current feature set - making transitions between goals seamless.

Role & credits

I was leading Product Design as the only designer at the company. I facilitated research and feedback sessions as well as implementing parts of the design.

Even though I worked autonomous, it was a team effort. Everyone at Hoodin participated in various workshops and feedback sessions; exploring and discussing everything between holistic concepts to visual details.

✨ Malin ✨ Simon ✨ Sigrid ✨ Andreas ✨ Isac ✨ Marcus ✨ Jakob