hero image

duration

2 weeks

team

Solo Project

tools

Adobe XD, 
Optimal Workshop

my role

UI/UX design

summary

Hiking & navigation app, providing users with trail maps and all the information needed for a safe trip.

One of the most time consuming steps of a shared hike is picking a destination everybody likes.

Users can set (or not) destination preferences and see suggestions for a trip, with essential trip info.
Everybody can choose up to 3 places, and the app will highlight the most liked one.

Getting lost in the nature is easy.

Offline maps areautomatically downloaded to use if there's no signal. Users can see eash other on the map and be sure nobody gets lost along the way.

Make it fun.

At the end of the trip users get infographic where everybody gets a "pseudonym" such as "fast climber", "the explorer", "sleepy buddy", etc. based on their GPS tracking data during the trip. Users can also take photos with AR graphics of the landmarks around.

design process

research

online survey
competitive analysis

ideation

design principles
user journey & flow

ui design

design system
UI & interactions

validation

first click testing

online survey

I made an online questionnaire with advanced and fan hikers, to determine the must have features and examine different users approaches to hiking.

statistics diagram
statistics diagram

competitive analysis

After clearing out all the features, I did a research on mountain navigation apps to see if and how they meet the needs users stated in the questionnaire and other features I added later.

analysis table

design principles

user journey & flow

user journey and flow

1. open the app and login.

2. type desired destinations.

3. invite friends.

4. see results & pick one;

5. see full info.

6. add places nearby.

7. use navigation to get to the trail starting point.

8. use AR navigation to get to the place(s) you choose.

9. inform yourself about surroundings.

design system

The final step, before starting to build the UI is to develop a consistent component library. I use Brad Frost's atomic design methodology and like to add some CSS properties where I feel it's needed, to ease the development process.

typography

UI & interactions

more screens

app screens app screens app screens

validation

I made first click testing to validate some of the main app functionalities, where the users would have a specific goal in mind. Here are the tasks and results:

task 1

You are using a trip app.Invite friends to your trip.

task 2

See more info about this place.

task 3

You can see what's around by added reality. Turn it on.

first click testing results
back to top