CONTEXT
Tulip Interfaces is a low-code app-building platform for manufacturers.
What's Tulip?
Users use tulip to deploy customized apps that connect the people, machines, devices, and systems used in a production process.
During my internship, we had the chance to visit Tiffany & Co.'s factory in Rhode Island. This factory has several stations, each performing different tasks. Each station is paired with an app made with Tulip. These apps have various user-defined purposes, therefore digitizing the manufacturing process.
Why do we need this design?
Design is needed because we switched to Usage Based Pricing
This admin dashboard helps users understand what they are paying for and, most importantly, why they might need more from Tulip.
What's usage based pricing?
The price customer pays is based on consumption
If you are using 50 apps built with Tulip, you only pay for those, regardless of your billing plan. Therefore, we want to introduce a feature to visualize account usage.
PROBLEM STATEMENT
How might we build a homepage for the admins to overview Tulip usage across their organizations?
Currently, this comprehensive homepage/dashboard does not exist…
Existing workarounds do not provide the same level of efficiency and overview for managing Tulip App deployment in factories.
Current Workarounds
Account Settings Page
Limited information
Low discoverability and hard to navigate
Poor data visualization
Dashboard per Request
Non-interactive PDF files
Time-consuming to make
Only available for large enterprise users
Third-party Dashboards
Customers track on their own system
Loses users to third-party platforms
Inefficient and error-prone
My goal was to create the MVP
Timeline
When I joined the company, we were in the initial phases of the development of this feature.
Constraints and Scope
Each of these factors plays a critical role in shaping the project's overall objectives and ultimate success. My primary focus during the MVP creation phase, which I aimed to complete within a month, was on ideation and flow.
IMPACT
This design saves a lot of hassle for admins
5 clicks → 2 clicks
For executives to review an alert/notification & make an action
7 clicks → 3 clicks
For account admins to study the No. of stations in the last 6 months
PROCESS
We found out that are 2 types of admins
Executives who care about higher level decisions
Receive abnormal trend alerts
View overall manufacturing status and Tulip usage
View overall deployment and utilization
Compare higher-level manufacturing data to learn growth trend
Account Admins who care about usage details
Receive manufacturing alerts & approval request from operators
View workspace data: Number of workspace, Workspace status
View users data: Number of users, Types of users, User status
View apps data: Number of apps, Apps status, MAI and MAU
What are the common practices?
With the PM, we did research on similar homepage features.
While these sites may not necessarily be direct competitors, we identified a commonality among them: they all work with data. Through careful analysis of these sites, we identified certain patterns and adopt them in our own design.
With the insights from our research, we're designing a modular homepage that offers a clear information hierarchy for all users.
Modular & Accessible Design
Modularity is key. Since this is only an MVP product now, we want modules that can be easily modified in the future. Users can also navigate the platform using only homepage.
Key Metrics Visualization
Remember we have two types of users? The bird's-eye views are for the executives, while the data drill-downs are for the more technical account admins.
Organized Hierarchy
There are three key components in the data: user, station, and apps. To visualize everything, we incorporated an interactive map, alerts, and health indicators.
ITERATIONS
I was able to receive feedback from a group of co-workers
One of the key constraints of this project was the tight deadline of just one month. Due to the limited time and resources available, I was unable to conduct extensive testing with end-users. However, I was able to receive feedback from a group of co-workers, including engineers, a product education lead, other designers, and the project manager. They thoroughly understand our users and were able to provide valuable insights to inform my design decisions.
#1 Getting Everything on there
What's working well
Modular design for cardsVisual representation of metricsClick to delve into data
What could be better:
Map inconsistent with color scheme
Jarring selection color
Time selection interferes with map
Many clickable items causes confusion
#2 Every piece in its own place
What's working well
Better readability & organization with 3 sections of information
Colors are more cohesive
Customize time frame and visual style for drill-downs
What could be better:
Prioritize usage data
Hard to navigate 5+ workspaces
Clickable items cause confusion
#3 Final Design!
Reorganized layout to give prominence to key account usage information, moving notifications & shortcuts to the side for easier access.
Added hover details for workspaces, allowing users to quickly identify which workspace requires attention without loading full details.
Replaced the single filter at the top with individual filters for each graph, giving users more control over their viewing experience.
Added action buttons for alerts and notifications, and moved shortcuts to the bottom right for easier, distraction-free access.
If I had more time…
Prioritizing features for engineering implementation
Testing with end users
Testing for edge cases
Takeaways
Finding order in chaos
Explaining design decisions to people of different expertise
Why inclusive design really matters
