Theneo
Responsive and interactive website redesign for an API documentation startup
Overview
Theneo is an AI tool that generates and standardizes fast, high-quality API documentation. It makes it easy to edit, customize, import, and analyze API docs across entire teams. The platform is marketed as user-friendly for everyone, including developers and non-developers alike. The start-up reached out to our design team looking for a complete redesign of their website to promote this message and modernize their branding.
Problem
Theneo's team was looking for a redesign of the landing page, as well as any additions recommended by the design team. Their website was too text-heavy and had outdated UI that did not accurately represent the company's mission or platform.
Theneo’s founder stated that she had never read the full website and assumed that users did not either. Users were unable to understand the benefits of using Theneo's platform based on the landing page alone.
My role
UX/UI Designer
Tools
Figma
Jira
Usertesting.com
Solution
Timeline
4 weeks
Team
5 UX/UI designers
The design team practiced a high level of user-centered design throughout the entire process, while also maintaining ongoing communication with our client and incorporating their feedback.
We created a new landing page, as well as a pricing page, that was organized, interactive, intuitive, responsive, and modern, just like Theneo's platform. We added interactions and animations to grab the users' attention and highlight key features of the Theneo platform. Most importantly, the new landing page was designed for all users of any technical skill level, like Theneo. The finished product also included a mobile version, as well as dark/light mode interaction and customization.
Discovery
Client interview
The client provided us with a few key goals that she was hoping to achieve with the new design. She didn't like the current website and felt it was too text-heavy, and that the overall look and feel was not representative of the platform. She was hoping for something more interactive and modern.
The client also shared several websites that she particularly liked, as well as a competitor’s website to provide the team with some inspiration.
Insights and pain points
In general, as we predicted, users felt the page was very information-heavy and were not really reading the page. Some were also confused about what the main advantages are of using Theneo, as well as where to find information about pricing.
Some other pain points we identified were:
Confused if the chat was a bot or an actual representative. Would like to know more about cost without having to contact sales
The website is very technical for regular users, it is very difficult to understand what the overall website is about.
According to one user, it doesn't really grab their attention because the website is not very attractive.
The images are "just okay."
Examining the landscape
In order to better understand the current landscape of API documentation tools, we spent some time analyzing what Theneo's competitors did to draw users and showcase their product. We also looked at the landing pages our client liked best and noticed they were all interactive and used organized, condensed methods of displaying informative content.
Usability test: original website
We conducted usability tests to identify the key pain points and users' overall impression of the current landing page. We asked users to explore the landing page and respond to the following questions and tasks:
Q1: What are the user’s impressions of the design generally?
Q2: What do the users think about the interactions/animations of the page?
Q3: What are the main attributes of Theneo?
Q4: Please rate the features of the site on a scale from 1-5 (1 = strongly dislike; 2 = dislike; 3 = neutral, 4 = like, 5 = strongly like)
Q5: How would you describe the design?
T1: Identify the purpose of Theneo. What does the brand do?
T2: Determine the main attributes of Theneo
T3: Identify the payment plans/Set up a payment plan
Ideate
Low-fidelity wireframes
Based on our findings, each member of the team created lo-fi wireframe iterations, focusing on organization, simplicity, and interactivity. Because testing participants felt that the website was too technical and difficult to understand, we wanted to condense the information provided so that the user could still learn all that they need to know about Theneo, but organize it in an easily-digestible and friendly way. This was especially important because Theneo's target users are both developer and non-developers.
After iterating independently, we met as a team to discuss each design and determine our next steps. We narrowed it down to three iterations, which were annotated and presented to the client, who then selected her preferred design. My design was one of the selected three.
Design
Style guide
The team used a color palette and style guide provided by the client, but updated the colors and styles later for greater accessibility.
The end result was clean, organized, and modern, with fixed breadcrumbs to show the user where they are on the page, a simple navigation bar, and a higher priority placed on graphics and images than text. We also discussed where we will be adding animations and interactions as we prototype.
High-fidelity designs
In addition to redesigning the original landing page, we added a pricing page, which was noted to be lacking during the usability tests. To make the website responsive, we also designed the mobile version of the same portion of the website we were designing for desktop.
Hero section
The team decided to divide up the website and each focus on a certain feature, element, or screen. I designed the hero section and company logo banner.
I decided to mirror the hero background to the Theneo logo with the large circles behind the text. I included images of the product, accompanied by a large header and bright call-to-action button. I wanted to instantly grab the user's attention and introduce them to the product's simplicity and usability, something that was noted to be lacking during the usability tests of the original website.
Dark mode
I had the idea to add one more interactive feature: a dark mode toggle and dark UI. Since the Theneo platform also features a dark mode, this was a good way to help the landing page resonate more with the platform itself. I designed the toggle button and dark mode hero section, which the client eventually chose as the default UI when the user first opens the page.
Deliver
Developer handoff
Once our design proved to be successful, we began to annotate the notes needed for the developers. The team made sure that all the interactions in the design were described as how they should react on the website. Sizes for pictures and spacing were also added to the designs so that developers have an accurate reference of sizes.
Prototype
Because our client wanted us to prioritize interactions and animations, we created a Figma prototype as part of our handoff. We wanted the website feel modern and fun, without running the risk of the interactions becoming too overwhelming. Some of these features included an animation in the hero section, an interactive graphic allowing the user to view different programming languages, the dark mode toggle, as well as a number of micro-interactions.
Reflection
Looking back
This was an exciting project to be a part of with a great team of designers. Looking back, there are some key takeaways that I plan to bring with me to future projects:
Ask questions and ask early: Throughout the timeline of this project, our client sporadically provided us with more information, content, and expectations. While these new requests helped improve the overall design in the long run, receiving them upfront would have lessened the amount of time the project took, as well as the energy expended by the team to get everything just right.
Communicate and annotate: This project was completed by a team of designers with a range of availability across multiple time zones. Since it was difficult to find regular times during which we could design together, communicating via Slack and through annotations in Figma was an absolute necessity.
Looking ahead
Now that they have a new style guide and their landing page is complete, I look forward to seeing what Theneo might add to their website, such as a team page and a blog, as well as future iterations of this end-to-end project.
“Thank you again for such amazing work, we really like the updated version. You guys have done an amazing job.”
