SaaS Website Design
Modernizing User Experience and Aligning Marketing Strategy with Data-driven decision
My Role
Task Lead
UX Designer
Internship
My Skills & Tool
Design System, Wireframing, Lo-fi prototyping, Hi-fi prototyping, UX Design
My Team
Angel Lin, UI Designer
Ethan Wee, Front-End Developer
Charlotte Tao, CTO
Time
07/2023
(2 weeks)
Project Overview
During my internship at Trusli, I took on the website re-design of Trusli AI contract. My role during this re-design was to modernize the overall UX of the website, as well as create a positive user journey that aligns with their existing marketing strategy. On top of the development team, my team for this project included product manager and UI designer.
About Trusli
Trusli is an industry-leading contract automation platform powered by LLM technology, designed specifically for in-house legal teams. It is the only end-to-end integrated solution that empowers enterprise teams to leverage their own knowledge in automating contract drafting and reviews (patents protected).
Problem
🔥 How might we make the Trusli website more engaging for potential users to request a demo?
Why a New Website Design?
The old website did not provide the expected information to the users
Based on the Google Analytics data available in the website’s backend, it was evident that there was a high drop rate on the main page. Trusli was established in 2020, and initially developed a different product. However, in 2023, the company decided to pivot its product, resulting in a mismatch between the information on the website and the current users’ expectations. This disparity led to a high drop rate on the website.
The old website failed to convey the product's value to the users.
In the fundraising stage, Trusli could not display the user flow, interface, and client testimonials that showcase how their product works on their website. Moreover, their competitors frequently visited peer websites to gather information about the latest product developments, including detailed features and usage instructions. This made it difficult for potential users to understand and recognize the value that Trusli’s product could offer to their businesses.
Solution
My solution is to identify the best practices for SaaS startup websites, focusing on redesigning the information architecture and layout of the homepage and product pages.
​
See the shipped website here:
Research
Research 1: User Types
To deliver a high-quality site, I conducted user interviews and desktop research and identified 2 user types to consider. Delivering to the following user groups would allow me to design a website that successfully met our needs.
Research 2: Competitive Analysis
To gain inspiration and identify best practices for our website redesign, I conducted a competitor analysis. I began by looking at the websites of several other AI-generated task management services, including Ironclad, Outlaw, and ClipUp.
Research 3: I Initiated a Quick Study on the Homepage Design and Layout of the SaaS Platform and the Conversion Rate for the Trusli Website Redesign
Purpose
-
Transforming an anonymous website visitor into a known prospect
-
Standard best practices and key design elements that build trust and convert visitors
Key Takeaways
-
The Trusli homepage needs to be clearer to avoid turning off potential customers.
-
The website only supports visitors at certain stages of the customer journey.
-
The only clear next step on the website is the call-to-action (CTA) to schedule a demo, which causes Trusli to lose prospects in the earlier stages of the customer journey.
-
Most prospects begin their customer journey by learning how the product addresses their needs.
-
Without this information, Trusli won't attract late-stage prospects who are ready to schedule a demo.
-
Consequently, Trusli is receiving few qualified prospects from demo signups, resulting in a lack of paying customers generated by the website.
Information Architecture (IA)
To ensure that the Trusli website was user-friendly, I followed a user-centric approach to define and test the IA. The first step was to map out the user navigation through a user flow diagram. Then, I sketched the functionality of each page to ensure that it would work well. I used a card sort method to re-group the existing website IA, which made it more cohesive and helped in forming a new navigation. Throughout the ideation process, the site architecture was constantly changing, which meant that I had to adapt quickly to the changes that were being made. I helped my team to think critically about user pain points and the user journey through the website. As a result, pages were being merged, added and deleted to create the best user experience possible.
Wireframing
Once I had identified the key pages and functionalities required for our new website and confirmed them with the CTO, I created simple, low-fidelity wireframes. These wireframes enabled me to explore different layouts and structures and consider various design options before designing the remaining web pages.
Low-fi Wireframes Iterations - Homepage
Iteration 1
Pros
This homepage design can quickly convert interested website users into potential customers.
Cons
This homepage design may make website users feel a little aggressive, because they have to leave contact information before requesting a demo before seeing too many product descriptions.
Iteration 2
Pros
The design of this homepage can highlight the company's product appeal because it has a complete product image display area.
Cons
During fundraising, the company may not disclose all product details, but only showing the product image may deter users from requesting a demo due to lack of information.
Final Design
Pros
The homepage design can showcase key features of each product without revealing too many details.
Low-fi Wireframes Iterations- Product page
Iteration 1
Pros
This product page design allows users to focus on the immersion of using the product.
Cons
The usage process of this product is relatively complicated, and key images start in a confidential state, which is not suitable for placing images in a large area.
Iteration 2
Pros
The product image of this product page design is on the left, allowing users to immediately see a demonstration of the key functions of the product.
Cons
This product page is going to display a legal contract product. The target users are accustomed to reading from the left side, and their habit is that textual information is better than charts.
Final Design
Pros
This product page design is in line with the information reading habits of users with a legal background: the left is a summary of key points, and the right is an image.
Style
I decided to make some changes to the product's website. Since they are law products and require more explanation, I wanted to ensure that the website was easy to understand. I chose colors that would convey trustworthiness, technology, and intelligence, and added a secondary dark grey for text that provides further explanation. To maintain consistency, I decided to stick with the trendy and reliable Monstserrat font for typography throughout the website.
Design
Putting everything together, I began to design each web page in Figma, using the wireframes for layout, the design system for styling, and the illustrations for graphics. This part of the process required me to sync with all my team members on a frequent basis and provide detailed design updates to stay on track and receive feedback.
Reflection
This project was an amazing learning experience for me in so many ways. Overall, our team accomplished an incredible amount of work considering our relatively short timeline of 6 weeks. I personally learned a lot about the process, collaboration, and working with my diverse team.
Key Takeaways
I Used CRO Data to Inform my Website Redesign Strategy
I am proud to say that learning about conversion rate optimization in UX design has been one of the most impactful experiences in my career. Working with marketing experts, content writers, and lawyers for the first time has allowed me to develop and hone new web optimization skills. I am confident that these skills will prove to be valuable assets for any project that I undertake in the future.
I Drove and Led the Task by Data-driven Reasoning to Lead Internal Communication
As I began working on this task, I quickly realized that our internal team needed to feel more engaged and invested in proposals, while also prioritizing the website redesign. Given our company was current fundraising efforts, the website redesign was critical in attracting target users to request a demo and leave their contact information. Proactively, I dove into the Google Analytics data of the old version of the website backend, reached out to the marketing team to discuss website revision success data indicators, and analyzed the backend funnel data of the entire website and corresponding pages. By using the current Google Analytics performance of each page and setting goals, I was able to create a comprehensive action plan. This approach not only increased communication efficiency but also enhanced the persuasiveness of the CEO and CTO.