Hiking App

University Course

Designing 2
2nd Semester

Tools used

Figma, Illustrator, Photoshop

UX Methods used

  • Sketching and Scribbling
  • Low Fidelity Prototyping
  • High Fidelity Prototyping

Short Description

Designing two icon sets specifically fitting to each target group: For the younger generation, Gen Z, and also one fitting for the older generation of the baby boomer years

01

Research

Generation Z

  • Adolescents and young adults born between 1996 and 2010
  • Grew up with modern technology
  • Lower attention span because of information flood
  • Fresh, modern
  • High affinity for mobile devices

Silver Agers

  • Born between 1946 and 1964
  • Interested in the digital world, but often not really used to it
  • Classic
  • Rather traditional
UI to create:
  • Modern, following new trends
  • Including dark mode
  • Good visual communication & decent UI
  • Make a significant UI
UI to create:
  • Higher color contrast
  • Use familiar metaphors and icons e.g. ‘search’, ‘shopping basket’
  • Not too playful, rather clear design

02

Sketches

First of all, there were several approaches made and styles tried out to display the different navigation icons for the hiking app itself. The focus was on figuring out the symbols that could be used for the different target groups to make the app fitting to their mindset and needs.

02

Gen Z

Glassmorphism was used for this icon set. It is very modern and much liked by Generation Z. Yellow and blue are the colors used here to make it look bright and natural. The shapes used for the icons are rounded which makes them appeal modern and soft. There were abstract geometric shapes used at the bottom to indicate mountains. Furthermore, there is a switch to change between dark and light mode to make the UI customizable.

02

Silver Agers

For the older generation, there was a more classic style using black lines chosen. The icons used here are visually more familiar to silver agers, e.g. the memory card and the compass. To increase the aesthetic aspect of the icons green shapes are placed in the background. The green color represents the ature as well as the line illustration at the bottom.