Home Page
About Theneo
Theneo is a tool that helps developers and project team members generate API documentation. This API documentation tool is designed for entire teams, from developers to non-technical team members. They contacted our design team because their landing page did not align with their internal platform. Clean API documentation is key for a great developer experience.
Problem
Users cannot immediately tell what the website is about or the product that is being sold.
Although images are pleasing, they don't correlate with the product and don't engage targets users.
Theneo's current landing page does not resonate, nor clearly describe how their tool solves the developer’s problem by simplifying API documentation.
Solution
Break down the context so that it tells a story and add animations throughout the page so that it grabs users' attention.
Clearly describe how their tool solves the developer’s problem by simplifying API documentation.
Process
Discovery
Ideation
Wireframing
Hi-fidelity
Prototype
Developer handoff
Role
UX/UI Designer in a team of 5
Project Details
Project Duration: 4 weeks
Platforms
Desktop
Mobile
Tools
Jira
User Testing
Figma
-
-
Pricing Page
-
Home Page Dark Mode
-
Pricing Page Dark Mode
1. Discovery
1.1 User Testing Questions
Users were asked the following question when they browsed through Theneo’s current landing page:
Do you understand what this website is about?
Are you overwhelmed with the amount of information displayed?
Does this website grab your attention?
Is this page easy to navigate?
Original Theneo Website with Evaluation
1.2 Research and User testing Insights
Key insight: Users can’t quickly understand what the product is about.
Key insight: help users focus their attention on the product’s advantages and main CTA.
Key insight: straightforward navigation and take users on a journey to appreciate Theneo’s story.
2. UX Design
2.1 Low Fidelity Wireframes
As a team, we tackled the lo-fi screens collaboratively. Each team member was tasked with creating two sections of the final screens and then merged our sections into one.
Each team member designed a lo-fi prototype in order to come up with several iterations. We met up to discuss and ideate before presenting the final ideas to the client.
Desktop Pricing Page
2.2 Pricing Page Design
My part of the UX design was to design the pricing page. On the previous website, Theneo did not have a pricing page, so I came up with a design that clearly stated the information the user needed to purchase a plan.
Decisions:
Let users know the different plan options available on the platform
Offer the users the ability to be billed monthly or annually
Inform users of the prices of the different plans
State the features available in each plan
Clear CTA to choose the different plans
Mobile Pricing Page
2.3 Transforming Pricing Page Design to Mobile
In order to integrate the pricing page into a mobile platform, some design changes had to be made. Ultimately, the goal was to keep as much of it the same as the desktop version.
Decisions:
Provide the same information from desktop
Keep card sizing consistent from desktop to mobile
Stack cards in a vertical orientation
Interaction between monthly or yearly billing consistency
CTA with the same styles
3. UI Design
3.1 Style Guide
After the lo-fi prototype was approved, our team began designing the style guide and interactive Hi-Fi prototype.
Decisions:
This style guide is based on Theneo's brand colors.
Make sure the style guide is consistent with the already established brand identity.
Font decisions were made in mind for desktop and mobile platforms.
Colors needed to be compatible with light and dark mode versions of the website.
Organizing and using the master styles on Figma to have consistency.
Within Figma, we updated the design system to ensure color consistency throughout the desktop and mobile Hi-fi mockups.
-
Style Guide
-
Style Guide
3.2 High Fidelity Wireframes
With the style guide for Theneo set, I began to add color and as well as prototyping the pricing page. There were some challenges while designing the pricing page, which led to the following decisions having to be made about the design.
Decisions:
Ensure there was enough contrast between the background color and cards
Use the different colors to provide bullet points and CTA buttons
Hover color changes in order to provide user decision feedback
Design separate colors for compatibility within light and dark mode versions of the website.
Desktop Code Translation Feature
3.3 Animated and Interactive Theneo Feature
I wanted to make sure users knew of this key feature that Theneo has. I made this animation in order to show users how quickly it was to switch their API language. This is animated and interactive as the users can click or drag through the different types of code.
Desktop Pricing Prototype
3.4 Interactive Pricing Animation
After designing the pricing page, I prototyped the pricing page to change according to the users billing choices. Users are able to click through the different billing modes, and the price will adjust. When this change is made, the user is also notified of the percentage they are saving or could be saving by choosing annual billing
Landing Page Background
3.5 Animated Home Page Background
We needed a subtle animation to the top of the landing page without it being too distracting. I developed a prototype for some floating bubbles which resemble the Theneo logo to float in the background. I prototyped it to make sure the animation was smooth and slow to not be distracting. The animation was also made to stop after certain amount of repeats.
4. Prototype
4.1 Prototype
Using Figma we developed a prototype for the client. I made sure to clean up any small spacing, color, misspellings, functionality, and user error.
Theneo Desktop Prototype
Theneo Mobile Prototype
4.2 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.
5. Reflection
5.1 Looking Back
I learned a lot from redesigning the Theneo website. I am happy that the final product came out as intended. This project included a lot of animation and interaction which required meticulous attention to detail in order to make sure it all worked properly. Working with a team made it easier to share ideas with each other and be able to make the best decision for the user and the company.
5.2 Looking Ahead
In future projects, I will take skills and problem-solving skills and apply them to other challenges in the future. Each different challenge a user faces can result in many different solutions, and the best way to reach that solution is through thorough research, collaborating on ideas, and refining iterations. With this mindset and process in mind, the user will be the end beneficiary of the work done by us the designer, and promote a better experience and business growth.