Persona, User Stories, and Requirements Image
User Workflow Image
Wireframes and Rapid Prototype Image
Usability Testing Image
A/B Testing Image
Hi-Fidelity Design and Prototype Image

CAIC

Mobile App Enhancements

A personal passion project completed with the intent of proposing it to a non profit organization for consideration.

The Colorado Avalanche Information Center (CAIC) website and mobile app provide constantly updated backcountry avalanche forecasts for thousands of backcountry skiers, snowboarders, snowmobilers, and snowshoers in Colorado. This avalanche forecast is created and released by CAIC staff members who venture into the backcountry every morning and assess the potential avalanche risk in their particular zone. The CAIC website not only includes the staff-created avalanche forecast, but also includes non-staff (user) submitted field observations, including avalanche activity. As of the fall of 2019, the mobile app only provided access to the staff-created avalanche forecasts. I started a personal passion project designing enhancements that would enable an app user to view user submitted avalanche observations as well as submit a field observation, thereby creating feature parity with the website.

caic-persona-user-stories-and-requirements

Persona, User Stories, and Requirements

As a first step for this project, I worked on the backstory for the use case by creating a user persona, user stories, and requirements for the features I wished to implement. While acknowledging there could be different users who diverged in two categories (level of tech savviness, and their level of avalanche safety knowledge) I settled on a persona that I felt strongly would cover the majority of users.

I crafted a few user stories and the requirements for each based on the website features being emulated. To ensure the proposed feature stories and requirements were complete, I engaged with a few backcountry skier friends to review them for missing components and offer suggestions for improvement. Once refined, I made sure everything was documented and marched forward.

Download the Persona, User Stories, and Requirements Doc (53KB)

caic-user-workflow

User Workflow

With the user stories and requirements as a guide, I created a quick user workflow in Balsamiq to help visualize what screens would need to be designed and wireframed. Again I engaged with friends as a gut-check to make sure I hadn't left anything out. Deciding to utilize a more robust tool to visualize the diagram, I re-created the workflows in Sketch which incorporated the feedback I'd gathered and a slightly more sophisticated workflow. Since the proposed features were extension of the current app, I included the existing functionality in the diagram.

Download the User Workflows Doc (33KB)

caic-wireframes-and-rapid-prototype

Wireframes and Rapid Prototype

Using Sketch I quickly put together simple wireframes to show how the proposed features would work. The existing functionality of the app was simulated using screen captures, as it was important to incorporate how the new features would be discovered in the context of the current app. To bring it all together, I used InVision to create a clickable prototype of all of these screens in accordance with my proposed user workflow.

caic-usability-testing

Usability Testing

User research and usability testing are aspects of the UX/Product Design process that I admittedly did not have as much experience with at the beginning of this project. By this point, I had already begun to see the power of user research, and was keen on seeing how usability testing could influence the direction of my proposed features. I conducted both scripted and unscripted usability tests with multiple people, several of whom were backcountry skiers and familiar with the app.

The primary point of entry to the app (a map of Colorado showing avalanche forecast regions) was not changed to accommodate the new proposed features, I simply provided an item in the existing hamburger menu to access them. During my user tests, it became apparent that the existing primary entry point was confusing and did not provide a clear path to view the avalanche forecast, much less the newly proposed features. This prompted me to change my strategy from simply adding the ability to view and submit user observations, to also re-thinking the primary navigation of the app and to provide an easier workflow to all the information the users desired.

Fortunately, my usability tests proved out that the proposed new functionality was useful and straightforward to use, once it was discovered.

caic-a-b-testing

A/B Testing

The usability testing had shown me a fairly significant pain-point for users, that being a lack of clarity in discovering the avalanche forecasts and other features. The map interface wasn't intuitive to the users in my test, and the hamburger menu wasn't obvious to several testers either. After researching trends in app navigation, I concluded that a persistent navigation bar along the bottom of every screen was a viable solution. The navigation bar would enable the user to quickly access the map interface, a list of forecast regions to view specific forecasts, add a field observation, and view a list of user-submitted observations. I mocked up just the map interface screen with the new navigation bar, and performed simple A/B tests against the current app screen. All users in my test indicated the new navigation bar made it much more clear what features were afforded to them.

caic-hi-fidelity-design-and-prototype

Hi-Fidelity Design and Prototype

Once the functionality of the new features and the navigation bar were decided, I created high fidelity mockups based on the existing app design. Since the app's primary function is delivery of critical and potentially life-saving information, I kept the design simple, just adding color to certain elements for emphasis and to provide context for the function of the element. For instance, all buttons that submit or move the user forward were made blue and all cancel or back buttons were made red. Wherever possible, native device functionality was utilized (e.g. date pickers, photo selection, and sharing) to keep development simple and provide the user with familiar tools for things they likely do everyday in other apps. Once all of the functionality was designed in high fidelity, I built a clickable prototype using InVision.

View the InVision Prototype

Wrap-up and Next Steps

Although this was a personal passion project, I feel strongly that these new features would be valuable additions. When I started the project in October 2019, a user could not view or submit an observation in the app. In December 2019, a new version of the app was released with a slightly updated visual design and the ability for a user to submit an avalanche observation. I believe this further validates that the features proposed in this passion project would be of value to users. As such, I plan to reach out to CAIC staff and present the user research and testing, my conclusions, and proposed new features to them for consideration in a future release.