Parks Canada Redesign
UI / UX
This project is a redesign of a specific task flow in the Parks Canada - National App based on a heuristic evaluation of that task flow. Changes were only made based on the usability issues found through the heuristic evaluation, and kept as minimal as possible to stay on brand.
The heuristic evaluation focused on one specific task flow, opening the app for the first time and purchasing a Discovery Pass to gain admission to the parks. This is a crucial task as the app is designed to be a digital companion for people that are visiting the parks. It was important that any changes made responded directly to a heuristic usability issue discovered during the evaluation. The purpose was not to redesign the application based on personal preference but on objective usability issues identified using the Neilson Norman Group's 10 Usability Heuristics.
Task Flow Overview
This diagram illustrates an overview of the existing task flow for purchasing a Discovery Pass. There is a point during the task flow where the person trying to purchase a pass is taken out of the app to the Parks Canada website to complete the purchase. As this evaluation is focused on the iOS app experience I only focused the evaluation and redesign proposal on screens 01 to 05.
Heuristic Findings Overview
Tap through the slider to see each usability issue explained in more detail in respect to the heuristic principle they relate to. The usability issues found span 5 of the 10 heuristic principles, the image above shows an overview of all the issues found.
Match Between the System + Real World
Heuristic 01
04
Icons are ambiguous and do not clearly convey the content they are associated with.
11
Hero Image comes after the copy — this breaks with convention within the app as well as the website. This also goes against a convention that users are accustomed to from other apps and websites.
16
Misleading title — "My Discovery Pass" does not show you any information about your own personal Discovery Pass but leads you to a screen that explains what a discovery pass does.
User Control + Freedom
Heuristic 02
10
To order a Discovery Pass the user is taken out of the app to an external website — the only way back into the app is to close their browser application and re-open the Parks Canada app.
The app does not offer the users’ the autonomy to actually complete an order in the app.
Consistency + Standards
Heuristic 03
01
The option for English is a different colour (green) which makes it seem like it is already selected and can be confusing.
02
Top banner colour changes from black to green. It is different from the colours on the website for Parks Canada.
03
All options have an icon and description except for the take photo option. Making the assumption that the users will know what to do.
06
Icon for “My adventure list” and “My Parks Canada” is the same which can cause confusion for users.
15
Most options are written in title case however there are three options on Screen 04 that break from this standard.
Recognition Rather than Recall
Heuristic 04
08
Suggested to see map for applicable locations but does not refer to which map this information is on or provide users the affordance to get to that map.
09
Suggested to call a phone number or visit the website but does not offer the affordance to interact with these elements — users have to remember the information and open an external app to use it.
10
Users press this to order a Discovery Pass but are taken to a website where they again have to find and choose Discovery Pass before they can finally proceed to make their order online.
Aesthetics + Minimalist Design
Heuristic 05
05
Font weight is too thin which creates legibility issues when combined with a busy background.
07
Copy lacks clear typographic hierarchy.
12
Copy, icons and background fills are all slightly transparent on very visually busy background images which distracts from the content that is being communicated.
13
Font size varies between the two elements in this modal. There are only two options and they are at the same level of importance so they should be treated the same.
14
Font colour changes between Screen 01 and Screen 02 — it should be consistent through out the app.
Design Constraints
Visuals
- Brand elements must stay consistent and in-line with brand guidelines.
- Typography must stay consistent.
- Parks Canada uses Helvetica Neue LT.
- The Federal Government Identity is set in Helvetica.
- Logos must be maintained.
- The position of certain brand elements cannot be altered.
Information Architecture
- Pages must still link to each other + access to all currently available pages needs to be maintained through the redesign.
Language
- Pages must retain their page names.
- All copy must be maintained — it can be broken up for clarity but cannot be altered in terms of content.
- Must retain English and French on screens that show both.
- Must retain option to change between languages (English — French).
Resources
Language Selection
solutions
Consistency + Standards
01
Make both the buttons the same colour in their initial state, utilize the green colour when an option is selected to give visual confirmation of the choice made.
02
The banner on this initial screen is a result of the Federal Identity Program guidelines. To ensure consistency between this screen and the next we can introduce the UI colours in the inactive and active button states.
Home Screen
solutions
Consistency + Standards
03
To ensure users know what the camera icon means I have chosen to make that option consistent with the others by adding a label with the icon.
Match Between the System + Real World
04
Attempted to select icons that better communicate the function of each option.
Aesthetics + Minimalist Design
05
To ensure optimal legibility a solid background was used, the font was made larger and the weight of the font was increased from a thin to a book weight.
14
The font was set in a consistent style across all the redesigned screens to ensure that the colours, weight and size did not vary.
Home Screen Modal
solutions
Aesthetics + Minimalist Design
13
The modal was tightened up and the fonts were made consistent across all options on it.
My Parks Canada
solutions
Consistency + Standards
06
I have chosen to pick new unique icons for every option so that users are no longer confused by the icons and can use them to quickly visually identify where to tap.
15
Corrected the copy so that all the titles for each option are consistent across the task flow.
Aesthetics + Minimalist Design
12
The translucency was removed from the app so, all fills are solid and there are hero images used instead of full screen background images as in the existing version.
Match Between the System + Real World
16
Changed the title by removing the “My” to ensure that people are not confused by the title.
Discovery Pass
solutions
Aesthetics + Minimalist Design
07
Typographic hierarchy was added through varying font weights to show the most important information first. Spacing was used to group similar information into more digestible chunks and colour was used to indicate interactivity.
Recognition Rather than Recall
08
Made a visual distinction between the words “See map” in the sentence so that users understand that they have the ability to tap there and the map will open for them.
09
Made a visual distinction between the phone number and words “Parks Canada Website” to signal to users that these elements are interactive. Copy was also adjusted to create more informational hierarchy to ensure this was clear.
10
Proposed solution would be to keep the link, make it more prominent as a button and adjust the hyperlink so that it links directly to the order page, instead of the intermediate page.
Though this would be a stop gap until a system for ordering can be integrated into the app.
User Control + Freedom
10
The solution here would be to create a new set of screens that handles the processing of information to allow people to buy a Discovery Pass through the app. We did not address the website components yet and plan to address that in our next steps.
Match Between the System + Real World
11
The hero image was moved above the copy and we used an image from the website that has the passes positioned differently to fit a smaller aspect ratio.
Interaction Prototype
A prototype video to showcase how the interactive elements of the redesign would function. It is important that these interactions stayed in-tune with the heuristic solutions identified during the design process.