Hansel: A Travel Blogging App

I discovered my love for UX during my stint as an Art Director

With ten years of design already under my belt, I enrolled in General Assembly’s certificate course, and ventured into the world of UX. Call it a mid-life crisis, but I like to think it’s my drive to learn.

I began working on The Hansel Project during this time, and continue to refine it today.


Click below for an overview of my process and, view my prototype:

  1. User Research
  2. Market Research
  3. User Persona & Flows
  4. Wire-framing
  5. Usability Testing
  6. Next Steps…
  7. Prototype

Affinity Mapping

My User Research goal is to find out travel journaling habits amongst avid travelers – why they use what they use and how they use it.

Using Miro, I organized data collected from 5 user interviews.


Competitor Analysis

It became clear who my competition is, and, which features I would need to prioritize if I’m going to give them a run for their money.


Persona & Flows

This led me to my user persona, Rowland Stone: an avid traveller scouring the earth for his next big business venture. A true rolling stone in need of a no-fuss, digitized travel journal so he can share experiences with friends & family back home.

I then ran a task analysis on the 3 must-have features: Location Tracking, Journalling and Sharing and created user flows for the app I was still just envisioning.


Wireframes

Following some sketches, I put together a wireframe (Figma) – my visual reference for building a prototype.


Usability Testing

During usability testing, I was able to identify key areas of improvement in the initial UI. After one more round of moderated testing, I discovered users now encountered an entirely different set of problems.

It was time to bring out the big guns. Using Maze, I had an in-depth view of user frustrations.

I paired qualitative data (user heat-maps and feedback) with quantitative data (success rates, misclick rates, average time and usability scores).


Next Steps…

Solution Sketch:

My last Usability Test went almost flawlessly. However, I need to factor in the 3-click rule per User Research – back to the ol’ drawing board!

Key Takeaways:
  • User interpretations of iconography can vary – labeling CTA’s is crucial
  • Users want things NOW – shorter paths ensure better retention rates
  • Keep CTA language concise
Design:

The Art Director in me couldn’t resist!

I put together a style guide that doubles as an Component Library for use as I continue adding pages to my prototype.