top of page

Getting SMART Technologies' Admin Portal ready for an additional subscription tier

Dates:

Role:

Description:

October 2022- February 2023
UX Designer, Visual Designer

Updating SMART Technologies' Admin Portal to align with the technological upgrades to support an additional subscription tier, as well as support features included in the new subscription tier.

Top

The Problem

SMART Technologies modernized their backend systems to support multiple tiers of software subscriptions.​ This required UI changes within the SMART Technologies' Admin Portal.

​

Additionally, new tiers of software subscriptions added new features that required support from Admin Portal, specifically, the addition of an Organization Library.

Station data view in first iteration of SQUAC

Wireframes & Scoping

The initial requirements for SQUAC were unclear. I was told that SQUAC would have channel groups and metric groups. These two groups would then be linked together on a main page. The main page and functionality was unclear, as well as how the back end and front end would work together.

I created individual flows for creating the two group types, as well as the main page with various pop ups and additional screens for more information and data visualizations.

first iteration of the SQUAC homepage containg a data table of channels and metrics showcasing the channel group selection
metric details for first iteration of SQUAC
channel group details in first iteration of SQUAC
station detail page in first iteration of SQUAC
station popup in the first iteration of SQUAC
first iteration of the SQUAC homepage containg a data table of channels and metrics showcasing the metric group selection
first iteration of the SQUAC homepage containg a data table of channels and metrics in blue and red rather than green and red.

At the time, this was assumed to be the final design. This stretch of design ended in May 2018. Looking back on these designs, it is very obvious that I did not have a solid grasp on the structure and was inexperienced in UI design.

Screen Shot 2020-03-12 at 1.49.36 PM.png
channel group creation for the first iteration of SQUAC

Research & Competitive Analysis

Prior to my time with SMART, exploratory research was conducted with administrators to 

Seismic stations are located all over. There are two types of stations. Broadband stations are sensitive and can detect shaking from very far away, while strong motion stations focus on detecting closer, violent, shaking. Each station, regardless of type, has multiple data channels. There are often three channels to measure shaking - one vertical (z) channel, and two horizontals (x and y) that show north-south and east-west shaking. Older stations may only have one channel that measures vertical shaking. Additionally, there are channels that show data about the station site like temperature and tilt Each channel of data is transmitted back to the servers and is processed quickly.

Washington and Oregon station map as of January 2020
key for the station map showing what station types there are.
first iteration of the SQUAC homepage containg a data table of channels and metrics
station popup in the first iteration of SQUAC

High Fidelity Prototypes

After the initial iteration, SQUAC was revisited in May 2019. The overall concept remained the same, but the UI received major changes, and continued to be changed during the design process.

The main change was the home screen. This became a dashboard with widgets, similar to AWS and Google Analytics. The dashboard and widget style allows users more freedom in customizing what they see in SQUAC. It also lets users see visual data faster than the previous design.

Homepage with dashboards of data of the second iteration of SQUAC
Homepage with the sidebar containing different dashboard selection closed.
Channel group creation page

Usability Testing

One point of contention was how the channel groups functioned. There was a lot of conversation about when and where users should create channel groups. The initial idea was to have a separate page where users create channel groups, and then assign a group to a widget.

We quickly realized this could force users to create, exit, and re-create widgets, causing a lot of unneeded steps. We decided to include channel group creation in the dashboard and widget creation. This led to questioning whether channel groups should be associated with the dashboard as a whole or each individual widget.

flow.png

When asking seismologists their opinions, they cared about the flexibility of the channel groups and easily applying the channel groups to widgets. For this reason, and for back end simplification, we decided to apply the channel groups to each individual widget.

Channel group creation within the widget creation popup
Adding metrics to a widget within the widget creation popup
Channel group selection, rather than creation, within the widget creation popup

Working with the front end developer, we decided that the widget creation was too crowded with the channel group creation inside the widget creation. We moved channel group creation back to a separate page. Our concerns about the user flow were still present but we decided that it would be easier to re-integrate the channel group creation into the widget creation in future versions rather than vice versa.

Adding metrics to a widget within the widget creation popup
Adding thresholds to metrics on a widget within the widget creation popup
Solution

The Solution

SQUAC is a web application designed for desktop. Users land on a custom dashboard with multiple widgets, each displaying live data in various ways. Users can navigate to and create other dashboards for whatever projects and data is relevant to their position.

working version - login screen
working version - login screen error with entries
Screen Shot 2020-06-02 at 6.43.20 PM.png
working version - dashboard with widget being resized
working version - create a dashboard
working version - dashboard with 3 different widgets and sidebar open
working version - dashboard with 3 different widgets and sidebar closed
working version - widget creation popup with thresholds
working version - widget creation thresholds
working version - widget creation channel group selection
working version - widget creation metric selection
working version - metric page
working version - metric creation
working version - metrics page with one selected
working version - channel group page

Users can view channel groups, manage current channel groups by editing and deleting, and create new channel groups. Similarly, metrics can be edited, deleted, and created easily.

working version - new channel group nothing selected
working version - new channel group UW network selected
working version - new channel group UW network and a station selected

The screens above are from the final product that is not available to the public. If you’re interested in clicking through an adobe XD prototype, you can find that here.

Reflection

SQUAC had very limited user research with end users also known as seismologists. This was partially because of where I came into the process, and partially because the developers tended to avoid asking the seismologists questions. As a UX designer, I tried to advocate for talking to users about the design but there was not as much conversation as I would have liked.

SQUAC is currently in testing phase of version 1. The plan for the near future is to conduct usability tests and interviews with some of the PNSN seismologists. My hope is that this feedback with the live product helps provide user feedback with which to go back to the design with.

There was about a year of time between the first iteration and the second iteration. I think it’s very obvious the difference in my UX design skills including UI, visual, and technical ability using Adobe XD. I debated including the first iteration because it is so rough and different than the second, but ultimately decided it showed my growth and ability to learn.

 

SQUAC was one of the first projects that I worked directly with developers on a product from start to finish. Our team developed an API and a frontend portion that linked to the API. Because of that, I had to work to understand the backend portion and the limitations it came with.

More Projects

accessifycover.png
accessifycover.png

Accessify UI Design

bottom of page