National Parks Service ReDesign
1
2
Discovery
3
Through user testing we discovered that most users reported that the information on the page does not flow well and it does not prioritize the right information. Based on these user tests, we then created a user persona. We developed a proto persona to best target the desired market.
4
Project Overview
THE PROBLEM: �The information on the page does not flow cohesively and does not prioritize the main reasons users want to visit the site.
THE SOLUTION: �Redesign website to provide users with a seamless and intuitive navigation process.
MY ROLE: UI Designer
TOOLS: Miro, Figma, Invision, and Canva
5
Problem Statement
We found that the information on the page does not flow cohesively and does not prioritize the main reasons users want to visit the site.
We have observed that the information on the current National Parks Service webpage does not display the most pertinent information that visitors are searching for in the best logical sequence when scrolling.
6
7
8
User Persona (Iteration 1)
When making decisions about who our user persona would be, we based the details off of user tests that we conducted. We discovered during the user tests that users often had the same pain points and needs/wants. We used this feedback to create a user persona so we can target that demographic directly.
9
Branding
Hex # 81AFC9
10
11
Annotations |
|
Website Analysis
12
Website Analysis Continued
Annotations |
|
13
Website Analysis Continued
User Tests
14
In order to determine the strength and weaknesses of the National Park Services webpage, we tested five users to find the positives as well as the pain points.
We asked out testers to select a trip and try to find out more about planning a visit. We found that users thought the page had an overwhelming amount of information and that navigation and finding what they needed could be confusing to some.
Moving forward, we used this information to create a SWOT analysis and did card sorting.
15
SWOT Analysis
16
Mood Board
To determine our color scheme to redesign the NPS webpage we researched and gathered many different color palettes, patterns, fonts, and photos we felt would be appealing and a good fit for the NPS site.
17
18
Heuristic Analysis of NPS Navigation
To ensure that users could easily find the information they wanted, we did a heuristic analysis of the NPS navigation. We found that even though there were definitely instances where NPS performed very well, there were several more where they underperformed or did not meet up to current widely accepted standards.
19
To create a more user friendly experience for the National Park Services app, we conducted user tests to find the positives as well as the pain points of the existing app. We then used this information when redesigning to make the app easier to navigate.
User Tests
20
Card Sorting
We used card sorting to evaluate and better arrange the NPS websites IA/navigation. We listed all of the main page links, color coded them by their current section, and categorized and grouped them in a way that felt organized and easier to navigate through, creating a clear and easy to read structure.
21
Categorizing
We discussed and decided on several categories that we felt all of the links could be organized into.
Our group also noted that the hierarchy of the website was not ideal. We established a hierarchy that we felt was better suited to the needs of people visiting the NPS website.
Structure
22
This is the final iteration of our card sorting/categorizing before we built it into a site map.
23
Sitemap
Sitemaps help to organize and communicate information to ensure it is clear and easy to navigate. We redesigned the sitemap for the NPS site to prioritize most searched information and to make the flow more user friendly.
24
Homepage Prototype
After analyzing our user testing of the NPS site navigation, we discovered that all people we tested struggled with similar things while attempting to complete a task. So when redesigning we made those tasks as simple and user friendly as possible.
25
NPS Navigation Iteration 1
26
27
UI Style Guide
As a group, we researched and developed a style tile to ensure that our redesign had a cohesive look and was consistent throughout the NPS website.
28
Desktop Header & Footer
Mobile Header & Footer
Web Page Wireframe Iteration 1
29
Web Page Wireframes Iterations 2
30
Web Page Wireframe Iteration 2 Cont.
31
32
Mobile Prototype Iteration 1
33
Mobile Prototype Iteration 2
5 Second User Tests
To get feedback, we as a group, we performed a 5 second user test on two different people. The users will look at the homescreen for 5 seconds and then answer questions about their first impression. We then took this information from the tests and iterated our prototypes to accommodate the users feedback.
34
User Insights
35
Affinity Diagram
36
37
Mobile & Web Page Prototypes Iteration 3
Changed social media resources layout from vertical to horizontal
Added current articles and resources relevant to users’ needs and interests
Created a larger footer space to accommodate more content
Larger space bar
Header lists items of importance based on user experience
Horizontal scrolling to include more content in body
Larger space bar for ease of use through mobile website
Clickable Web Page Prototype
38
Figma File
Clickable Mobile Page Prototype
39
40
UI Style Guide
41
Usability Research Plan
42
Research Objectives:
As a group, we interviewed 7 people to understand the user’s thoughts and pain points of our redesign of the NPS webpage and app.
Participants:
Research Questions:
Goals:
We are conducting user tests in order to receive feedback and find any pain points in the prototypes to create the most user friendly version .
User Testing Plan
43
Desktop Task
Mobile Task
We used the feedback from these user tests to make edits and iterate our final prototype. With this feedback we intend to make the web page and mobile as user friendly as possible.
Hi-Fi Webpage Prototypes
44
Web Page Clickable Prototype
45
Hi-Fi Mobile Prototype Iteration 4
46
Final Hi-Fi Mobile Prototype (Iteration 5)
47
Mobile Clickable Prototype
48
Additional Web Page Prototype Pages
49
Based on user feedback we created a passport element on the web page and mobile. Every time you visit a new park you will be awarded a badge for that park. Your progress to visiting all of the National Parks will be shown at the bottom of the page.
Additional Web Page Prototype Pages
50
Additional Mobile Prototype Pages
51
Additional Mobile Prototype Pages
52
Additional Mobile Prototype Pages
53
Final Thoughts
54
Our goal was to redesign the National Park Services website to provide users with a seamless and intuitive navigation process throughout the whole site. We accomplished this as a team in a 3 week period. Our next steps would be to continue to work on the passport feature of the national parks where users can collect badges from the parks they have visited.