Design Assignment
Design a high-fidelity landing
page (home page) for their
website, where the company can
showcase its suite of products.
Submitted by :
Saurabh Shiwankar
gmail: saurabhshiwankar1995@[Link]
Design process
Understanding the Understanding the Design system Final Design
problem target users creation Color pallet, typography, icons,
Understanding the problem From market studies getting Color pallet, typography, icons, etc.
knowledge about the users age etc.
group, demographics.
1 2 3 4 5 6 7
Secondary research Mapping emotions Iterations
Contextual research of similar of the target user Contextual research of similar
cases, trend analysis, common Contextual research of similar cases, trend analysis, common
patterns. cases, trend analysis, common patterns.
patterns.
Finding Inspirations
References from similar websites
While exploring websites offering Fintech infrastructure solutions to glean design inspirations and
identify patterns, I've analyzed the user interface and discovered consistent structures within sections m io
ju
showcasing product features
o
Xer
t ripe
S
b ox
Fu nd
UI Analysis
Hero Section
A hero section is the area that immediately shows up on the screen under your logo and menu. This
portion of the page should ideally include information about four things:
What you have to offe
Why people should trust yo
The benefits of working with yo
What action they should take next
Upper Navigation
Headline Hero image
Few lines which attracts focus of video or
the viewer animation
Sub heading
Subheading gives you a bit more room to
expand on your business and its offering.
Product mockup Typography
Call-to-Action
Giving good product images Bold Sans Serif typeface to give
Which leads user to creating their account
gains attention of the user, get a glimpse about their services
on this application.
idea about the services. to the audience.
UI Analysis
The “how it works” section
Show exactly how the features solve a
problem or provide a desired benefit.
Feature
Features and associated benefits tailored
for the visitors
Target users
Understanding the diverse needs and preferences of these user segments will help tailor the website's messaging, Moods and emotions mapping
features, and user experience to cater effectively to each group.
trustworthy optimize operations
Aspiration & Control Security-Conscious Efficiency-Driven save time
scalable financial solutions
Individual Consumers Business Segment Growth & Expansion
Consumer Segment Business Segment
Individual Consumers
Small to Medium Enterprises
Tech-Savvy Users
(SMEs)
Young Professionals Startups
user-friendly, Ease & Convenience Risk Management maintaining financial integrity
Corporate Entities
accessible
financial analysis startups
Reporting Data-Driven Innovation & Adaptability
Specific Roles or Industry Verticals Departments Industry Verticals
Departments Fintech Startups
Retail & E-commerce
Finance Professionals
Healthcare & Real Estate security Compliance & Security Industry-Specific Needs
Risk & Compliance Officers
regulatory compliance financial tool
Mood Board
Mood boards help to turn abstract concepts into something visual and concrete.
It helps tailor messaging, user interface, and overall user experience to resonate with the
emotions, needs, and goals of target users.
Keywords
Growth & Expansion security trustworthy Aspiration
Color palate
#568BDF #65A9F7 #C6E0FF #F8FFDD #FFEB50 #F9DB0F #262626 #3F3F3F #F7F7F7
Typography
TT commons
TT commons
TT commons
Modern Geometric Sans Serif
TT Commons™ Classic is a universal sans serif with a minimal contrast of strokes, a closed
aperture and geometric shapes of characters.
TT commons
TT commons
Iterations
Final design
Final prototype