AutoMind

AutoMind

AutoMind

AutoMind

A landing page to introduce an AI-powered productivity management platform.

A landing page to introduce an AI-powered productivity management platform.

A landing page to introduce an AI-powered productivity management platform.

A landing page to introduce an AI-powered productivity management platform.

Objective

Objective

Design a landing page to introduce an AI-powered productivity management platform, aiming to attract early adopters.

Design a landing page to introduce an AI-powered productivity management platform, aiming to attract early adopters.

Clients

Clients

AutoArk η ζ΅·ζ— η•Œζ–ΉθˆŸζ™Ίθƒ½ζŠ€ζœ―ζœ‰ι™ε…¬εΈ

Project Timeline

Project Timeline

8 weeks, Nov 2023 - Dec 2023

Category

Category

UX/UI | Landing Page Design

Tools

Tools

Figma, Adobe Ae/Ps

Highlights

Highlights

Phase 1 - Discover Stage

Identify the Opportunity for AutoMind Landing Page

Phase 1 - Discover Stage

Identify the Opportunity for AutoMind Landing Page

Phase 1 - Discover Stage

Identify the Opportunity for AutoMind Landing Page

Phase 1 - Discover Stage

Identify the Opportunity for AutoMind Landing Page

Challenge 1

How can we effectively differentiate Automind from other AI-powered productivity tools?

Challenge 1

How can we effectively differentiate Automind from other AI-powered productivity tools?

Challenge 1

How can we effectively differentiate Automind from other AI-powered productivity tools?

Challenge 1

How can we effectively differentiate Automind from other AI-powered productivity tools?

Solution

β€’ Conducted competitive analysis of other AI-powered tools' websites to identified their weaknesses.
1. Insufficient explanation of features and functions or too technical description.
3. Inconsistency
in visual style.
4. Lack of intuitiveness in guiding
users to start using the product, especially for first-time AI-tool users.

Solution

β€’ Conducted competitive analysis of other AI-powered tools' websites to identified their weaknesses.
1. Insufficient explanation of features and functions or too technical description.
3. Inconsistency
in visual style.
4. Lack of intuitiveness in guiding
users to start using the product, especially for first-time AI-tool users.

Solution

β€’ Conducted competitive analysis of other AI-powered tools' websites to identified their weaknesses.
1. Insufficient explanation of features and functions or too technical description.
3. Inconsistency
in visual style.
4. Lack of intuitiveness in guiding
users to start using the product, especially for first-time AI-tool users.

Solution

β€’ Conducted competitive analysis of other AI-powered tools' websites to identified their weaknesses.
1. Insufficient explanation of features and functions or too technical description.
3. Inconsistency
in visual style.
4. Lack of intuitiveness in guiding
users to start using the product, especially for first-time AI-tool users.

What We Did

#1: Insufficient Explanation of Features and Functions
Utilize visuals like tutorial animations and simple language to explain the features.

#2: Lack of User-Friendliness for First-Time AI Tool Users
Interactive animations or walkthroughs to help users understand the basic functionalities.


#3: Inconsistency in Visual Style and Design Elements.
Developed a comprehensive visual style guide that defines color palettes, fonts, iconography, and others.
Used whitespace effectively to enhance readability and overall aesthetics.

What We Did

#1: Insufficient Explanation of Features and Functions
Utilize visuals like tutorial animations and simple language to explain the features.

#2: Lack of User-Friendliness for First-Time AI Tool Users
Interactive animations or walkthroughs to help users understand the basic functionalities.


#3: Inconsistency in Visual Style and Design Elements.
Developed a comprehensive visual style guide that defines color palettes, fonts, iconography, and others.
Used whitespace effectively to enhance readability and overall aesthetics.

Phase 2 - Define Stage

Understand the Features and Employ the Storytelling

Phase 2 - Define Stage

Understand the Features and Employ the Storytelling

Phase 2 - Define Stage

Understand the Features and Employ the Storytelling

Phase 2 - Define Stage

Understand the Features and Employ the Storytelling

Challenge 2

After communication with stakeholders, we summarize Important elements andfeatures that need to be displayed.

β€’ Save and archive information anytime, anywhere.
β€’ Receive AI-generated summaries and more interactions.
β€’ Connect to users' reading and writing workflows.

But how to introduce complex functions to users, especially those unfamiliar with AI tools?

Challenge 2

After communication with stakeholders, we summarize Important elements andfeatures that need to be displayed.

β€’ Save and archive information anytime, anywhere.
β€’ Receive AI-generated summaries and more interactions.
β€’ Connect to users' reading and writing workflows.

But how to introduce complex functions to users, especially those unfamiliar with AI tools?

Challenge 2

After communication with stakeholders, we summarize Important elements andfeatures that need to be displayed.

β€’ Save and archive information anytime, anywhere.
β€’ Receive AI-generated summaries and more interactions.
β€’ Connect to users' reading and writing workflows.

But how to introduce complex functions to users, especially those unfamiliar with AI tools?

Challenge 2

After communication with stakeholders, we summarize Important elements andfeatures that need to be displayed.

β€’ Save and archive information anytime, anywhere.
β€’ Receive AI-generated summaries and more interactions.
β€’ Connect to users' reading and writing workflows.

But how to introduce complex functions to users, especially those unfamiliar with AI tools?

Solution

Employ storytelling with intuitive visual and interactive tutorials that align with the brand tone.

β€’ Firstly, set the structure of the landing page.
β€’ Then, I developed the wireframe and mood boards with key words.

Solution

Employ storytelling with intuitive visual and interactive tutorials that align with the brand tone.

β€’ Firstly, set the structure of the landing page.
β€’ Then, I developed the wireframe and mood boards with key words.

Solution

Employ storytelling with intuitive visual and interactive tutorials that align with the brand tone.

β€’ Firstly, set the structure of the landing page.
β€’ Then, I developed the wireframe and mood boards with key words.

Solution

Employ storytelling with intuitive visual and interactive tutorials that align with the brand tone.

β€’ Firstly, set the structure of the landing page.
β€’ Then, I developed the wireframe and mood boards with key words.

β€’ Design the information architecture, and understand the storytelling sequences.

β€’ Develop the wireframe.

β€’ Design the information architecture, and understand the storytelling sequences.

β€’ Develop the wireframe.

Mood boards focus on the #spirituality #mystic #intelligent #modern, etc… to help set the visual tone of the landing page.

Mood boards focus on the #spirituality #mystic #intelligent #modern, etc… to help set the visual tone of the landing page.

Early Version of Design

Early Version of Design

Final Design

Final Design

Final Design

Final Design

Reflection on This Journey

Reflection on This Journey

Reflection on This Journey

Reflection on This Journey

The design process for AutoMind's landing page has been an insightful journey, bringing forth both successes and areas for improvement.

Next Step: Ensuring that the landing page maintains its integrity across various devices was a key considerations. Going forward, continuous testing on different screen sizes and resolutions will be essential to refine and optimize the responsive design.

The design process for AutoMind's landing page has been an insightful journey, bringing forth both successes and areas for improvement.

Next Step: Ensuring that the landing page maintains its integrity across various devices was a key considerations. Going forward, continuous testing on different screen sizes and resolutions will be essential to refine and optimize the responsive design.

Open to new projects and collaboration.

Β© 2024. Designed by Tingyi Li

Open to new projects and collaboration.

Β© 2024. Designed by Tingyi Li