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.
_PNG.png)
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.
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.
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.
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
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.
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.
.jpg)
12 sketches of app features
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:
-
Register user account
-
Browse & save park of interest
-
Check notification and see earned badge
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.
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.
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.
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.
-01.png)
Wireframe usability testing
I used Lookback.io to test my high-fidelity prototype on 10 users.
+ Elements of success
-
Color combination is good, nice modern style.
-
Navigation is easy to understand and use.
-
Good use of content categories, saves time.
-
Onboarding should be clearer, improve language and visuals to explain main app features.
-
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
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
