Canyonlands National Park mobile web application focusing on park accessibility

The Maze in Canyonlands National Park

A Glimpse into the UX/UI process, WARNING!! It’s not linear.

Overview

The selected website for this case study is Canyonlands National Park. To evaluate the ease of usability on the Canyonlands mobile app, I relied on feedback, time, and statistics from monitored user tests. I also used a screen reader to navigate the website to get a better understanding of how difficult it was to access the information with assistive technology. This allowed me to gain a deeper understanding through combining both qualitative and quantitative information to start thinking of possible solutions. Although users were able to eventually find the accessibility information, they continued to struggle with an average of 15 clicks before arriving at the correct page. Using a screen reader delayed the process by 4–5 minutes. Discussions with users after testing revealed that often times, the information seemed to be nested in the incorrect category. It was simply not out in the open enough to create ease of access. With nearly 15% of the global population disabled, this user flow was less than ideal.

Problem statement

Disabled people want to plan their trips to national parks with a clear idea of the amenities and accessibility options provided before they travel so that they can feel prepared, stress free, and safe while in unfamiliar landscapes.

Users and audience

1. Disabled people with either mobile, visual, auditory, or sensory impairment.
2. Caregivers, family members, spouses, or friends of a disabled person looking to plan a trip with efficiency and ease.

Roles and responsibilities

I worked on a team of one for this project. Because of this, I had to rely heavily on artifacts to keep the project on target and scope. I was responsible for the entire process, from start to finish.

Scope and constraints

I chose to keep the scope of this project relatively narrow. I wanted to define a specific user flow for the user story that I had settled on from my qualitative research and preliminary processes. That being said I wanted to focus on the flow of planning an accessible trip and exploring the different locations that you could visit comfortably, as well as the amenities and resources these places had to offer.

The UX/UI Process

User Testing

The first step was to test the current mobile website and good an idea of how long users were taking to find the information related to accessibility. After testing I found the following results:

78% of User’s took longer than 2 minutes to find information about the park’s accessibility

This is obviously less than ideal for someone using assistive technology as the information was even harder to find. When testing the website using a screen reader it took me 5 minutes to find the information due to the way the semantic HTML5 was set up for the website.

It was obvious that this user flow needed some serious attention.

Heuristic Evaluation

I decided the next step to take was a heuristic evaluation of the current website’s structure. I took screenshots of all the pages and marked them up with notes. This was my main takeaway:

The Good:

• The Accessibility information was fairly consistent and had enough detail to give a clear written description of what amenities were provided.

The Bad:

• The information was hard to find in the navigation. It was not intuitive as my user testing had shown in previous step.
• Once the information was accessed it did not have clear visual hierarchy and was difficult to read.
• There was little use of color to contrast different elements

Moodboard

Moodboard for Canyonlands mobile web application

I wanted to start getting inspiration for what kind of mood this mobile web application would take on. I decided to go with natural elements for the mood board that could later inspire the color scheme I would select.

Style Guide

Once I had a mood settled on for the web application, I could proceed with the style guide using my moodboard as a jumping off point and occasional reference when pairing colors.

Style Guide for Canyonlands Mobile Web Application

(AIM)Accessibility Contrast Checker Tool

I needed to check that my lighter colors would be appropriate for people with visual disabilities. I was able to verify and adjust my color shades to contrast in an appropriate way for the style guide to be beautiful and effective.

User Flow

I was then able to use my User flow to begin to guide what pages I would need to design in my sketching process. This helped me keep the project in scope and visualize the flow of pages and the prospective click path.

User flow for project scope.

Crazy 8’s Exercise

After I had the user flow done, I could then start to visualize different screens and how they would appear. I used the Crazy 8’s exercise to rapidly push out ideas so that I didn’t settle on the first ones that came to mind. I was able to pull the best ideas from each frame and incorporate them together for my digital sketches.

Sketching

I love sketching and getting my ideas out in the open. I was able to start to implement my crazy 8’s ideas for content blocking the user flow. I ended up not using all the ideas or adjusting them later on in the wireframe process, but that’s just part of the design process. It helps to eliminate what’s not necessary. Taking many steps helps you look at the work more objectively and on a team of one it is essential to not become too set on one approach or idea.

Digital Sketches 1

Digital Sketches 2

Wireframing

This part was fun because I was able to explore Figma more as I have previously worked with Adobe XD and Sketch more in the past. I was able to make use of the components and create libraries that made sense for my project.

Canyonlands Wireframes

Surface Compositions

Implementing the color scheme was really fun. I felt like it matched the energy of my moodboard and the photos that I was using for the card elements.

Prototyping

Prototyping is one of the best way to start to test your designs. You can get an idea from some testing on surface compositions, but being able to have users use their own device to navigate the app is something else. This time I was able to witness all the users navigating to the accessibility content in under 1 minute.

Figma Embedded Prototype

Outcomes & Lessons

I definitely learned a lot about the importance of research. I think that I went design heavy for this project as it is a skill I would like to grow. I think in the future I would spend more time putting ample research into the preliminary stages so that I could have more information to draw from when in the design process. I found myself referring back to my preliminary artifacts from various stages many time while in design. It’s incredibly important to understand that design is not a linear process and there is many figure 8’s that must be done to arrive at the best product possible for our users.

Next Steps:

1. Create more Iconography for a more visual experience for those with sensory processing issues.
2. Design a searchable accessibility FAQ page
3. Design a contact page module to help users looking for additional information to easily contact the appropriate people.

Sarah Mendez is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Web & App Development. The following article relates to Extra Curricular Exploration and is representative of the skills learned.