Happy AI
SaaS AI chatbot (ChatGPT-based) website.
OVERVIEW
SUMMARY
With the expansion of technology, artificial intelligence (AI) has become more prevalent. With the usage of ChatGPT, many companies are seeing the benefits that utilizing an AI chatbot can provide for the success of their business.
CHALLENGE
Although Happy AI's website was easy to navigate, it was confusing to understand the product given the dense technical language that was used throughout their page. Almost all of the links were broken and the robots depicted to personify the product options were very off-putting.
PROCESS
-
User flows
-
Competitive Analysis
-
UI Iterations
-
Wireframes
-
Final UI
-
Prototype
-
Style Guide
TOOLS
Figma
FigJam
Adobe Photoshop
Jira
Slack
Zoom
Google Drive
SOLUTION
I led the team of designers to each work on a user flow to tackle the redesign. This consisted of:
-
Home
-
Product
-
Pricing
-
Company
-
Team
-
Contact Us
Although my assigned page was the Product page, due to my role in this project I was heavily involved in all pages of the redesign to ensure the team members had the support and guidance they needed, as well to ensure consistency and best design practices across the product for a seamless experience.
ROLE
-
Team Lead for team of 5 designers
-
UX/UI Designer
DURATION
5 weeks
01DISCOVERY
01.01 TEAM KICKOFF
To efficiently begin our project in an organized and collaborative manner, I created a presentation for our first Zoom meeting to review the project.
This included the client's intake interview, the Project Plan, going over the scope, deadlines, deliverables, timelines to be met, and all other details regarding HappyAI.
COLLABORATION & COMMUNICATION
To ensure efficiency and cohesiveness throughout the project, I conducted weekly team meetings to go over deliverables for the week, questions, guiding/teaching the designers how to make better use of design tools, best practices, etc.
On Slack we communicated daily and we made use of Figma tools such as audio calls and comments to truly design in a collaborative manner and have clear communication in order to create a solid, user-centered design.
Google Drive was very helpful in terms of organizing all design files, meeting recordings, project plan, client questions, etc. Organization, time management, collaboration, and effective communication were factors I ensured to focus on for the optimal design process and team environment.
JIRA
To further ensure organization and efficiency throughout our project, time management, and collaboration in our Agile team, I set up our timeline and deliverables for each team member as well as our team as a whole, on JIRA.
01.02 WEBSITE EVALUATION
We first evaluated HappyAI's original design to understand the current experience as a user, important pain points the client may not be aware of, and useful design elements that can be of benefit for the user.
Overall, we found that the original design was very off-putting. All but one link did not work and it was very difficult to understand what the product was. The dense, technical language made it very confusing.
01.03 COMPETITIVE ANALYSIS
With a clearer understanding in place, it was time to understand what users were already using and how we could best meet their expectations and to find the best design methods for optimal user experience.
I researched competitors of Happy AI to understand
-
How they were approaching their website, product
-
What they are doing to benefit their business
-
What they could improve on
Overall, all businesses were light-themed, featured interactions and animations, showcased testimonials and/or companies/brands' logos for increased user trust. Most lacked UI consistency in one area or another. These were important factors to keep in mind for Happy AI's redesign.
02IDEATION
02.01 USER STORIES
To best understand the user's needs, the client provided us with 5 user stories for the redesign. Each team member chose a user flow to work on throughout the project:
-
As a user, I want to learn about the products offered.
-
As a user, I want to learn about the company.
-
As a user, I want to learn about the team.
-
As a user, I want to be able to view pricing.
-
As a user, I want to be able to contact the company.
I worked on User Flow #1, "As a user, I want to learn about the products offered."
02.02 USER FLOWS
We each created a user flow for our user stories, for a total of 5 user flows. We created flows for how the website currently was set up and other flows with how we thought the the flows should be.
I worked on user flow #1. This helped me understand how a user would navigate the app and to account for every step and screen. I focused on the simplest, most straightforward way for the user to achieve the task.
02.03 LOW-FIDELITY WIREFRAMES
We created LoFi wireframes prioritizing simple, clean, straightforward designs that would allow the users to find the information they needed and to complete the form as smoothly as possible. That was iterated several times until the results were satisfactory. For several screens, we provided the client with options to select the best option for their business needs.
Due to my role as leading Junior Designers, I provided mentorship and guidance to the designers towards designing their screens:
HOME
After our collaborative team call ran short, I designed this screen for the most part to provide the team with visual guidance for creating their wireframes:
-
For this, I based it off findings of competitor's designs, overall homepage product inspirations
COMPANY PAGE
The team member didn't know what to include.
-
I assisted in researching what company pages normally include, used copywriting skills to fill in the company's about, mission, and belief sections. I also ensured the layout had a natural and intuitive flow, and went along with the 8pt grid for a clean and consistent UI.
PRICING PAGE
The team member had trouble figuring out designing a toggle for the pricing options and the pricing plan containers.
-
I researched toggle inspirations and designed an option that we were both happy with and that matched the current UI. We collaborated with another team member to redesign the pricing containers and provide options for that would best match the UI and have one stand out in a way that still consistent with the others.
PRODUCT PAGE
This was my assigned page. I researched inspirations from competitors, eCommerce, and SaaS product websites to understand useful elements to create a clear, comprehensive, and user-friendly product page.
TEAM PAGE
The team member experienced difficulty with best practices, working within 8pt grid and how to design their page.
-
I assisted by researching inspirations for various layouts for a team members' page. I created a video guiding and showing this designer how to work within an 8pt grid and collaborated with another designer to create 3 other variations for this page considering the tight timeline that was in place.
CONTACT PAGE
The team member was struggling to understand what could be included in the contact form and page layout. The page needed a cleaner design, contact options, and lacked better UX/UI practices.
-
I provided the team member with guidance and resources --to include a notification for informing the user when the form has been successfully submitted, various layout options, including error messages, input field titles. We collaborated in creating a design that had their initial design as a foundation, then added the required elements for an intuitive user experience.
03DESIGN
03.01 UI INSPIRATIONS
To gain a better understanding of potential UI styles, I researched inspirations based off several AI websites.
Overall:
-
Clean, modern, open, breathable
-
White backgrounds
-
Use of gradients
-
Cool color palettes; mostly use of purple
-
Bold, large typefaces for headers
-
Bright and clear CTAs
-
Plenty of use of visuals
-
Clear and concise for clarity; simplifying the product for the users
03.02 UI ITERATIONS
To provide options for the client to select from, each team member worked on a UI iteration of the Homepage. Three were selected for client submission for enough options without it being overwhelming.
To remove any bias, I removed all team members' names and provided the client with options "A", "B", and "C". The client selected my UI iteration, which included a clean, modern style with some 3D and neumorphism-style elements; plenty of white and blue, with hints of purple as seen in most AI websites to create a trustworthy, modern, yet approachable feel.
03.03 DESIGN SYSTEM - STYLE GUIDE
Throughout the project, we created, maintained, and added to the Style Guide. This also included adding components for engaging interactions.
COMPONENTS & INTERACTIONS
Throughout the project, we used components in order to design efficiently, in an organized and collaborative manner with the team. We also focused on creating interactive components for element feedback, increased enjoyment when navigating, and for optimal user experience.
03.03 HIGH-FIDELITY WIREFRAMES
We then created the HiFi wireframes from the MidFi wireframes, based on my UI iteration; although each team member worked on their specific user flow, we created a consistent design for a seamless experience via consistent close collaboration.
As with my prior work on this project, I fully worked on the Product page and collaborated closely with the team, guiding them throughout as needed to ensure their designs were consistent with the UI style.
03.03 FINAL DESIGNS
I created High-fidelity screens from the previous screens. I added gradients for creating a sense of playfulness yet calm, colors were chosen with psychological effects in mind, in accordance to the topic.
04DEV HANDOFF
04.01 PROTOTYPE
To ensure the designs worked well, I created a prototype of the website design and ensured to implement plenty of interactions as seen on AI websites and for optimal user engagement and delightful experience.
UPDATED WEBSITE PROTOTYPE
ORIGINAL WEBSITE
ORIGINAL WEBSITE
03.04 CLIENT HANDOFF
With the finalized design screens in place, we worked on annotating the screens to ensure they could be properly developed. For this, each element within the page was measured and noted, along with any animations, and generalized information that's useful for the developers to keep in mind.
05REFLECT
05.01 PROJECT DEBRIEF
To finalize the project, I conducted a project debrief with the design team to go over our work on the project; what we did well and what we can improve on to keep in mind for the future.
05.02 REFLECTION
ADAPTIVE PROBLEM-SOLVING
There were a few challenges that arose during the initial-to-mid stages of the project, so as Team Lead it was important to efficiently problem-solve so as to not gear from the timeline.
TECHNICAL TROUBLE
As the team and I were working on our first deliverable, the website was down for several team members, therefore they were unable to work on it. I had taken a video recording prior-to and hadn't refreshed my browser.
To solve the issue, I sent the video to the team and offered to do individual video calls so they were able to navigate the website and complete their deliverables.
CLEAR COMMUNICATION
At this time, the client also informed us that we would be using a different website as guidance to what they would like to include. This brought up further questions that we needed clarity on, considering prior lack of clarity on the product, and conflicting client responses.
To resolve this the team and I strongly collaborated to be very clear on the client questions so there was no room for error nor misunderstanding.
FINAL THOUGHTS
With ChatGPT being a trending topic and AI products on the rise, it was a great experience to work on HappyAI and be Team Lead for this product. I was able to gain a better understanding of what AI website designs generally involve -- high interactivity and animations, use of shadows-- and learn how to implement this all into the designs for optimal user experience and trust with the product.
If given more time on this project, I would have loved to redesign and add more pages that were out of scope for this phase, such as an FAQ, user signup, login, and of course, the chatbot.
Despite the challenges that arose during this project, with the strong collaboration, proactivity, and focus on creating the best product, the team and I were able to design a product that superseded the client's expectations.
"
"
With these things in mind, working with a collaborative team in an efficient manner made the project a true success. This project further emphasized the importance of clear and direct communication, and provided me with a variety of ways to guide, be a better team lead, and a better UX/UI designer.