Modernizing the mobile companion

Making the search for the perfect mountain easier for all

Image not found

TL,DR

Problem Space:
Lack of ability to bulk manage a large amount of invitations.

Role:
Sketching, Wireframing, User Experience, Usability Testing 

Timeline: 
8 weeks

TL,DR

Problem:
Challenging to plan a snow sports excursion without multiple sources of information.

Role:
Research, Sketching, Wireframing, Prototyping, User Interface Design, Testing 

Timeline: 
8 Weeks

Platform: 
iOS, Apple Watch, Landing Page

Traction Guest is a workplace safety and security software. A variety of users use our software -  the technical IT administrator who configures the software, the administrator who oversees who is visiting onsite and employees who invite their guests.

A task of reorganization

The Problem

The Traction Guest mobile app planned to include more features. However, creating space for these new features required reorganizing its information architecture.

Apart from the filters and settings, all areas of the app’s design pattern were addressed during this project. The former two areas were unique from the rest of the app, so they merit their own research and exploration.  

app-layout

The problem the current app

Working with my colleague on the design team we brainstormed with to confirm the problem areas of our mobile app. The mobile app’s original design uses older material design principles which had its challenges:

  • Inconsistent UX from the desktop app. 
  • Inflexible navigation
  • Hidden features buried in drawers.
  • Buttons concealed information. 

The transformation

I rearranged the app IA beforehand to inform the app's navigations - this also reflects our users' mental models.

Mobile App Information Architecture

I considered upcoming features on our roadmap and brought Invites, Signins and Roll Call together using a segmented control - something our users previously requested.  

segmented-control

Segmented control combining 3 pages

Working closely with a mobile developer, we held daily standups to catch challenges the dev team had building to the design specifications. For example, filters are not a functionality we planned to redesign during this project; however, we realized that users did not have an easy way to sort information by location as they could in our desktop application.

filters-2

Old filter pattern (left), new filter user flow (right)

Most modern apps today use tabbed navigation. I hypothesized this pattern could improve users' recall and recognition, making it simple to move between tasks as features are no longer hidden behind a drawer menu.

mobile navigation

Old app navigation pattern (left) new tabbed navigation pattern (right)

Did the changes improve the mobile app?

In discussions with my Product Team, we decided to keep drastic UI changes in our back pocket as it would require user validation. After launching the mobile app, we had the opportunity to speak with users to validate the decisions made.  

Did our users:

  • Experience any difficulty using the tabbed navigation
  • Understand how to navigate between locations 
  • Understand that additional features could be found in the settings section

What I learned

Generally, our users didn’t experience trouble with the new navigation UI. They understood how to use location filtering and switch between locations. 

A feature requested was the ability to select multiple locations at once. Additionally, the location filter can be easier to find by using iconography as it blends into the content area.

Finally, most interviewees didn't expect to find features in the Settings section. This area will need further research to categorize better information that doesn't fit within our navigation.

Our next opportunities

From a business perspective, we need to increase the adoption of our mobile app by better understanding the needs of our users from a mobile app.

Additionally, we could leverage iOS widgets to give our users glanceable information that would no longer require opening the app.

tgmobile-many-screens

Selected Works

Sports WidgetUI Design

PeakUX/UI Design

Yahoo Fantasy SportsHeuristic Evaluation

Peak UI LibraryComing Soon