Mustangular UI Design

The Overview

April - May 2018
Completed for Pacific Northwest Seismic Network
Role: UX Designer

The Problem

The current version of Mustangular (1.0) has a functional, but imperfect user interface. Mustangular 2.0 is currently being developed, and the team wanted an updated user interface. Some issues that the current interface has include;

  • No detailed information available for seismic stations
  • Cannot filter information by channels
  • Cannot choose more than one metric in the initial query
  • Cannot easily edit the query without going back to the initial form
  • The side menu forces users to scroll down to see all of the key

These issues stem from both UI issues and missing functionality.

mustangular 1.0's initial query mustangular 1.0's Menu

The Solution

I created a prototype of a web application, using Adobe Experience Design. The key has been separated from the menu, so it’s able to grow and shrink as the user changes the number of bins they wish to see. The informational bar at the top allows users to keep track of the entered information and edit it if they want to. Users are also able to click on a seismic station and bring up more details and a graph.

Menu opened
initial query station popup

The Process

Over 3 weeks I conducted initial research and ideation, and then worked on the design.

Research

The developer working on this project had mocked up some screens as an initial idea of what she wanted Mustangular 2.0 to look like. There were four screens total and they included;

  • Main menu collapsed & extended
  • Initial query entry
  • Station graph popup

I also looked at what Mustangular 1.0 currently looks like and what it can and can't do. I had to familiarize myself with this application because prior to this project I had not used mustangular and was very unfamiliar with it.

I asked questions in order to understand the developer's intentions for the screen mockups so that I could better understand what she wanted from this design. We talked a bit about the bar at the top that has about, info, edit, and share. I wanted to understand what she wanted to happen when a user clicked on one of these tabs or buttons.

Main Page Mockup Station popup mockup

Design

I started out by creating the main menu. It had a two pane collapsible menu, that had an info tab and an about tab. About 3 weeks after I created the initial design, the developer was looking over the designs and suggested we take a second look at it, which I agreed with. Looking over it again, the spacing and sizing of a lot of elements didn’t make sense. She suggested that we try a one panel collapsible menu, with an informational bar at the top. After a couple of iterations we settled on our final design for the main menu.

I designed the popup for the specific station with details and graph. I made sure to include all of the relevant information, including the station name, dates, and network. I also wanted to be sure that the users could choose what channels they were viewing data for.

Initial main menu extended Iterated main menu extended

I also designed the initial query form, and the form used for editing the query. I wanted to have the initial query form to seem more a part of the main menu and map, so I had the form over a blurred map. The form used for editing the query has the same layout of the initial query form, so there is consistency. The difference is the background, instead of a blurred map, it is the map and the main menu that is blurred. Whatever metrics were previously selected are populated in this menu.

Team Members

Kyla Marczewski

Kyla Marczewski

Developer

More Projects