Mustangular UI Design
April - May 2018
Completed for Pacific Northwest Seismic Network
Role: UX Designer
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.
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.
Over 3 weeks I conducted initial research and ideation, and then worked on the design.
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.
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.
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.