Parkplanr main image3.png

parkplanr app

Illustrator
UX Designer,
Role
2021
5 months,
Timeline
Nanodegree
Udacity UX Designer,
Certificate
After Effects, Zeplin
Figma, Miro, Procreate,
Tools

About parkplanr

The parkplanr app allows you to quickly and easily plan your next national park adventure. From the Lake District to Snowdonia, discover all 15 of the United Kingdom’s parks in one app. 

The problem & objective

The National Parks UK website (NPUK) contains limited information about the 15 parks and what they offer. Travelers use alternative products to plan their trip; these websites are difficult to navigate and contain many portals of dense information. The experience is time-consuming and lacks visual excitement.

Redesign the NPUK platform by highlighting essential content, adding incentive for users to explore, and creating a visual identity that would inspire adventures. 

National Parks UK website

Discover the parks

Each park is unique in what they offer. Get relevant content based on your interests and discover trails, local activities, events & more.

Find your next adventure

Smart search filters help you find the adventure you want. Book and buy a ticket in just a few simple steps. 

Browse & save for later

From trending tours to hidden gems, browse your next activity and save the ones that you love to your favorites.

Enter the park & collect a badge

Earn a badge when you enter a park and celebrate each milestone with a surprise. 

Parkplanr target user

Our target users

Domestic travelers who visit the UK’s national parks every year for leisure and recreation. They’re adventurous collectors and nature-lovers of all ages that enjoy discovering new places.

Why badges?

Badges date back to 1894, given to US Park Scouts to protect parks from illegal poaching. Badges are a way to gamify the experience; collecting all 15 provides incentive for users to explore and can increase app engagement and user retention.

Why badges_.jpg
Parkplanr app screens

Design process overview

The first step of my design process involved user interviews and research to understand how competitors and users behave. I conducted qualitative research to discover how domestic travelers use digital products to plan a trip to a national park, focusing on their needs, goals, and current paint points. After analyzing user insights I sent out a survey to test if these key findings applied to the larger population. I began to conceptualize the solution through affinity mapping, feature ideation, prioritization matrix, and sketching. I created low-fidelity wireframes and conducted usability testing; mapping three modularized user task flows to identify areas of improvement. 

 

Following design iterations I developed high-fidelity wireframes and a clickable prototype, considering principles such as hierarchy, consistency, and discoverability. I built a UI style guide and components library to ensure design consistency across navigation, buttons, cards, fonts, colors, and layout. The accessibility of the UI was examined and improved. Usability testing was performed to gather user feedback and test metrics from the HEART framework. Based on data, the design was optimized to increase conversions and user engagement, then validated and prepared for hand-off.

Parkplanr app design process
Market research chart

User interviews

I interviewed 5 participants that reside in the UK and have visited a national park within the last 6 months. Data was transcribed to Miro and organized into taxonomies to help identify user patterns and common issues.

  • Plan travel easily and quickly

  • Seeking an adventure, explore new places

  • Content backed by user reviews

  • Save discoveries for later

Core needs

  • Having to check many websites

  • Limited filtering options

  • Dated interfaces, not interactive or exciting

  • Lack of relevant, up-to-date information

Current pain points

User interviews

Key insights

60%

of users said the UK's national parks websites are dated and lack 

relevant information.

60%

of users said they spend 2+ hours researching for their upcoming trip.

80%

of users said they want to save park activities and attractions to easily revisit later.

80%

of users said they do not want to navigate through multiple websites to find desired content.

100%

of users said they visit the UK's national parks to go walking or hiking.

Concept development

I created 30 self-contained ideas mapped from the research findings. Using the feature prioritization matrix value vs complexity quadrants, the ideas were positioned based on the value they offer to the user and the complexity involved in completing them. 

Parkplanr app feature prioritization matrix

Chosen features & sketching

3

2

1

4

Content hierarchy

Provide relevant content based on user interests, with clear visual hierarchy. Streamline navigation and apply smart search filtering to save the user valuable time.

