Capitol Reef Field Station App - UX/UI Design

HomeCapitol Reef Field Station App

01 Project Overview

The Capitol Reef Field Station (CRFS) was a client as part of a year-long senior capstone project at Utah Valley University (UVU). CRFS is the property of the National Park Service but is operated under the direction of UVU. CRFS is only accessible to students and faculty from institutions of higher learning and offers engaged learning, research, scholarly/creative activities, and environmental ethics.

Conservation influences every aspect of the field station including the design of the facility to the way classes are conducted. Visitors are immediately introduced in their orientation to key concepts in conservation and sustainability. They are also informed of their water usage during and at the end of their visit, helping them remain aware of the precious resource during their stay. Additionally, prior to departure, visitors are informed of their total garbage production, which allows for further discussion of sustainability with respect to waste reduction and recycling. In particular, CRFS seeks to have a lasting impression on visitors that will impact their lives well beyond the time they spent there.

PROBLEM

The CRFS site manager is responsible for educating and informing each new visitor of the field station conservation and sustainability guidelines. She needed a resource to assist her in informing and educating visitors of these guidelines.

OBJECTIVES:
  1. To create an app that will teach students and faculty visitors about the Field Station, sustainability, and conservation.
  2. To create an app that will educate visitors about Capitol Reef geography and history.
ROLE

Graphic Design. Designed and created all visual documentation including Project Proposal, Design Document, Final Report. I also contributed to the user interface design creating wire-frames, and interactive mock-ups via InVision.

02 Design Process

Our Process

We applied the following design process:

1. Strategy

Personas Experience Map

2. Scope

Features Constraints

3. Design

Sketches Wireframes

4. Prototype

High Fidelity Wireframes

5. Validate

Usability Tests Lessons Learned

03 Strategy

UNDERSTANDING THE USER – PERSONA

What kind of user will use this app?

Primary motivations of the user:

  1. To create an app that will teach students and faculty visitors about the Field Station, sustainability, and conservation.
  2. To create an app that will educate visitors about Capitol Reef geography and history.

Primary motivations of the user:

  1. I need a research tool that will help me plan a memorable and educational trip to park and Field Station for my class.

04 Scope

Features

After gaining a better understanding of our users we came up with a list of features for the app based on the needs and wants of our persona’s. Each feature was implemented for use by a student or a faculty member.

Conservation Analysis / Water Tracker

This feature allows students to track their water usage helping them be more conscious about their use. This awareness helps the site manager make a significant impression on the importance of conservation.

QR Code Reader

Scan a QR code that will open a page about the technology regarding sustainability or conservation within the app. This feature allows students and faculty to learn about the various conservation technologies implemented at the Field Station without the site manager having to explain them repeatedly.

Map & Touring

A map within the park detailing popular landmarks and hikes. This feature allows the faculty and students to plan activities before and during their stay at the Field Station without assistance from the site manager.

05 Design

WIREFRAMES

Color

Colors were a challenge in this project. We wanted the app to represent UVU and Capitol Reef but also wanted to use colors that would not take away from the app. First, we tried some different options in green to match the primary UVU color. But, after implementing it in the design we decided against it. After trying several other options, we decided to use blue as the primary color, because it is an earthy tone and contrasts well with the red rocks that make up Capitol Reef. To make the app look professional, modern, and clean, we decided to use blue in a monochrome color palette and use a light grey as the accent color.

Color Guide:

#2A394C #203147 #394A60 #46586F #AEAEAE #7A9A92 #8A87A4

06 PROTOTYPING

MOCKUPS

Our designs were built in Sketch and our prototype was created using Invision. Invision allowed all team members to have access to the prototype as well as the individual screens, which was important for collaborating within our group.
As stated above in “04 Features”, there were four specific needs that needed to be met. In the early stages of the app prototype, those four categories were Visitors Info (hikes, points of interest, and 360 tours), GPS (Map), Conservation Analysis, and QR Code Reader. These functions of the app were made into buttons on the home screen of the app to allow quick access.

07 VALIDATING

USABILITY TEST

After our app prototype was built in Invision, we first began testing it within our project group. Each group member was assigned different testing scenarios and asked to notate the feedback and results within the prototype, so the design and development teams could make necessary improvements.
After the app was developed for use on a mobile device further user testing consisted of selecting individuals, male and female, whose ages range from 22 to 54. The selected users were given a device with the app and a user survey with questions and tasks related to the usability of the app.

View User Survey

USABILITY TEST SUMMARY

Water Tracking Teams

Most people, especially the students, didn’t like the idea of joining teams and having competitions within the water meter. The teams and competition aspect of the app were not removed though. We determined that when a user was visiting the Field Station, they might like it.

         

Removal of Excess Pages

Users often got confused about where they were when they got a few pages down in the navigation. This eventually led to the removal of unnecessary pages in the conservation section of the app.

          

QR Code Reader

When asked about the QR code reader user’s said they wouldn’t use it or didn’t like it. This eventually led to the complete removal of the QR code reader and we replaced it with a simple list of the sustainability technologies.

          

Larger Touch Areas

Users had a difficult time pressing the navigational back and menu buttons. As a result of this difficulty, larger touch areas were added to navigational items.

    

“TOUR” BUTTON

One of the most commonly mentioned was the ‘tour’ button. Most of the users didn’t associate that word with its action. Several suggested ‘visit’, ‘view’, or ‘explore’. We eventually modified the main menu and sub-menu items to ‘explore’, ‘points of interest’, and ‘hikes’.

          

08 SUMMARY

WHAT WE LEARNED

Design – We learned the importance of creating a design that works with both Android and iOS, and coordinating capabilities and designs with web development technologies.
Project Management – We learned how easy it is for scope creep to delay a project and increase the budget. We also learned that many parts of the project took longer than we typically expected and that it is important to allow sufficient time for unforeseen restrictions.
Schedule – When looking at our projected schedule compared to the time things actually took, we realize we had a lot of room for improvement. While we stayed on schedule during the planning phases, we underestimated how much time the development phases would take, and would be more gracious with our time in the future.

See Design Document