UX/UI Design
Product Design
Case Study
2023
Home Page Home Page Home Page Home Page Home Page Home Page Home Page
Home Page
SAM. Safe Autonomous Mobility
Products Products Products Products Products Products
Fleets Fleets Fleets Fleets Fleets Fleets Fleets Fleets
About Us About Us About Us About Us About Us About Us
Design System
768
360
2560 & 1920
1440
____eVTOL
____aircraft
____drone
____self-driving automobiles
____fleet
[This design epitomizes contemporary trends while prioritizing aesthetics and functionality.]
[Purposeful integration of pastel hues not only enhances the visual appeal but also ensures a user-friendly interface.]
[The sophisticated use of pastel shades, paired with lighter tones, fosters an aura of airiness and purity. Typography holds a crucial role, ensuring clarity and ease of comprehension.]
[By employing sleek, readable fonts, the website exudes professionalism. Careful placement of content alongside captivating visuals forms a seamless composition, engaging visitors and sustaining their interest.]
[The minimalist approach coupled with pastel colors establishes a contemporary and elegant image, catering to the needs of today's user who values quality, convenience, and aesthetics.]
Design System
Our design system is the foundation of our UX, uniting all sections with 25 key components. These meticulously crafted elements seamlessly integrate across our interface, ensuring a cohesive and user-friendly experience. Customized for diverse interfaces, these components maintain design integrity while adapting flawlessly to various contexts.
Background
SAM's landing page design epitomizes contemporary trends while prioritizing aesthetics and functionality, uniquely tailored to the technological and data-driven essence of the company. They have launched their product targeted on drone insurance sector. It holds paramount importance for them that their clientele gains comprehensive exposure to both their company and its diverse range of cutting-edge products. They aspire to broaden their business scope, leveraging their machinery and data-driven learning to empower a wide range of autonomous driving processes, including but not limited to eVTOL, aircraft, and self-driving automobiles.
How we work with stakeholder?
We have adopted a thorough stakeholder engagement strategy for our project's success. This involves identifying stakeholders, understanding their needs, maintaining regular communication, building strong relationships, and actively seeking feedback.
Interview
User testing
UI design
UX stategy
40%
30%
5%
25%
Stakeholder
Engagement
Traits
Short-comings
Competitive analysis
I conducted a Competitive Analysis to examine specific queries related to the primary objectives. This involved scrutinizing the content and information architecture showcased by these companies to exhibit their expertise, understanding how they articulate their strengths, and observing the visual styles utilized to convey their uniqueness.
Data management and analytics
Innovative solutions with aerial-based data
AI governance software assisted decision making
Live drone flights and pilot data
Introduction
Target Market
Services
Tech Overview
Product traits
Reviews
Case study
About us
News
Contact us
Pic+text
Intro card
--
--
Product traits
Brands+comments
Intro card
--
Intro card
Register
Pic+text
Intro card+ diagram
--
--
Bullet points
Brands+comments
Intro card
--
--
Register
Pic+text+diagram
Text
intro text
--
Bullet points
Reviews
Case study
--
Video
Request a demo
Text+diagram
Brand logo
Video+ Diagram
Bullet points+diagram
Diagram
--
--
--
--
Purchase
Design
Apparence
Image
Text
Diagram
Video
Interaction
OBE
(Onboarding Experience)
Bottons
IH
(Information Hierarchy)
Company
How do they show their benefits?
How do they represent their appearance?
Traits and shortcomings
Insights
S
O
W
T
Sam's market is more international, spanning across North America, East Asia, Europe, and other regions.
The industry is very cutting-edge and emerging, with numerous directions for development.
There weren't many case studies or ongoing projects available for showcasing, which might lead users to question the company's capabilities and business relevance.
Competitors of the same scale have a more concentrated focus within a specific market. Hence, their website's information is very concise and clear.
Redefine my goal:
Explore the optimal information architecture that strikes a balance between showcasing the company's professional domains and presenting its products effectively.
How to highlight the characteristics of a startup while ensuring its scalability, so that users can both appreciate the company's current achievements and understand its future growth prospects.
How to, while keeping an overall simplicity, use color and text design to create a sense of security, reliability, and realism, while also reflecting the company's technological background.
User entered
Register
Bannar
Hero
Intro
Operations
Released Products
Contact
Reviews
“
Team/Subscribe
News
Footer
Drone
Service
Technology
Solution
Subscribe
Footer
Bannar
Bannar
SAM
Contact us
Contact us
Bannar
Bannar
Fleets
Product
Footer
Bannar
Intro
Founder
Team
Partner
Subscribe
Footer
eVtol
Aircraft
Car
Self-Driving
car
Contact Us
Bannar
Footer
Contact us
Vehicle
Follow
Company
landing page
Fleets
HOEM PAGE
REGISTER
About us
>>
Register to contact
Want to know about our team and technology
Information Architecture
Information architecture guides customers to explore the company’s products and easily connect with SAM. It organizes information for seamless navigation, enabling effortless discovery of SAM’s offerings and facilitating quick connections with SAM’s team.
Visit homepage
>>
>>
>>
>>
Achieved 50% conversion rate through organized CTA sections.
Low traffic principle to categories guide different clients to specific landing pages.
Achieved bounce rate below 30% by user testing to ensure accurate category labels.
Easy entrance to landing pages and low entrance rates to “Contact” entrance.
Explore and be interested in Landing pages
Not sure about their choices but want to see a exact product
User Journey
Info Density
Usability Testing
A/B testing offers a very systematic way of finding out what works and what doesn’t work in any given marketing campaign. Most marketing efforts are geared toward driving more traffic. As traffic acquisition becomes more difficult and expensive, it becomes paramount to offer your users the best experience who comes to our website.
Platform
Participants
Yes/No Questionnaire:
Is this interface simple and clean for you?
Was the language in the mobile app clear and straightforward?
Did you find the process of contacting and requesting a demo to be quick and smooth?
Was the explanations on the page clear?
Step1
Methods:
We have designed three initial versions to conduct a survey to test Attitudinal Metrics and Brand Perception.
Problem:
The stakeholder is very familiar with their technology but has a vague understanding of their brand.
Results
An increase of 30% in the likelihood of users contacting the entrepreneurial team was observed.
95% of users reported that they were able to understand the product from a general overview to detailed information, indicating improved comprehension.
45%
70%
30%
Nice direction
Clear and impressive
It appears incomplete
Confusing
Impressive.
They have a very clear impression of the overall business.
The information is not precise.
I didn't find the specific business I'm interested in
Enhance the likelihood of users contacting the Sam team.
The demand for managing personal spaces is not significant.
I was directed to a specific page that interests me very quickly.
I was able to request a demo and contact the creative team quickly.
I didn't find the specific business I'm interested in
I quickly grasped the company's primary business.
I wanted to know more about specific services, but finding detailed information and contact details makes me feel tired.
I was very confused about how the company's business can help me.
Clear and impresive
Unclear information
The survey questions primarily aim to gauge the clarity and effectiveness of information conveyed, as well as to understand users' initial impressions of the brand. This includes assessing how well the content communicates key messages and services, whether users find the information easily accessible and understandable, and their overall perception of the brand's identity and offerings.
VersionA
VersionB
VersionC
Add a CTA to serve as the first point of contact for visitors.
Direct users to different autonomous driving products, as each would have its own data model for every vehicle in the near future.
Instead of setting up a subscription panel, we highlighted an existing product by Sam, providing customers with more imaginative possibilities. This allows customers to express their needs by contacting us through customer service."
Visual UI System
Information architecture guides customers to explore the company’s products and easily connect with SAM. It organizes information for seamless navigation, enabling effortless discovery of SAM’s offerings and facilitating quick connections with SAM’s team.
10%
Brainstorming
Initial visual Branding
Ideation
30%
Design System
Branding
UI design
UX design
Prototype
Solution
20%
Competitive Analysis
Research
Interview
Discovery
Product Manager
Product Designer
UI Designer
Web developer
40%
User Flow
Mapping
Information Architecture
User A/B Testing
Define
Goal
Navigating Uncharted Territories: Without a tried and true roadmap, the business had to create its own path, often venturing into the unknown.
Defining Industry Standards: As pioneers, there was a responsibility to set standards and best practices
We developed the website and landing page for different devices not only for the current operations but also for the future possibilities. We collaborated seamlessly and paid special attention to each stage.
365px
768px
1440px
2560px
We created five versions of the landing page tailored for PC, laptop, tablet, mobile, and other interfaces. This approach aims to enhance potential customer engagement, improving their understanding of our products by ensuring optimized viewing experiences across various devices.
Solution:
There are always banners between the pieces of information to make users easier to contact.
How do we cooperate with stakeholders?
We have adopted a thorough stakeholder engagement strategy for our project's success. This involves identifying stakeholders, understanding their needs, maintaining regular communication, building strong relationships, and actively seeking feedback.
Goal