E V A  M A R I A  H A M A C H E R

U X  / U I  D e s i g n e r i n  /  I l l u s t r a t o r i n

UX / UI DESIGN
KIDS ADVENTURE PLANNER APP

 K I D S  A D V E N T U R E  P L A N N E R  A P P

Inhalte von Vimeo werden aufgrund deiner aktuellen Cookie-Einstellungen nicht angezeigt. Klicke auf “Zustimmen & anzeigen”, um zuzustimmen, dass die erforderlichen Daten an Vimeo weitergeleitet werden, und den Inhalt anzusehen. Mehr dazu erfährst du in unserer Datenschutz. Du kannst deine Zustimmung jederzeit widerrufen. Gehe dazu einfach in deine eigenen Cookie-Einstellungen.

Zustimmen & anzeigen

A B O U T  T H E  P R O J E C T

My UX/UI case study documents the processes involved in designing a real route planner app. My goal is to come up with an intuitive child-friendly plan- and navigation application for mobile devices that is smart to use and intuitive to understand for everybody. 

Overview

The aim of the Kid Adventure Planner app is to provide information about several region and its excursion destinations and experience highlights with the help of the user content and the operator system and to provide easy routes/tours and navigation for groups or families with children to plan in a User-Centered Design Process and tailor-made way of design.
The app is also designed for the digital participation by children from the age of 5 years.  Children in particular should get access to mobile application through playful participation in creating tours in order to experience success

in using smart and intuitive technology.

Problem Statement

Groups and families with children need a simple solution for planning and navigation outdoor adventures, excursions with tips and tricks, suggestions and reliable directions that focus on taking into account the weather conditions

and the fitness level of the participants.

Purpose & Context

This project was completed as part of CareerFoundry's UX Design certification program.

We were asked to create a web app with
Mobile-First approach that enables anyone

to instantly find a new route or destination that individually suits and connect outdoor lovers.

Tools

Adobe XD
Adobe Photoshop
Adobe Illustrator
Sketch
Figma
SVGator

Balsamiq
Optimal Sort
Google Forms

T H E  P R O C E S S

Working with Double Diamond strategy as the Human-Centered Design Process  to research, design and implement as the process base to get into the mindset of a 
UX designer. 

M Y  P R O C E S S  S T E P S

DISCOVER

The design Thinking Process began with the user research that enabled me to understand how potential users think when they plan a tour, what their barriers, their needs and frustrations are.

DEFINE

With the analysis results of the performed search und analyzing users needs and their frustrations I moved to create different insights to help me in defining the User Persona and their pain points.

DEVELOP

With the knowledge of the User Persona perspectives, problems and pain points I started to implement into
the Information Architecture of the app and design sprints.

DELIVER

The last step was to develop a digital prototype based on the previous search results which I have conducted in iteration cycles and user testing to refine the design. 

D I S C O V E R 


Competitor Analysis


By conducting an extensive competitor analysis, I audited information structure, content, layout, tone and navigation.


User Research


With the two methods of user research: user interviews and user surveys (created with SurveyMonkey), I learned how to define my research objects and analyzing important findings and documenting them by using the affinity map.

 


D E F I N E

User Persona // Mental Models // User Journey

Through my user research and analysis, I created user personas and user journey maps as well as conducting a thorough 
task analysis for my project with an actionable mobile strategy.  


D E V E L O P

Site-Map

After I conducted the user research and frameworks, I started to set the plan and blueprints for the mobile app with the results of the card sorting method - survey (by using Optimal Source) to reflect the information architecture pattern by laying out the page hierarchy to determine the way users can use to navigate to all pages and subpages. 

  


Low - Fidelity Wireframes // Mid-Fidelity Wireframes // Design Pattern

Based on a successfully illustration of the technical articulation of product information architecture low- and mid-fidelity prototype for mobile and desktop devices as well as first steps of design pattern screens.


D E L I V E R

Usability Testing

At this stage I conducted usability testing for both mobile and desktop working with test subjects, analyzing 
test results with the affinity test method, making improvements 
and planning future tests.

Goal  

Created with Sketch.

The goal was to understand the efficiency, learnability and satisfaction of the app for first time users. I wanted to investigate if users understand the navigation and selecting process and the apps core features. 

Methodolgy

Created with Sketch.

Remote moderated usability test via desktop Zoom-, Skype- or Facetime video calls enables users to additionally use a smartphone with the interactive prototype. It is also possible for me as interviewer to record the session if the test person allows it advance.

Participants

Created with Sketch.

Six people are tested. They differ in their leisure time activities and in the use of digital information sources and media. Two of them will be children of different ages.

Test Objectives  

Created with Sketch.
  1. Please open the app. Find your current location on the map.
  2. Search for destinations starting from your desired location.
  3. Find destination points that exactly match with your group. Select and filter all you preferences of participants, experience and move.
  4. Look at the results on the map and set start and destination points for your tour.
  5. Change done filter selections.
  6. Save your created tour and start navigation.
  7. Go to the existing kids profile and see the news of feed of other young users.
  8. Complete your information data in your profile.

Evaluation

Created with Sketch.

Success rate method by Jakob Nielson Scale:


 0.   Not a usability problem

  1. Cosmetic problem: need not be fixed unless the time is available
  2. Minor problem: fixing this should be a low priority
  3. Major problem: important to fix and should be a high priority
  4. Usability catastrophe: imperative to fix before release

Design Language System

After finishing the final usability testing I started exploring foundations of visual design and responsive frameworks with an accessible design language system for dev handoff.


High - Fidelity Prototype

Compiling all design iterations and making final fixes to the design I finally have the polished high-fidelity and clickable Prototype (by using Adobe XD).

C O N T A C T

Deutschland

Ich habe die Datenschutzerklärung zur Kenntnis genommen und erkläre mich damit einverstanden.