What is this project?
Opportunity
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. As a part of the Interaction Design Studio class at CMU, we created a data-driven dashboard to help SPIN organize, visualize, and further analyze this data to achieve business objectives and a smoother user experience.
Throughout the project duration, we completed the design phases of product research and data analysis, ideation, iteration, and a presentation/demo.
The final goal was to design an interactive dashboard, utilizing principles of 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.
User Research
Background research, project understanding, and insights
Research Overview
Data Visualization
User and Data Insights
Current and Future Models
Data Visualization
What data do I need to emphasize in my design?
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.
'DocklessOpenData'
Displayed SPIN use by date
Through this dataset, we could visualize SPIN use by date and see how long SPINs were used on particular days in December.
'Pittsburgh_average_vehicles_by_admin_zones'
Displayed Spin availability by location within Pittsburgh
This dataset informed us about the SPIN availability and number of SPINs in use across all townships.
User and Data Insights
Personas
Who am I designing for?
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
Drawing similarities and differences between each data type
Insights from Personas
We analyzed information by the data and resources each persona needed and/or shared with each other. Some common information they required included:
-
Scooter density of different areas
-
Scooter condition/maintenance
-
Performance of scooters
Insights from Datasets
We analyzed the two given data sets and brainstormed how and where this data could be used. We then categorized the information from the dataset and labelled insights with the persona(s) that would use this information. This helped us narrow down which data we should prioritize.
Translating Data into Visuals
Design layouts according to the info we want
Based on insights from the data, we connected types of information to different visuals to translate numbers into imagery or graphics. Based on large quantities of map-based information, we decided to include a visual map to consolidate data.
Information displayed on a Live Map
-
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)
Designing Models
Understanding the current design and what the future design needs
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.
Persona-needs brainstorming
Information Flow and Needs Mapping
We split up the model by types of info each persona needs and/or could gain from it. We connected specific objectives like scooter distribution strategies, scheduling, pricing, marketing, etc. to the information we had, to understand what we could add for a future model of our dashboard. We also found 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
Sketches, iterations, demo prototype, and more iterations
Lo-Fidelity Sketches - Iteration #1
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 how relevant each feature was for our personas. To make sure our dashboard did not overload the user with information, we decided to further narrow down what we wanted to include for our personas and prioritize on our dashboard.
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.
Mockups - Iteration #2
Ideation
For our second iteration, we incorporated all the insights gathered from critique and brainstormed different ways to combine our sketches into one cohesive dashboard.
We noticed that our sketches could be 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 needed an information architecture and navigation system to fluidly transition between each screen layout
-
We had to think about how the workflow and user journey would look like for each of the two personas
-
Brainstorm the kind of product features we want to include to assist with the daily workflow of the two 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:
-
We shouldn’t have multiple logins/profiles for different users
-
We wanted to design a system to sort/filter data in both the live map and statistics view
-
We would add more information for different areas in the live map view. The current information was too sparse
-
The color coding was a little confusing. We need to create a unified aesthetic for color coding as well as UI elements 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 Kalen’s user need.
Specific feedback on our design
Design Changes - Iteration #3
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.
Animated Design Mockup
In this video, we created a zoom-in and zoom-out animation to show the dynamic nature, flexibility, and adaptability of our map view.
We animated the map and controls to show how micro-mobility areas around the map would change according to time and selections, with changes in saturation of color according to density. We also show how the bar chart (top) and line chart (bottom) would change according to time.
Feedback and Critique
Live Map Feedback
-
Numerical values are more visually effective than percentages
-
Scooters icons should display key information like battery life
-
Filtering and selecting multiple scooters is more beneficial
-
Further filter information on screen
Statistics View Feedback
-
The bar graph for demographics did not seem relevant
-
The line graph was great, but the bar graph was a little confusing
-
Using percentages and numbers at once was confusing
-
Filtering data by specific factors like density, percentage of scooters, etc. would be more useful
Controls Design Sketches - Iteration #4
Sketches of possible controls on the dashboard
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
Selecting multiple scooters in one go (adding to queue together)
Quick-add helper that user can drag on map or minimize
Quick-add functions on sidebar
Quick-add toggles
Dashboard Edits
Changes based on feedback from our previous design
Live Map and Density Motion
Scooter numbers and density map in-action
Add-to-Queue Motion
Multiple selection and adding to queue process
Statistics View
Showing data trends and patterns through visuals
Feedback and Critique
Live Map Feedback
-
The wording for alert messages (‘alert’) was repetitive
-
The heatmap animation implied scooters moving around the map instead of increasing/decreasing scooter density of areas
Statistics View Feedback
-
The daily, weekly, and monthly views need refinement
-
The button text was redundant, and the screen “real estate” was not optimally used
-
Some widgets have very small text, which makes the content harder to understand
Final Design
Pitching our idea to SPIN with a final animated dashboard
Our Pitch
During our pitch presentation, we each took turns explaining different parts of the dashboard and engaged with the audience with interactive segments.
Based on the feedback, our final pitch was persuasive. We explained the features of our dashboard and communicated our design rationale effectively. We were also commended on how our design catered to both the personas without distinguishing them.
Q&A with the audience
Final Dashboard Walkthrough
As a final touch, we connected all of our animations and dashboard elements to use cases for each persona.
In our walk-through video, we talk about how Mia and Kalen would use each aspect of the dashboard for their tasks. This also gives an overview of how specific features work in our dashboard.
Learnings and Next Steps
What I learned during the project and what I would improve on
This project prompted me to think about user needs when designing any interface, and how to maximize the positive impact of user research, while each method has its drawbacks.
This was a very fast-paced project and had a lot of parts to it. Designing a dashboard was a very different experience from designing a website interface and it taught me that information design is very important to effectively convey large amounts of data. The opportunity of working in a team was also very valuable and fruitful considering our diverse backgrounds brought lots of great ideas to the table.
Future Steps
If we have more time, we would like to improve granularity of the dashboard's key features like the add-to-queue feature and density map, to make them more usable for Mia and Kalen. We also learned the power of motion in UX design, and would like to brainstorm an advertisement for our dashboard, with a better plot and engaging micro-animations.