Favorite items

This feature is common across competitors and highly valuable to the user. Qualitative data shows 60% of users want to favorite and save discoveries.

Advanced trail maps

Qualitative data shows 100% of travelers go hiking at national parks. Provide interactive,

up-to-date maps with a highly visual user interface.

Gamification

Key differentiator from competition. Unlock and collect badges for each park visited. Encourages exploration and increases long-term engagement within the app.

Parkplanr app - user interests
Parkplanr app - search
Parkplanr app - activity
Parkplanr app - badges
Parkplanr app - maps
Parkplanr app - favorites

12 sketches of app features

Onboarding View.jpg
Main View.jpg
park.jpg
Badges View.jpg
pop-up.jpg
Favorites View.jpg

25 low-fidelity wireframes created in Figma

Wireframe usability testing

After refining the low-fidelity prototype, I conducted a usability study to gain insights on friction points of 3 task flows:

  1. Register user account

  2. Browse & save park of interest

  3. Check notification and see earned badge

User task flows

User testing insights

Distinguish key 'interests'

Improve the signing up process, consider adding more suggested interest categories, this will allow the app to provide suitable recommendations relevant to the user.

Improve app navigation

Redesign the home screen navigation by country: England, Scotland, and Wales.

Add category navigation to the park search screen; organize content by activity type.

Park history was ranked as least important information.

A diverse range of information about the park was necessary to cater towards different interests. Surfacing information like scenic trails, relevant events, and recommendations are more personally tailored than historical information of the park.

Inspiration board

Trending travel app design styles include bright colors and gradient overlays, sans-serif fonts, rounded cards, soft shadows, and full-screen hero images. Design inspiration collected helped influence and define the visual style of the parkplanr interface.

Inspiration board

50+ wireframes

I began to up-level the UI, creating 50+

high-fidelity wireframes, defining colors, fonts, icons, buttons, imagery and interactions.

  • White foreground on green background

  • Light gray foreground on white background

Accessibility testing

WebAIM's color contrast checker detected that the high-fidelity prototype was not accessible for people with disabilities. 

Accessibility test before
Accessibility test after

Improving the UI

Throughout the parkplanr interface I have improved visual accessibility by using larger font sizes and increasing the contrast between background and foreground colors, which helped make the text more legible.

Branding the experience

With the motifs of "celebration, collection, and exploration" in the parkplanr interface branding, the visual style is uplifting and inviting. Colors green and purple symbolize the fields of heather native to the moors. Quiet scenic photography avoids overshadowing the badge illustrations. I created a component library that consists of all the styles and components used in the app, including buttons, input fields, a UI kit and more.

Parkplanr brand guide
parkplanr badge.png
parkplanr-01.png

Logo

The parkplanr logo is created with the same organic hand-drawn stroke used in the badge illustrations. Negative space gives the illusion of a tree emerging from the letter 'p'. 

Illustrating 15 badges

I explored various illustration styles and found that a hand-crafted stroke encompasses authenticity and captures the natural organic aesthetic of national parks. 

15 Badges (5x3)-01.png

Wireframe usability testing

I used Lookback.io to test my high-fidelity prototype on 10 users.

+ Elements of success

  1. Color combination is good, nice modern style.

  2. Navigation is easy to understand and use.

  3. Good use of content categories, saves time.

  1. Onboarding should be clearer, improve language and visuals to explain main app features.

  2. Add activity information and user ratings to the booking screen.

- Areas of improvement

Onboarding

Providing a better onboarding experience for new users will improve app engagement and user happiness. Refined design includes:

✓ 4 onboarding screens

✓ Explanation on app features

✓ Explanation on badge collection

✓ Engaging photography

Onboarding screens2.jpg

Booking screen

Adding social proof and more information to the activity booking page will increase the number of complete bookings. Refined design includes:

✓ Information on location and pricing

✓ User photos

✓ User reviews and ratings

✓ Check availability feature