Overview
Marathon is an online collaborative platform for energy industry companies to manage their assets and monitor the performance in the field. It detects asset performance anomaly and prevents upcoming failure, achieving great cost saving.
Industry | B2B Data Analytics
Platform | Web browser, Tablet (ongoing)
Role | Design Lead, UX Research, QA
Date | 2020 - Present
Website | https://www.arundo.com/marathon
From field case study to data modeling to business success
Marathon components
This page includes my work of design for business strategy realization, and a summary of design system implementation.
Design for Business Strategy Realization
Below is a recap of the design work done on the new Asset KPI page in Marathon.
Business Decision
The idea of the Asset KPI page came from several business and product discussions. One of the business goals was to increase the sales of Marathon. To achieve that, I co-ran some workshops with the PM to analyze the current product and market.
1. Feature Ideation Workshop
We invited a representative from each department to a half day ideation workshop to analyze the current product and collect ideas to make it more competitive. Through voting, it's clear that the team would like to focus on areas of improvement. Asset KPI was one of them. The purpose of this function is to help the user locate a specific piece of equipment then track it's performance on some key metrics over time.
2. Competitive Analysis
I then researched the concepts around asset KPI used on major competitors. The purpose was to find KPI ideas that are compatible with our product's capabilities.
Ideation
1. Brainstorm
I listed out a pool of possible KPIs we can apply to the product, and visualized a workflow and used it to collect feedback from PM and Delivery, trying to find a balance between our technical capabilities and users' need.
The wireframes consisted of accessing, visualization and interaction.
2. Descope
After rounds of reviews with our customer representatives, we managed to descope the concept.
3. Empathize
The user's goals with the asset KPIs are to spot problematic assets and improve their lifetime. After mapping the goals on the design and validating with the users, I made the final iterations.
4. Iteration
a. Instead of plainly showing the numbers, use rating+visuals to convey a clear message of which KPI needs the most attention .
By organizing the layout and using text hierarchies, I try to make sure the important items are seen as soon as the user sets their eyes on the screen.
Intended read flow
Mouse movement heat map during user testing
b. Instead of exhausting all past events, summarize the trend and allow side by side comparison so the user can draw some actionable insights.
c. Finalize the data visualizations by choosing only the most related forms.
d. Add an overview page for all assets so the user can be even faster to spot problematic assets on their own.
5. Finalize
A clickable prototype was built to test with the users to see if the design meets the set success criteria.
6. Followup
We use Hotjar to track the interactions on the application. After releasing the feature, the new asset page quickly became the most used page, marking the completion of a successful delivery.
• • •
Design System
As product scales and UI design trend evolves, we updated our design system as well.
Before overhauling the product design system, we updated our marketing / branding styles first. The goal for the design system update was not only to keep up with the UI trends, but also create a cohesive look and feel of the whole suite.
From left to right: old product, new marketing, new product
1. Overview
The new design system refreshes the product in many ways, from style to usability.
Marathon - before and after adopting the new design system
Work progress was tracked on a Kanban board from Figma to development to design QA and completion.
2. Prep Work
This step was to plan for the direction. I analyzed existing styles used in the current products, together with known design systems out there.
Then I ran an accessibility check on the first draft of the new colors.
WCAG contrast check
Colorblind accessibility check
3. Figma Library
This includes creating themes, reusable components and styles, and configurable variants.
4. Storybook
This is the middleground between designers and engineers. We came here for QA before finalizing a component to the code base.
5. Design System Repository
The final step was to work with our developers and create the components in the repo so they become truly reusable components.
• • •
Retrospective
It has been a great experience at Arundo. The startup environment constantly provided positive challenges and opportunities to improve. We always worked in agile sprints and collaborated well within and across departments, even during the lockdown time. Colleagues often provided constructive feedback that drove me towards a better designer.