top of page

CASE STUDY

Unpacking the UI design process for a successful landing page hero

The aim of this 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. 

UI TASKS

DESIGN CONCEPTS
MOCKUPS
SCENARIO & USER FLOW
UI DESIGN
INTERACTION DESIGN
LO-HI FIDELITY PROTOTYPING
RESPONSIVE WEB DESIGN

PROBLEM STATEMENT

Online businesses have only 0.05 seconds to build an emotional connection with customers. As a result, if companies fail to clearly communicate their unique value proposition, create a compelling visual structure or get users to take action, they will loose valuable funnel conversions and potential customers.

Ø1 BRIEF

FRAMING THE PROBLEM AND GUIDING PRINCIPLES

To gain clarity the design heuristics for the landing page hero section, I focused on examining usability issues and aesthetics as a whole. Listed below are the friction points: 
 

  • Inconsistent visual cues, aesthetics, hierarchy and emotion (Color, imagery, language)

  • Usability issues with CTA button and micro-copy.

  • Lack of social proof

  • The absence of tailoring content, recommendations, or offers based on user preferences

  • Not providing clear feedback and indicating progress toward goals

How might we design a landing page hero section that enhances the user experience and drives positive user behaviors?

Ø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

My Design Hypothesis:

Using strategic contrast and a minimalist design with ample white space will enhance users' focus on the main content and improve readability.

Changing the color of the 'Sign-Up/Start Trial' button to green will increase conversion rates because it will create a stronger visual contrast with the background.

Displaying social proof prominently on the product hero area will increase users' trust and likelihood of making completing tasks.

Ø3 REFINING THE DESIGN 

Product Requirements

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:

  1. Spark user interaction!

  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    

​

  • Persuasive design patterns

  • Design conventions & consistencies 

  • 60/30/10 Color Rules

  • Design principles & Gestalt theory

  • Visual aesthetics strategy

  • Concise CTA & Micro-copy 

Case-2-Color Scheme.png
Hero_section-Anatomy.png

GOLDEN RATIO WITHIN UI​

Hero-Case-Output-GoldenRatio.jpg

EYE TRACKING - F SHAPE

Hero-Case-Output-FTracking.jpg

NEXT STEPS

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

Case studies you might also like...

bottom of page