Redesign Graph API
Web design
User experience
Who's terra (YC W21)?
Terra is an SAAS company that has built an API which makes it easy for users to access and integrate wearable health data
My roles
Product designer
Duration
2 Months
Tools
Figma
Team
1 Designer
2 Developers
What's Graph API?
Graph API is one of Terra’s products, it’s aim is to help businesses visualise their users data
Before
After
MAIN Problem
Users are only able to create and implement graphs, there is no way to store, manage and customize existing ones
Whilst trying out the product I found a couple of problems that may effect with users experience, so I made a flow of how users should flow through the product and found that Graph API wasn't as straight forward as it was meant to be, to validate these problems, I did a quick usability test asking users to walk me through how they would use Graph API in the end we found that:
87%
Users do not know what to do after Graph API has produced the URL
90%
Users wished there was some way to manage and edit graphs
68%
Users when asked have no idea what the codes snippet does
Now knowing that the task was to...
-> Implement a way for users to store manage and customize existing graphs
-> Let users know what are the next steps after generating the graph
Constraints
-> Stakeholder would like to keep the existing feature (chatbot) as the way for people to create graphs
Ideation
I started each problem at a time, to tackle to first pain point (How might we implement a way for users to store manage and customize existing graphs) I sketched out as many solutions as possible.
In end we settled with this design as it was the most straight forward solution. The idea was to have 2 screens, a place where users can create graphs (using the chat bot) and a place for them to manage existing ones
To tackle the second pain point (How might we let users know what are the next steps after generating the graph) I made a couple of low-fidelity designs on how the instructions can be implemented, focusing on simplicity, I realised that there is no need to users to actually see the URL, they just need to copy it.
I then recreated the user flow to accomodate for the new feature. By mapping out the key moments in users journey it ensures that I do not neglect any vital steps in the flow
Stakeholder and Engineer feedback
Stakeholders emphasized the importance of compressing features to a single screen to streamline user tasks. Upon discussing with developers, it was evident that complex interactions and design elements hindered development progress.
In response to feedback, I integrated the chatbot and graphs while simplifying the design. Graph management and customization were changed to pop-ups.
Final Design
Create and Manage existing graphs
As the solution to our painpoints, users are able to create new graphs using the chatbot on the right and manage exsiting ones on the left.
Instead of showing users the the embeded code and URL I've provinded instructions on how to integrate the graphs
Edit graphs in a few clicks
Users are able to change graph type and colors occording to their own liking
Keep track of your users acvtivity
Users can also keep track of their users activity by tracking how often their users view these graphs
Takeaway
Impact
I did one more usability test before pushing the design to production:
98%
User said they the new design was simple easy to articulate
100%
Users were happy with the new features and found them useful
95%
Users were able to complete the entire user journey including adding the URL to their frame
I learned
Empty states
As this is a new feature, making sure to include empty states in your designs are crucial. It was something I almost neglected doing if it weren't for creating the new users flow.
Next time
More research
Due to time constraint I was not able to as much research as I would have liked, although our stakeholder was happy with the final design.
Allowing for more personalisation to the graphs
As our customers are other businesses, allowing them to be able to customize graphs to their branding is important, allowing for more personalisation is something I would like to implement
© 2023 by Caroline Sia Made with ❤️🍵
Redesign Graph API
Web design
User experience
Who's terra (YC W21)?
Terra is an SAAS company that has built an API which makes it easy for users to access and integrate wearable health data
My roles
Product designer
Duration
2 Months
Tools
Figma
Team
1 Designer
2 Developers
What's Graph API?
Graph API is one of Terra’s products, it’s aim is to help businesses visualise their users data
Before
After
MAIN Problem
Users are only able to create and implement graphs, there is no way to store, manage and customize existing ones
Whilst trying out the product I found a couple of problems that may effect with users experience, so I made a flow of how users should flow through the product and found that Graph API wasn't as straight forward as it was meant to be, to validate these problems, I did a quick usability test asking users to walk me through how they would use Graph API in the end we found that:
87%
Users do not know what to do after Graph API has produced the URL
90%
Users wished there was some way to manage and edit graphs
68%
Users when asked have no idea what the codes snippet does
Now knowing that the task was to...
-> Implement a way for users to store manage and customize existing graphs
-> Let users know what are the next steps after generating the graph
Constraints
-> Stakeholder would like to keep the existing feature (chatbot) as the way for people to create graphs
Ideation
I started each problem at a time, to tackle to first pain point (How might we implement a way for users to store manage and customize existing graphs) I sketched out as many solutions as possible.
In end we settled with this design as it was the most straight forward solution. The idea was to have 2 screens, a place where users can create graphs (using the chat bot) and a place for them to manage existing ones
To tackle the second pain point (How might we let users know what are the next steps after generating the graph) I made a couple of low-fidelity designs on how the instructions can be implemented, focusing on simplicity, I realised that there is no need to users to actually see the URL, they just need to copy it.
I then recreated the user flow to accomodate for the new feature. By mapping out the key moments in users journey it ensures that I do not neglect any vital steps in the flow
Stakeholder and Engineer feedback
Stakeholders emphasized the importance of compressing features to a single screen to streamline user tasks. Upon discussing with developers, it was evident that complex interactions and design elements hindered development progress.
In response to feedback, I integrated the chatbot and graphs while simplifying the design. Graph management and customization were changed to pop-ups.
Final Design
Create and Manage existing graphs
As the solution to our painpoints, users are able to create new graphs using the chatbot on the right and manage exsiting ones on the left.
Instead of showing users the the embeded code and URL I've provinded instructions on how to integrate the graphs
Edit graphs in a few clicks
Users are able to change graph type and colors occording to their own liking
Keep track of your users acvtivity
Users can also keep track of their users activity by tracking how often their users view these graphs
Takeaway
Impact
I did one more usability test before pushing the design to production:
98%
User said they the new design was simple easy to articulate
100%
Users were happy with the new features and found them useful
95%
Users were able to complete the entire user journey including adding the URL to their frame
I learned
Empty states
As this is a new feature, making sure to include empty states in your designs are crucial. It was something I almost neglected doing if it weren't for creating the new users flow.
Next time
More research
Due to time constraint I was not able to as much research as I would have liked, although our stakeholder was happy with the final design.
Allowing for more personalisation to the graphs
As our customers are other businesses, allowing them to be able to customize graphs to their branding is important, allowing for more personalisation is something I would like to implement
© 2023 by Caroline Sia Made with ❤️🍵
Redesign Graph API
Web design
User experience
Who's terra (YC W21)?
Terra is an SAAS company that has built an API which makes it easy for users to access and integrate wearable health data
My roles
Product designer
Duration
2 Months
Tools
Figma
Team
1 Designer
2 Developers
What's Graph API?
Graph API is one of Terra’s products, it’s aim is to help businesses visualise their users data
Before
After
MAIN Problem
Users are only able to create and implement graphs, there is no way to store, manage and customize existing ones
Whilst trying out the product I found a couple of problems that may effect with users experience, so I made a flow of how users should flow through the product and found that Graph API wasn't as straight forward as it was meant to be, to validate these problems, I did a quick usability test asking users to walk me through how they would use Graph API in the end we found that:
87%
Users do not know what to do after Graph API has produced the URL
90%
Users wished there was some way to manage and edit graphs
68%
Users when asked have no idea what the codes snippet does
Now knowing that the task was to...
-> Implement a way for users to store manage and customize existing graphs
-> Let users know what are the next steps after generating the graph
Constraints
-> Stakeholder would like to keep the existing feature (chatbot) as the way for people to create graphs
Ideation
I started each problem at a time, to tackle to first pain point (How might we implement a way for users to store manage and customize existing graphs) I sketched out as many solutions as possible.
In end we settled with this design as it was the most straight forward solution. The idea was to have 2 screens, a place where users can create graphs (using the chat bot) and a place for them to manage existing ones
To tackle the second pain point (How might we let users know what are the next steps after generating the graph) I made a couple of low-fidelity designs on how the instructions can be implemented, focusing on simplicity, I realised that there is no need to users to actually see the URL, they just need to copy it.
I then recreated the user flow to accomodate for the new feature. By mapping out the key moments in users journey it ensures that I do not neglect any vital steps in the flow
Stakeholder and Engineer feedback
Stakeholders emphasized the importance of compressing features to a single screen to streamline user tasks. Upon discussing with developers, it was evident that complex interactions and design elements hindered development progress.
In response to feedback, I integrated the chatbot and graphs while simplifying the design. Graph management and customization were changed to pop-ups.
Final Design
Create and Manage existing graphs
As the solution to our painpoints, users are able to create new graphs using the chatbot on the right and manage exsiting ones on the left.
Instead of showing users the the embeded code and URL I've provinded instructions on how to integrate the graphs
Edit graphs in a few clicks
Users are able to change graph type and colors occording to their own liking
Keep track of your users acvtivity
Users can also keep track of their users activity by tracking how often their users view these graphs
Takeaway
Impact
I did one more usability test before pushing the design to production:
98%
User said they the new design was simple easy to articulate
100%
Users were happy with the new features and found them useful
95%
Users were able to complete the entire user journey including adding the URL to their frame
I learned
Empty states
As this is a new feature, making sure to include empty states in your designs are crucial. It was something I almost neglected doing if it weren't for creating the new users flow.
Next time
More research
Due to time constraint I was not able to as much research as I would have liked, although our stakeholder was happy with the final design.
Allowing for more personalisation to the graphs
As our customers are other businesses, allowing them to be able to customize graphs to their branding is important, allowing for more personalisation is something I would like to implement
© 2023 by Caroline Sia Made with ❤️🍵
