top of page
SupplySync-Macbook3D-Hero-v2.jpg

CASE STUDY  |  PSYCHOLOGICAL STRATEGY DESIGN 

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.

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
INTERACTION DESIGN
LO-HI FIDELITY PROTOTYPING
RESPONSIVE WEB 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.

  • Mistrust
    Incoherent use of micro-copy and social proof undermines the brand identity, and impacts users' trust and perception of the product.
  • UI Inconsistencies
    Poor use of visual cues and hierarchy confuses users, leading to difficulty in accomplishing user tasks and understanding of the interface.
  • Splintered
    Lack 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.

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.

  1. Create an intuitive user flow for customers so they can easily sign up for demo software: Approachable.

  2. Build trust with customers and create an enjoyable experience: Confidence-Trust-Inviting.

  3. 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.

Ø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

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

  1. Persuasive micro-copy writing with clear and effective use for CTA and webpages (Landing).

  2. Use of metaphors and statements that make user interactions believable and trustworthy.

  3. 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."

HandDrawn-UI-1.jpg

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

Page Section Mockup-Structure.png
Page Section Mockup-Structure.png

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

 

Wireframe-Mockup-Landingpage.jpg
Screenshot 2024-03-18 at 11.07.14 AM.png

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

GreyScale Mockup-v4.png
GreyScale Mockup-v4.png

Ø3 FINAL RESULT OF REDESIGN

PRODUCT REQUIREMENTS & STANDARDS

4/8 Point Grid System

SupplySync-Hero-Redline-v3.jpg

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:

  1. Spark user interaction using the Zeigarnik Effect and keep users Hooked

  2. Draw attention with visual cues

  3. Build UI with an emotional design connection using: color, typography, spacing, imagery and brand tone (to name a few)

  4. Using Social Proof to demonstrate the popularity or credibility of the product

  5. Simplicity and clarity of user interface; making it easy for users to understand the benefits of taking a particular action

  6. Presenting information in a way that influences perception of a lovable product

  7. Personalize and tailor content based on user behaviors — aligning with user interests and respect their choices

  8. Providing clear feedback and indicating progress towards users' goals

  9. 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

Case-2-Color Scheme.png
SupplySync-Iphone-Hero.jpg
Hero_section-Anatomy-v2.png

GOLDEN RATIO WITHIN UI

Hero-Case-Output-GoldenRatio-V2.jpg

EYE TRACKING - F SHAPE

Hero-Case-Output-FTracking-V2.jpg

INTERACTION DESIGN & USER FLOW SCENARIO

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 serviceIs the product easy or difficult to use? 

  • The measurable results could unlocking potential 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.

MIXED-FIDELITY INTERACTIVE PROTOTYPES

  • Designing a fully interactive and functional MVP Prototype.

  • User task and steps for a  "happy path" scenario. Users complete a Demo Software sign-up.

  • Interactive design would include: user inputs, a contextual form, data submissions and 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