DESIGN PROCESS
The design process is never linear
Due to the complexity and high standard of this project, we spent over 2 months to self-educate and scope before determining the final plan. At each stage, we kept refining our product while iteration.
DESIGN PROCESS
Role
UX/UI Designer
Brand Designer
Project Status
B2C product currently in the testing phase
Duration
3 months
March 2023 - June 2023
Tool
Figma
FigJam
Adobe Illustrator
Adobe Photoshop
Team
1 Product Manager, 1 Project Lead, 2 Engineers, 1 Quality Assurance
OVERVIEW
GenAI Hub
In response to the rapid expansion of the AI tools market, Joblogic-X Corporation envisions creating an AI tools directory platform to satisfy the increasing demand from users to find suitable AI solutions. In the short term, the primary objective is to provide personal users with effortless discovery, evaluation, and access to a diverse array of AI-powered tools that cater to their unique requirements. In the long term, this AI tool platform is envisioned to offer comprehensive support for companies to help them promote products and boost exposure.
A web platform that helps people discover and share the best new AI tools, news and tech gadgets.
DESIGN PROCESS
The design process is never linear
Due to the complexity and high standard of this project, we spent over 2 months to self-educate and scope before determining the final plan. At each stage, we kept refining our product while iteration.
CHALLENGE
How might we build a directory platform that makes it easier for users to search and choose the right AI tool from a wide range of options?
DESIGN PROCESS
The design process is never linear
Due to the complexity and high standard of this project, we spent over 2 months to self-educate and scope before determining the final plan. At each stage, we kept refining our product while iteration.
INITIAL THINKING
DESIGN PREVIEW
Feature 01
Homepage, A Start Point for Featured AI Tools, Daily Updates and News Highlights .
It helps connect users with the right AI tools quickly and help AI tool providers gain visibility. Users can start with search and filter system, browse tools from the comprehensive AI tool listings, keep informed about the latest trends and development by reading "Today's AI News" and "Tools Added Today" sections.
Feature 02
Search Engine, Filter and Sorting System
The search engine presents Top Categories and Hot Search , Search Association to provides insights for users during search. Category filters and sorting options on the side further narrows down users search results and help locate desired tools.
I also design solutions for business customers (AI Tool Providers) , Check below!
Feature 03
An AI tool detail page
The tool detail page communicates the unique selling points and key differentiators via concise introduction, media previews , feature lists, user cases, user rating and reviews, and alternative tools. Meanwhile it offers side advertising spots for other tools to increase exposure.
01. Emphasize
Research Goals
For Personal Users
-
Discover main approaches people find AI tools online
-
Identify user pain points and needs during the searching process
-
Analyze influencing factors and key criteria for tool selection
Primary Research
User Interviews & Key Findings
I interviewed 8 participants with open-ended questions and 2 tasks to learn more about their existing AI tools searching behaviors, thoughts and feelings. Here are 5 significant findings.
02. Information Overload
37.5% of Users feel overwhelmed by the abundance of AI tools available and struggle to find a start point for their needs
01. Search Engine
87% of users highly relied on fuzzy search by typing key words and relevant features.
03. Rating & Review System
75% of Users will check ratings and reviews, and other similar tools to compare before make decisions.
04. Unclear Differentiation
Users feel difficult to differentiate between AI tools because of unclear information provided.
05. Lack of Guidance
Users not familiar with AI tools would look for recommendation and guidance in the interface
06. Intuitive Filtering System
Users prefers not overly granular filter and sorting options. Price matters a lot here.
User Persona
Meet Our Primary User, Sam, A Marketing Manager in San Francisco.
After getting insights from our users, I created an easy to understand user persona as our primary user to represent the target market based though our target users include professionals, researchers, engineers, and even entrepreneurs in different industries,.
Feature 04
Monetization Strategies: Submit Your AI Tool & Choose Promotion Plans
Submit page including clear instructions, forms and FAQ sections streamlined the AI tool submission process and allows platform admins to review. Moreover, Get Featured page enables business customers to easily compare and select their ideal promotion plan from distinguishable pricing tiers and clear benefit comparisons .
02. Brainstorm
03. Define & Ideation
Information Architecture
Prioritize Features, Organize Site Structure, Iterated 3 times
Drawing all insights and potential risks from user research, I built the information architecture tp visualize my ideas, addressing opportunity points for both Customer-end and Business-end users with detailed information.
Competitive Research
Find Opportunities from Competitive Analysis
Next, learning from strengths and weakness of competitors is very important for me to explore potential features and opportunities, prevent mistakes and develop a go-to-market strategy. So I selected 3 direct competitors and 2 indirect competitors to analyze.
04. Design
Wireframe
Low-Fi Wireframes for Key Pages & Features
I visualized my ideas and website layout, interaction patterns with wireframes. To polish my design, I explored and created several versions for each page before report to stakeholders and conduct testing.
User Flow
User Task, and Site Flow
To better validate my information architecture, I designed user flows by considering various scenarios potential user attrition, drop-off points, and exceptional reverse processes.
Users have no specific idea or with little knowledge in this area.
Users have specific goals or know the tool name already.
Iteration
Expanded Search Engine Visual Hierarchy
The priority to present information should be: Direct Results > Popular/Suggested Results = History > Recommended tools. Solutions should align users reading habit and not disrupt their active search path.
Tool Details & Review Section Layout
To fully use the space of the website page and encourage user engagement, I designed and iterated "Tool Major Information" Section and "Rating & Review System" below.
Card UI System
To convey clear and concise tool information, I designed the card UI system depending on domains, such as Tool, News, Daily Update.
Search Bar Interaction Design
For Business Customer Solution
For here due to my objectives, I just set a foundation for the long term development of this platform. This design here is a MVP.
AI Tool Detail
-
Display the tool overview information with official video and images
-
Promote this tool (discount) banner
-
Descriptions of Feature, User Case, Company Information
-
Recommend tools from same company, relevant AI news on the side
-
Tools Rating and Reviews
-
Recommend alternative tools
-
Advertisements can be placed on the side
User Account
-
Display user favorited tools and news.
-
If nothing favorited, display emotional reminder
-
Generate personalized tools recommendation based on user preference
Other Works
🎧 Enjoy and control real performance
🚗 Find your car smartly w/o internet
Prototype
High-Fidelity Prototype
I created visual style and prototype all important key pages to set up a foundation for future iteration. To meet future trend and user needs, I designed both light mode and dark mode.
GenAI Hub Homepage
-
Efficient Search Engine support exact AI tool search and offer search suggestions
-
Hot Search recommendations
-
Tool Category Filter on the side
-
Sort by price/popularity/newest
-
AI Tool Listing for browse
-
Daily Update for News & Tools
The Insights
How to optimize search results?
01. Enhance search engine interactions
Add search suggestions, search associations, hot search, and history.
02. Narrow down/refine search results
Implement effective categorization, filtering and sorting options. Avoid excessive subcategories and need to group similar ones.
How to improve informed AI tool selection process?
01. Provide clear & concise AI tool information
Highlight key features, tags, image/video, short description to help users differentiate tools in a short time.
02. Display rating, reviews, popularity, & verification
Standard tool evaluations to build trust and credibility
03. Offer alternative tool options
Allow users to explore and compare other tools just in case the one doesn't satisfy their expectations.
How to give proper guidance in the right time?
01. Show featured, popular and relevant tools
Integrate recommendations across the platform.
03. Add daily update of AI tools and news section
This indirect guidance develops user's long term interest for AI tools.
02. Provide personalized recommendation
Help user discover new/random tool based on previous search history and favorite tools.