top of page
CASE STUDY
PSYCHOLOGY-FOCUSED DESIGN STRATEGIES FOR UI
UI and experience-process improvements materialized into a tangible SaaS company landing page scaling alongside business needs
The aim of this landing page and hero section is to encourage users to take specific actions and adopt certain positive behaviors while using this product, achieved through the implementation of persuasive design methods; optimized for responsive design.
SECTOR
B2B, Technology, SaaS, Management
ROLE
UI Digital Designer
TIMEFRAMES
March 2024
UI Design-Focused SPEC
PLATFORMS
Figma, Framer, Axure, Photoshop, Illustrator, AI software technologies.
DESIGN TASKS
DESIGN CONCEPTS
MOCKUPS
SCENARIO & USER FLOW
UI DESIGN
LO-HI FIDELITY PROTOTYPING
RESPONSIVE WEB DESIGN
INTERACTION DESIGN
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.
Ø1 BRIEF & DISCOVERY
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.
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.
Artboard 1
Artboard 26
Artboard 1 copy 6
Artboard 1
1/5
Ø2 CONCEPTUALIZATION & DESIGN PLAN
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
Artboard 45
Concept WordCloud
1/8
What am I going to reDesign?
Design Hypothesis
Establish a Unified 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.
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."
A HIGH-LEVEL OVERVIEW OF MY DESIGN PROCESS
-
Establish a layout system and guidelines
-
Create styles
-
Design, build & fine-tune
-
Consistency & polished look
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
Minimum Lovable Landing Page — Low-Fidelity Responsive Wireframe 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/ UI Box System of 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
Ø3 FINAL RESULT OF REDESIGN
PRODUCT REQUIREMENTS & STANDARDS
4/8 Point Grid System
DESIGN SOLUTIONS
To ensure I met business goals and motivate users to interact with key features in the UI, I've developed a design focus plan:
-
Spark user interaction using the Hooked-Effect marketing paradigm
-
Draw attention with visual cues
-
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 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
GOLDEN RATIO WITHIN UI
EYE TRACKING - F SHAPE
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 unlocking potential-future features and usability benefits.
MIXED-FIDELITY INTERACTIVE PROTOTYPES
-
Interactive and functional MVP Prototype.
-
Steps for a "happy path" scenario. Users complete a Demo Software sign-up task.
-
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