top of page
WHAT IS THE LANDING PAGE AND SECTION HERO ABOUT?
Online businesses have only 0.05 seconds to build an emotional connection with customers. As a result, SupplySync has failed to clearly communicate their unique value proposition, create a compelling visual structure and get users to take action, and they are loosing valuable funnel conversions and potential customers.
Overview
The aim of this landing page and hero section is to encourage users to take specific actions and adopt certain positive behaviors, achieved through the strategy of persuasive design methods and optimized UI design.
Primary Goals
Create a landing web page that captures attention quickly and clear communicate a unique, value proposition. The design will drive conversions, make information easy to find, reduce bounce rates, build trust and minimize experience friction.
UX.UI goals
-
Minimize Friction & Cognitive Load
-
Create a Strong Visual Hierarchy
-
Leverage Social Proof & Trust Signals
-
Include search functionality for quick access to specific content.
-
Convey a concise and compelling Value Proposition
-
Create a Sense of Urgency and Offer an Incentive
-
Ensure Mobile Optimization
Key Results
The key metrics impacted included a higher Click-Through Rate on call-to-action buttons, an increase in form submission rate, and a lower Time on Page for sign-up flows. This indicated an efficient user journey and UX strategy. Additionally, the well-optimized UI improved the Page Load Speed, reducing abandonment rates, and enhances session duration by keeping visitors engaged.
Responsibilities
-
Desk Research
-
UX-User Interface Design-IxD
-
Prototyping
-
Design System
-
Product Design, QC
-
Wireframes, Prototypes
Tools: Figma, Photoshop-Illustrator,
Generative AI
Client Brief to Visual Intention
Reduce user anxiety and decision objections with the use of microcopy, social proof, trust signals, as well as,
track/test for optimizated UI performance.
Interface and Experience Challenges
Ø1 Research, Empathize and Define
FRAMING THE PROBLEM AND GUIDING PRINCIPLES
To gain clarity and empathy for the landing page and hero section, I focused on examining usability issues and aesthetics as a whole. Listed below are the most common friction areas.
-
MistrustIncoherent use of micro-copy and social proof undermines the brand identity, and impacts users' trust and perception of the product.
-
UI InconsistenciesPoor use of visual cues and hierarchy confuses users, leading to difficulty in accomplishing user tasks and understanding of the interface.
-
SplinteredLack of cohesive design elements diminishes emotional engagement, reduces user satisfaction and loyalty.
Challenges & Obstacles
“The landing page lacks a clear and compelling value proposition — the overall design feels too complex and makes it difficult to prioritize what I need to do next.”
Jessica, 42
“I am finding it difficult to establish product trust and value without social proof or relevant case studies — to me, the visuals are not engaging.”
Tasha, 38
Lacking trust
Users were unclear and didn't understand what benefits the SaaS software offered and why they should choose it over other competitors. What do customers trust and value? How will this help my business and needs?
Intimidating
Users needed to fill out lengthy forms to request more information or sign up for a demo deterred them from taking action. Are the forms useful? What part of the forms are necessary and can be reevaluated?
Overwhelming
A cluttered and disorganized layout makes it challenging for users to locate the vital information they seek. Are the CTAs clear and can the micro-copy be improved? What part of the experience is currently working?
Click-thru key research insights
The Proto-Persona exploration identified thought patterns and key themes. Connecting these well-defined target audiences helping to formulate better design decisions.
Proto-Personas
Persona-Business Mindset
Mindset Map
Proto-Personas
1/7
How might we design a landing page user flow for software demo sign-up that enhances the user experience and drives positive user behavior?
UNCOVER OPPORTUNITIES
Product Requirements & Prioritize Actions
To ensure I met business goals and motivate users to interact with key features in the UI, I've determined to measure design success in the following ways:
Lacking trust >> Connected & Confidence
Empower users, excite and inspire through diverse expertise in data, information, testimonials, social proof, design craft and a user experience that encourage visitors come back to the site. Connect the workflow into one holistic, streamlined, and inter-operable experience with the company.
Business Goals: Increase return visitors and count-per-clicks from CTAs. Increase the amount of users requesting demos and inquiries regarding sales and support. Highlight key features, such as inventory optimization or demand forecasting, and explain how they solve specific pain points for businesses.
Intimidating >> Approachable & Accessible
Simplify and incentivize visitors to continue their navigation and convert by clicking on Calls-to-Action of sign-up of demo software, downloads, support and resources. Keep forms short and only ask for essential information. Consider using progressive profiling techniques to collect additional information over time as users engage with the experience and software.
Business Goals: Create clear and functional pathways for users to perform tasks. Ensure that the landing page is fully responsive and displays correctly on all devices and screen sizes.
Overwhelming >> Fresh & Inviting
Fast and seamless wayfinding for visitors on landing page and provide clear information about the brand in all sections while keeping users informed throughout the experience. Give the UI more breathing room, tell the brand story and craft designs that are modern, efficient and visually make a positive impact on users experience.
Business Goals: The product should be simple and easy enough for non-providers to use and understand. Simplify the language used on the landing page to make it more accessible to a wider audience.
-
Create an intuitive user flow for customers so they can easily sign up for demo software: Approachable.
-
Build trust with customers and create an enjoyable experience: Confidence-Trust-Inviting.
-
Show businesses how SupplySync can help solve their Supply Chain Management challenges: Connected.
Red Routes & User Flow
To bring the design exploration back to reality and connect the dots, I created a UI design flow maps for sign-up for demo software, sign-in for existing users, how the software works, as well as future sales requests. These guides translated into a clear plan for design exploration and strategies.
Red Route
Journey Map
Barriers vs. Recommendations
Red Route
1/6
Ø2 Concepts & Framework
I used desk research, brainstorming and art directed design plans to uncover potential design solutions. Persuasive design and user-centered design where always at the heart of my decisions and analysis.
Art Direction and UI Design
BELOW: Click-thru steps of design thinking process, emphasis on holistic design strategies
-
Design conception
-
Word-Cloud map
-
Moodboard - Design Guide
-
Mental Models
-
Rough design sketches
-
Initial Wireframing
Concept WordCloud
Moodboard
Low Fidelity Mockup
Concept WordCloud
1/7
What am I going to reDesign?
Design-thinking Hypothesis
Establish a Unified Brand Guide and Design System
To improve users' focus and readability, implementation of a comprehensive design system that ensures consistency in visual cues, aesthetics, ample whitespace, hierarchy, and persuasive emotion throughout the interface.
Integrate Social Proof and a Value Proposition Effectively
Incorporate micro-copy and social proof elements such as company brand logos and testimonials in strategic locations within the interface to enhance credibility and trustworthiness.
Define Clear Guidelines
Develop clear guidelines for the use of color, typography, imagery, and social proof, ensuring they align with the overall brand identity and user experience goals.
Fueled by a shared understand of the target users, I found myself able to brainstorm more concrete ideas and make confident design decisions on behalf of the user segments.
A High-Level overview of my UX.UI design process
-
Double-Diamond Workflow
-
Establish a layout system and guidelines
-
Create styles
-
Design, build & fine-tune
-
Consistency & polished look
Primary Guiding Principles to place the user at the heart of every design decision:
Accurate, engaging and logical CTAs
-
Persuasive micro-copy writing with clear and effective use for CTA and webpages (Landing).
-
Use of metaphors and statements that make user interactions believable and trustworthy.
-
Designs and interactions that help solve their problem and persuade them take next steps. Users are more likely complete tasks if you can "see yourself performing these tasks."
Ø3 Iterate with design, wireframe, prototypes, and architecture
UI DESIGN OUTCOMES
Minimum Lovable Landing Page — Low-Fidelity Structure & Wireframing
Addressing low hanging fruit and functionality to achieve a well-rounded solution.
Design tools used: Illustrator, Photoshop, Figma, Axure
Low-Fidelity Responsive Grey-scale Mockups
Based on conventions and standards, I created adaptable wireframes for desktop and mobile frameworks.
Responsive Breakpoints: Desktop: 1152-1440pt / Tablet: 680-834Pt / Mobile: 360-430pt
Medium-Fidelity Wireframes Mockups
Using Figma and Auto-Layout functionality, I created an entire system of "FlexBox"/ Box System for the layout design. This was built with maximum flexibility at the heart of the layout, enhanced by a design system framework.
Focused on: consistency, readability, usability, and a scalable responsive workflow.
Wireframe Solutions & Prototype Result
Low Fidelity
High Fidelity
Persuasive Design Strategies
Design Solutions
To ensure I met business goals and motivated users to interact with key features in the UI, I developed the following design heuristics as a focus plan:
-
Spark user interaction using the Hooked-Effect marketing paradigm
-
Draw attention with visual cues
-
Minimize cognitive load using Miller's Law.
-
Build UI with an emotional design connection using: color, typography, spacing, imagery and brand tone (to name a few)
-
Using Social Proof to demonstrate the popularity or credibility of the product
-
Simplicity and clarity of user interface; making it easy for users to understand the benefits of taking a particular action
-
Presenting information in a way that influences perception of a lovable product
-
Personalize and tailor content based on user behaviors — aligning with user interests and respect their choices
-
Providing clear feedback and indicating progress towards users' goals
-
Setting pre-selecting choices that nudge users towards desired behaviors without requiring additional effort
Unpacking the Persuasive Design Outcomes
-
Concise and consistent CTA structure & Micro-Copy
-
Persuasive design for successful optimization & conversion
-
Design conventions, standards and UI consistencies
-
60/30/10 Color Rules
-
Design principles & Gestalt methods within UI&D
-
Visual aesthetics strategies
4/8 Point Grid System
EYE TRACKING - F SHAPE
GOLDEN RATIO WITHIN UI
Ø4 Test and Listen
INTERACTION DESIGN & USER FLOW SCENARIO
WHAT I HOPE TO GAIN FROM NEXT STEPS
QUANTIFYING DESIGNS WITH PURE / RAG TESTS
-
Further steps would include a usability test and a PURE scorecard rating to measure any friction points.
-
Ideal tests would take users through a "happy path" scenario.
-
Target users' tasks would rate the effectiveness of the service—Is the product easy or difficult to use?
-
The measurable results could lock potential/future features and usability benefits.
MIXED-FIDELITY INTERACTIVE PROTOTYPES
-
An interactive and functional MVP prototype.
-
Steps for a "happy path" scenario—users complete a Demo Software sign-up task/scenario.
-
Interactive design: user inputs, global variables, data submission, and conditional 'smart logic'.
-
A/B test of two use case scenarios: CTA and Micro-copy.
-
The walk-thru would help validate design decisions and show a realistic, interface prototype.
bottom of page