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

Ø1 DESIGN CASE STUDY

UI and experience-process improvements materialized into a tangible SaaS company landing page scaling alongside business needs

SupplySync, a SaaS companyoffers subscription-based software that provides business operational solutions for Supply Chain Management. The objective of their landing page is centered on a singular goal: streamlining an intuitive user experience directed towards a defined sign-up path for their demo software, while also tailoring to different audience segments. 

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

PROBLEM STATEMENT

In the fast-paced industry of online commerce, where enterprises have a mere fraction of a second—just 50 milliseconds—to establish an emotional bond with their customers, it is crucial for companies to convey a distinctive value proposition and maintain visual consistency. However, SupplySync's landing page falls short in achieving this, resulting in unmet business objectives.

Ø1 BRIEF

FRAMING THE PROBLEM TO SOLVE

To gain clarity on SupplySync's customers and landing page designs, I focused on some usability issues and aesthetics. Listed below are the main experience friction points: 
 

  • Unclear Value Proposition

  • Lack of Visual Hierarchy

  • Poor CTA Flow and OKRs metrics

  • Lack of Social Proof

  • Complex Industry Jargon

  • Poor Optimization for Adaptive UI Design

  • Inefficient UI Forms and Validation

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?

How might we build a conversion generating landing page for our business that is streamlined, accurate, and efficient?

PROJECT GOALS

Create a holistic plan for usability improvements, stay user-centered, meet business needs, and designs for an impactful MVP (MLP).

Address pain points + immediate needs & value-proof UI designs

=

Minimum Lovable
Product

Ø2 EMPATHY

DISCOVERY & PLANNING

Base-Track Workflow — a Shared Understanding of Users  
I aimed at developing user understanding and create an actionable, holistic system-wide framework. 
 

  • Understand who I am designing for

  • Desk research: survey end users / proto-personas

  • ​Uncover knowledge gaps and where I need to learn more

  • Align experience strategy with UI design

  • Stay user-centered

Experience Design Audit 
U
ncovering and evaluating weaknesses translated into potential areas of strength and trust. This opened discussions for idea exploration and problem solving.

  • Keep the navigation and flow simple with intuitive and clear labels for CTA structure. 

  • Minimize distractions and unnecessary elements that could take users away from the main purpose of the page.

  • Clearly communicate a unique business value proposition for the landing page — highlight key benefits and features.

  • Include customer testimonials, case studies, and reviews on the landing page to provide social proof and build credibility.

  • Keep forms short and only ask for essential information.

  • Ensure that the landing page is fully optimized and UI is adaptive for multiple platforms and displays correctly on all devices and screen sizes.

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.

The Personas humanized complex data making it easier to consume and translate into an actionable design plan.

USER JOURNEY & GUIDING PRINCIPLES

I used customer mapping and storytelling to create a snapshot of the user experience. This helped  to fight bias and uncover a structure for future UI designs and feature sets. Highlights learned:

  1. Concentrate on streamlining the experience towards a singular defined goal and minimize UI distractions.

  2. Emphasize the Unique Selling Points and customer success stories.

  3. Encourage Demo trials and support.

  4. Display the CTA button at all times and limit the entries on form fields.

Click-thru key "Day-to-Day" scenario: The following task-focused maps traces the user’s steps in order to complete their tasks and help validate aspects of the design I might have otherwise overlooked. 

Design Statement  

Our company, SupplySync helps business professionals and segmentation of users who want to [jobs to be done] discover information about Supply Chain Management Software and receive demo software for evaluation. Helping to educate the customer by avoidin[pain] seamless searching, complex jargon, UI inconsistencies and form content overload, and allowing [gain] users to explore the landing page with ease, guide them to Calls-to-Action effortlessly and allow them to seamlessly sign up for software demos are the main usability goals. These are the most efficient pathways for customers to do business with us and develop future partnerships.

Ø3 CONCEPTUALIZE

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.

Ø4 DESIGN SOLUTIONS

STRUCTURED IDEATION & EXPLORATIONS

Laddering for Better Brainstorming  

I explored multiple design solutions using a Laddering Technique to ask the 'why' questions to help challenge my assumptions. These brain-writing studies translated into categorized goals/plans for practical and actionable design solutions. e.g. Idea Ratings, JTBD, Cognitive Walk-throughs

Artboard 24.png
Artboard 28.png
Artboard 45.png

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.

ITERATIVE DESIGN STAGES & FIDELITIES

 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

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

Minimum Lovable Landing Page — Medium-Fidelity Wireframes Mockups 
Using Figma and Auto-Layout functionality, I created an entire system of FlexBox style containers and layouts. 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

Design Refinement & Growth Product Mindset 

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

INTERACTION DESIGN & USER FLOW SCENARIO

Functional Mockup & Prototype 

  • User Flow for a successful Trial Software Sign-up

  • Validation & Contextual Form

  • Use Case Testing for Data Submission

UI DESIGN REFINEMENT

Refined, high-fidelity landing page Hero section — prototyped concepts

HERO-Section-Build-Export-v4.png
SupplySync-Iphone-Hero-v2.jpg
SupplySync-Hero-Redline-v2.jpg

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.

bottom of page