Responsive Website for an SAAS Platform

Sowmya Raghunathan

0

Web Designer

UX Designer

UI Designer

Figma

✨ABOUT THE PROJECT

Brand : ​Tropical AI is a new brand aiming to create an online one-stop-shop for all Generative AI Tools.
Product : ​A responsive website to function as a platform for bringing all AI Tools together.
Main Goal : ​To design a custom website with a defined experience to find any tool based on the needs of the users. 
My Role : Independent User Experience and Interface Designer

✨BRAND BACKGROUND

This was a new venture, ideated by a group of developers. They had decided on the brand name and designed its logo along with the basic colour structure. As the natural next step, they needed a website that could adapt to various devices with an intuitive flow.

✨THE CHALLENGE

The idea of the stakeholders was to create a platform to bring all AI Tools to one place. At its core, the idea sounded like a 'catalogue' of Generative AI Tools. It is in fact, a catalogue of tools but, the challenge was in creating a website that would give a more enhanced experience of browsing, discovering and connecting with the tools and creators.

✨GOALS AND OBJECTIVES

Design a custom website for listing & categorizing all Generative AI Tools with an enriched experience for users to browse, use and connect with tools based on their needs.
Maintain Brand consistency by using the colours & font from the Logo.

✨STAKEHOLDERS SAID...

The landing page of the website must immediately give the users their space to start searching for the tools they need.
We need a separate or exclusive section for signed-up users. We want to give a glimpse of what's possible for guest users.
We need a space where users can discuss about the tools, their uses and experiences. They also need a forum to connect with tool creators and share feature requests and feedback.

✨DESIGNING THE SOLUTION...

❄️BRAND IDENTITY

This was a new Brand initiative which did not have any presence on the digital world yet. However, the stakeholders had created their logo, colours and fonts already.
Red and cyan were chosen as primary and secondary colors to evoke vibrancy, while Montserrat font was selected for its bold yet professional appearance and readability across devices.

❄️BRAND LOGO

The logo was also designed by the stakeholders already. They decided to use a combination mark here, with the brand name 'Tropical' and adding an 'anchor' to represent the letters O and P together. This choice was made to represent 'tools', as they aimed to build a platform for AI Tools. 

❄️USER RESEARCH

With the growing AI Arena, the need for such technology and tools has already justified the need for creating such a platform. So, the user research part was more focused on what experience the users expect in terms of browsing, searching and finding the tools based on their needs.
Here, as the stakeholders had done their research and had a set of desirable features and websites, my part was to evaluate and keep it as a base to design a unique experience for this website.

✨CUSTOM DESIGN BEGAN...

As I was designing for a platform which is new and hadn't onboarded any tool yet, I used brand colour blocks and generic gradient images to represent various elements. The texts that needed to be shown also depended on the tool so, I used place holders like 'Lorem Ipsum' in someplaces and added content like 'Company Name', 'Tool Name' and such to indicate actual content placement.

❄️ACTION ORIENTED BANNER SECTION

The primary aim of the website was to make sure that anyone who landed on it for the first time would instantly get that it's all about finding the perfect AI tools.
From my understanding of general user psychology and specific user research, it was clear that writing conventional headings and paragraphs to explain may not work as the natural user behaviour is to skim through quickly to understand.
So, I decided to add an asymmetric headline to capture the attention better and included a prominent search bar as it would give users the space to try it out immediately.

❄️GUEST AND SIGNED-UP USER EXPERIENCE

To add value to signed-up users, we added 2 differentiating factors right on the homepage.
We added a glimpse of the search experience for guests by showing a few tools when they click on the search bar and then we added a prompt to help them continue by signing up.
For the signed-up users, we added a section on the homepage 'Trending Categories' to show top tools segregated by popular categories.

❄️FORUMS FOR EVERYONE

The stakeholders wanted to give a community experience to guest users as well. So, we decided to add a 'forums' page which would be a free form open for all users to discuss anything about Generative AI tools. Keeping with the branding, I incorporated the 'tool' icon from the logo as an anchor here which when pulled up, brings the whole forums section into focus!

❄️DESIRE BOARDS FOR PREMIUM USERS

We initially decided that the site needs to be more than a tools catalogue. For this the stakeholders wanted to add a discussion section where users can connect with tool creators and share their feedback and feature requests. Since they wanted to keep this section specific to premium users, we added this as a section separate from forums. I also added the fuctionality of posting images and videos to help users explain their feedback better. 

❄️FUTURE OF TROPICAL AI

What we worked on here was an MVP model of the website, to focus on features and functionalities. The next step would be to get this version developed and conduct a user testing session to understand if the design is being perceived as intended.
Continuous improvements to the site in terms of adding new sections like launch events for new tools, live chat, and consistent optimizing of the interface would help keep the spotlight on the brand.

✨WHAT I LEARNT

When designing for a new brand, there's a need to completely understand the inspiration from other websites all the while ensuring that the design is original and unique to the Brand.
For an MVP version, the stakeholders need a responsive site where the sections and elements look exactly the same with no change in layout across device sizes. Designing adaptable versions of the designs, that is, the best possible display and layout changes for each device could be done as iterations.
Like this project
0

Posted Mar 29, 2024

Tropical AI is a new brand aiming to create an online one-stop-shop for all Generative AI Tools. I worked with the brand to design a responsive custom website.

Likes

0

Views

1

Tags

Web Designer

UX Designer

UI Designer

Figma

Travel Buddy | Sowmya Raghunathan
Travel Buddy | Sowmya Raghunathan
Shopify Website for an Aussie Eco Brand
Shopify Website for an Aussie Eco Brand