Concept Design and Development
Role
Product Designer
Timeline
October 2021 - November 2021
Software
Tableau, Figma, Adobe After Effects,
Adobe Illustrator, Miro
Introduction
Background
SPIN is an electric scooter company that has quickly become a major player in urban transport. To ensure efficiency and boost performance of their product, SPIN employees handle a lot of user data. They needed a solution that would help them organize and gain insights from this data, without having to understand it in detail.
Opportunity
The project was to help SPIN organize, visualize, and further analyze SPIN scooter data to gain quick insights and use them towards identifying areas of business potential, and ensure a faster experience for middle users: Gig workers that handle proper maintenance and pickup/dropoff of scooters. For this, we first learned about our client's and gig worker's goals and how they overlapped, then ideated ways to make create a cohesive dashboard and pitch to the client, SPIN.
Our team’s goal was to design an interactive dashboard, utilizing data visualization and information design to effectively arrange information to make data easier to read, and cater this layout to the needs of given personas.
Outcome
We created a data-driven dashboard with multiple views, catering to our two significantly different target groups. This dashboard allowed our users to view a visual, map-based dashboard to understand the relationship of scooter live locations, customer usage, and localities all in one. Additionally, this dashboard's alternate view gave higher level insights into highest usage hours, best locations to pickup/dropoff scooters, and areas of higher profit.
RESEARCH
Understanding our client, their data, and our target users
Research Process
Data
Visualization
Understanding methods of visualizing different types of data, catering to what the visual is used for
User Needs and Data Insights
Understanding needs of our target users and how their needs relate to the kind of data we have available
Representation of required data
Mapping out what data types we needed to represent, and how users would interact with different types of data at once
Data Visualization
Types of Datasets
We were given two datasets to decipher. We used Tableau to visualize and make this dense data easier to interpret. We imported these datasets onto Tableau and manipulated rows and columns to visualize data.
Dataset 1: SPIN usage by date
We visualized SPIN use by date to see usage durations on particular days in December.
Dataset 2: SPIN availability by location within Pittsburgh
This dataset displayed SPIN availability and number of SPINs in use across all townships.
User Needs and Data Insights
Personas
We were given 4 personas as described below. Using this information, we drew conclusions about the kind of information each persona would need from our datasets.
Affinity Mapping for user needs
Out of the given 4 user groups, we needed to tackle at least 2 user groups through one design dashboard. Our first step to understanding feasible solutions was to understand where each user groups needs, goals, and types of data they would need overlap. For this, we mapped out each persona's needs and connected them to the numerical data that we had previously visualized.
Insights from Personas
Connecting to Available Data
Common info required:​
-
Scooter density in areas
-
Scooter condition/maintenance
-
Scooter performance
We identified where the given data could be used, and scenarios each persona would tackle. Using this, we labelled user scenario cards with types of data they would need. We then narrowed down personas we could feasibly design for, without creating information overload.
Translating Data into visuals
Based on the user needs and data types we had identified for our dashboard, we needed to understand the best way to represent our data. We mapped our different mental models for understanding high level data and diving deep for detailed information. Our user groups required both high-level insights and scenarios in which they would need to look more closely at numbers.
Types of information we needed to display:
-
Location of scooters
-
Availability of scooters
-
Filters based on: Time of use, battery levels, localities, etc.
-
Granularity for scooter use
-
Filtering of numerical data
-
Displaying information little by little (progressive disclosure)
The data type with the most density, and connected to all other data types was Location, so we went with a map-based interface that would allow for numbers and location at once.
MENTAL MODELS
Identifying current shortcomings and redesigning a future data model
Current Model
The current model of our data dashboard is a representation of the available information and how it is displayed, relating to each persona.
Brainstorming persona needs
Information Flow and Needs Mapping
We split up the model by types of info each persona needs and/or could gain from, then connected specific objectives like scooter distribution strategies, scheduling, pricing, marketing, etc. to the information we had. This helped pinpoint data types to add to our future model. This process also added to previously identified common goals between personas and information they may exchange or share among themselves. To make sure we really catered to a user’s life and work, we focused on user stories and actual tasks they would need to complete.
Future Model
The future model consolidated existing information (from the current model) and identified information that we could incorporate according to new priorities we found through brainstorming and mapping.
Future Model Mapping
Through this modeling, we found that a lot of the given data catered more towards the Data Analyst, Gig Worker and Policy Analyst, and they had a lot of data exchange in common.
VISUAL DESIGN
Sketching and iterating initial dashboard designs
Iteration #1
Low fidelity, hand-drawn sketches of our concept
Feedback
and Critique
We designed for one persona each and came up with four different concepts for our dashboard. As feedback, we were encouraged to think about the relevance of each feature in our concept from the persona's perspective. To maintain simplicity and prevent information overload, we further narrowed down on data and target personas for our dashboard design.
Next Steps
Based on feedback and research, we found more commonalities in the data catering to the needs of Mia, the data analyst and Kalen, the gig worker: these two personas became our target personas.
​
We decided that a balance between qualitative and quantitative information would make an effective visual display, and aimed at making our dashboard as visually responsive and interactive as possible, to let users view information quickly but also in detail.
Iteration #2
For the second iteration, our sketches were categorized into two different views: a statistics view, and a live map view. We agreed that by having two different views in our dashboard could split up different data types and satisfy the user needs of both data analysts (Mia) and gig workers (Kalen).
Challenges for this design
-
Combining multiple views meant strong info architecture and navigation to transition between screen layouts
-
The workflow and user journey looked different for each persona and had overlaps in varying parts
-
Tailor dashboard features to assist with the daily workflow of the two significantly different users
Mid-fidelity mockup
Live Map View
Statistics View
Feedback and Next Steps
After critique, we analyzed the feedback and listed all the points brought up. Our focus was:
Feedback method
-
Multiple logins/profiles for different users are out of scope for this project.​
​
-
The dashboard needed to sort/filter data in both the live map and statistics view​
​
-
The current information is too sparse, it needs more detail​
​
-
The color coding was confusing. We needed a unified aesthetic for UI across different views​
​
-
As a gig worker, one of Kalen’s priority was to come up with daily schedules and find out the most optimal route. We would have to come up with new features to satisfy this user need.
Iteration #3
Finalizing our design
Scooter Location Live Map
Dynamic bar to show the ratio between active scooters (green), idle scooters (grey), and scooters needing attention (red)
Zoom-in and zoom-out for granularity
The scooter icons change to adapt to the enlarging map
An “add to queue” button to add scooters needing attention to queue of tasks
Dynamic Density Map
Toggle through the density map view
Areas with higher quantity of active scooters, higher frequency of trips, etc. have a dark orange tint
Filter feature to the density map to view scooter density by date and within specific time ranges
Statistics View
We displayed the demographic of users, revenue, most popular areas and most profitable areas to satisfy the user needs of Mia (Data Analyst). We used SPIN's orange as a highlight color to emphasize data and blue to show comparable data.
Interaction demo
The animated demo showcases the dynamic nature, flexibility, and adaptability of the map view
The map and controls change to show how micro-mobility areas around the map would update according to filters and reflect on the map with saturation of color. The bar chart (top) and line chart (bottom) in the data view also changes over to time.
CONTROLS INTERACTION
Going back to the drawing board to optimize interaction
Refining granular controls
Before iterating on our previous dashboard design, we refined the controls around the dashboard, to make them more visible, accessible, intuitive, and/or most effective for our users.
Day/month/year filters
Area/location change controls
Zoom in/out controls
Selection mechanism
Selecting multiple items on the screen to move, edit, filter through, etc.
Quick-add modal: drag or minimize
Sidebar functions
Quick-add toggles
FINAL SOLUTION
SPIN Dashboard Demo
In this demo, the team talks through how Mia and Kalen (our target users) would utilize and benefit from each aspect of the dashboard for their daily tasks. This video also gives an overview of how key features function. A deeper dive into these features is included below.
Key Features
Live Map
Motion and Density
Selection Mechanism
Adding to Queue
Statistics view
Visual representation of data and trends
PROJECT OUTCOMES
Result, impact and looking back
Impact
Product Pitch
Based on feedback, our final pitch was very effective. We walked through the key features of our dashboard and communicated our design rationale through interactive segments in our presentation. We were also commended on how our design catered to two differing personas without obvious distinction.
My learnings
Diving deep, and pulling back at the same time
This project had a lot of deep diving to make sure the dashboard included as much detail as possible. At the same, time our team had a challenging time trying to balance detail with higher-level data like trends. I learned that consolidating and including lots of data is simple, but being able to come back out and look at everything from a 60,000 feet lens is the real challenge, and if successfully achieved then it can significantly improve the quality of data-driven design.
Straying from the design path is okay
Often times as a designer, we are taught to follow a certain general path: research, then initial design, iteration, then final design. This project was one of the first time as a young designer where the team decided our product was broken and needed another look. At a stage where we could have pushed forward and presented a final design, we decided to go back to the drawing board and refine weaker parts of our interaction model. The result was an airtight interaction mechanism that shone through the pitch. While it was uncomfortable at first, I learned that it's okay to go back and edit.
If I had more time...
Testing feasibility and supporting our assumptions
Due to the fast-pace of this project, the team was not able to test our design before pitching to our clients. I would have liked to test with multiple users, specifically with people with data-handling backgrounds, other UX designers, and people with a business mindset. This is to only test the effectiveness of our dashboard, but also to lead this towards a product that SPIN would eventually adopt from a business perspective. Even if a product is beautifully designed, it needs to align with business props and bring enough value to customers/users for the product to be successful.