Project Brief

The company provides monitoring solutions for man-made and natural seismicity. Their instruments are used for collecting and analyzing critical real time data. Our mobile application was created to give users the necessary information for them to determine their response to an event.

Project Overview

Duration

April 2021 (3 weeks)

MY ROLE

Solo/Lead UX Designer

Tools Used

Figma, Sketch, Overflow

Design: Lo-fi wireframes, conceptual development to mid-fi screens, refined features for the hi-fi prototype, and interaction design of the hi-fi prototype, usability testing of prototype

Other Tasks: ran user-testing session with internal personnel, presented work to senior stakeholders

*NDA: Due to NDA purposes, I will not be sharing the client name and have omitted and obfuscated confidential information in this case study.

Project Timeline

What I Did

(3 Weeks)

01 week

Empathize, Define

• understand problem space

• defining project goal

• setting stakeholder expectation

• project timeline in relation to development

• competitive analysis/contextual inquiry

• initial design ideas/sketches

02 Week

Exploration, Design

• UI exploration (3 options)

• wireframes

• feedback session 1

• usability testing

• Wireframes 2

03 Week

Design, Prototype

• feedback session 2

• High fidelity wireframes

• interactive prototype

The Problem

Earthquakes are one of the deadliest natural disasters and can often cause large scale destruction of property and life. Factories and various operations are simultaneously impacted by this natural cause. Operation managers need to know immediately that an earthquake has happened to then determine their response to the event by either stopping or changing the operations under their management.

The Opportunity

Currently, operation managers receive knowledge of seismic activity sporadically through internal personnels. They then need to immediately access a desktop computer to log into the web portal. From there, they narrow down using a general filter with coordinate information saved on the notepad in their phones. This will then determine their response to the event.

Our client must have immediate knowledge of seismic activity within her area of interest to determine whether she should stop or change the operations under her management. By receiving immediate text notifications to be notified of seismic events that have occurred, she can reduce the time frame for determining her response.

Discovery

As I dove into understanding the existing flow for how users used the pre-existing web-based platform for their needs, I discovered 2 main areas in need of improvement. I’ve marked the greyed out boxes as opportunities that may be improved.

The first was the location selection of the AOI (Area of Interest). To input the location, users were required to enter the exact latitude and longitude coordinates. However, managers using the platform for the first time did not have that information readily on hand and were often using third-party apps to determine the exact coordinates to input. Instead, they were more interested in selecting their AOI based on stations they were interested in on the map. The search for relevant stations allowed them to easily find the AOI they were interested in. After determining their initial input, managers would save their coordinates by either noting it down on their phones or a notepad for easier access the next time they log in.

Secondly, managers are often interested in comparing the seismic events within an area of interest to determine whether they want to change their operations under their management.

Shaping Our Design Decisions based on Main Needs & Time Constraint

Project Goal: To create an app with an optimized user interface to display all necessary data pre-existing within web-based platform, as well as additional personalized views.

Immediate Notification of Seismic Events

• receive text notifications to be notified of seismic events

• login through Face ID or touch to immediately access event info

Easy Way to Set Areas of Interests & Notification Criteria

• 2 ways of setting area of interest - entering coordinates & by eye

• allow multiple notification criteria

Easily Compare Seismic Activities

• View past events that have occurred to reveal patterns and inform the operations of her team in that area

• Include different map views - could be useful for comparison to know geographic characteristics of where various seismic events occurred

• Tapping event icon displays details

• Different colours of events to signify how old event is

• Flexible map view

• Easily go back to original view of all seismic events in area of interest

Research

Competitive Analysis

To understand what information seismic applications prioritized, I analyzed the interaction model of other post seismic platforms like Earthquake Network and My Earthquake Alerts.

Design System

While sketching for design solutions, we studied the client’s existing design of the desktop platform to ensure consistency and clarity - this includes meaning of colours and icons, the overall colours of their brand, and map features.

Understanding Target User

Defining who we're designing for helped us understand the needs of the power users who regularly use the AOI platform.

Ideation Phase

Rough Sketches

Rough Wireframes/User Flow Stage

I began ideating ways to improve the overall experience. The first and most obvious issue that I had to tackle was the area selection component. There were technical constraints that I needed to work around while ensuring an intuitive experience. I made notes on the side of my wireframes to indicate possible gestures that can be used with the programming language (native script).

Usability Testing

Unfortunately, I did not have access to users who’d directly use the product. However, I was able to test the “Select AOI” feature on internal members of our team who did not work on this project to gain unbiased feedback on the intuitiveness of the flow. Validating my design solutions through user testing helped me become more confident in my design decisions.

One of the areas I had difficulty designing was the “Add AOI” area. The engineering team were investigating the technical constraints while I was simultaneously designing the userflow for this action.

I wanted to include 2 methods of setting an area of interest.

1. Drag along the screen to set a square in place

2. Inputting latitude and longitude manually within the form

It was essential that the area would be set in place with a square before the input field could be adjusted.

After the area is set, the user is brought to the “AOI Details” page. They then have the option of setting their notification criteria.

To allow users to have quick access to the event that has occurred, a notification pop up will give users direct access to the event page. From here, they will have immediate access to the necessary information for operational managers to determine their response.

Feature & Visual Design Breakdown

Future Development

Due to the time constraint of MVP, I was not able to explore further in terms of understanding user needs. If I had the resources, I would have dove further into understanding the needs of managers while selecting AOIs. For ex., even though they had no exact latitude and longitude coordinates, they knew which stations they were interested in. In this case, it would have been useful to incorporate a search bar within the "set AOI" page to find the location of stations the operations manager is interested in.

What I Learned

Development team must be collaborated with closely to ensure design direction can be possible with technical restrictions.