UI Case Study –
Blog Design.

reDesign existing blog site to compliment a brand/website experience 'refresh'.
Focus on business requirements and (re)branding to help elevate organic traffic via strategic marketing funnels.

BLOG

PROJECT DEFINITIONS AND PROBLEM STATEMENT

BQE Software requirements included an updated Blog site tailoring to business strategies. Furthermore, there was discovered disconnect with the brand experience within the customer journey. This affected the customer experience pipeline and perception of the company. e.g. downloading whitepapers, requesting software demos, contact sales, end of journey purchase.

Scope

Designing a user interface for how users behave while meet business requirements and follow brand guidelines. Increase organic traffic and connect the user journey with marketing and sale s strategies.

Objectives

Improve the user experience and connect to brand story. After completing my evaluation research and audit of the existing plan, I discovered that users were having issues in their journey from social channels to Blog and finally into the marketing funnel. Awareness, Interest, Desire and Action. They encountered unclear flow and ambiguous steps on their journey. During A/B testing, Click-test and heat maps, we uncovered that users were not getting the most desirable results.

Finally, I designed a high-fidelity prototype to validate a new version of the blogging site. After testing and refining the prototype, I did a handoff for development. Since the release of the blog site, users were happier with the new interactions.

Task

As a senior visual designer, I was tasked with UX research and redesigning the MVP product for an updated blog site experience design. My process included competitive research and audits, sketching, ideation, prototyping, layout-mockups, and validating designs via A/B testing. As design tools, I used Illustrator and Sketch.

Research started with product evaluation, competitive analysis, internal co-employee questionnaires, studies of customer service chat logs and online customer feedback. I used these research methods to evaluate the company's existing product and obtain a deeper understanding of their target audience as well as how we can build an experience to meet these needs.

BRAINSTORMING AND UNDERSTAND THE PROBLEM

For a successful product reDesign, our team aimed at making the following better:

Visual Design
Business Value
User Experience
Organic Traffic Marketing Strategies
Efficient Collaborations with Web Development

Project Workflow

Kick-off Meeting and Research
HMWs / JTBD / Proto-personas
Customer Journey Mapping and User Flows
Stakeholders Input
Whiteboard ideation and brainstorming
Taxonomy and Architecture
Planning, UI design, Prototyping
Testing, feedback, Iterations

How Might We?....

UX process: Jobs-to-be-Done (JTBD), HMW and Journey Mapping to generate actionable ideas, user empathy, problem space and uncover new solutions.

Problem & Questions:

Some users aren't fully aware of the company's product offerings and how this solves their business goals, and they're confused regarding the steps to take towards: demos, evaluation and purchasing.

Q: Is everything in the design easy to find? Can users efficiently complete their tasks? Does the design keep the users engaged?

HMW?....

HMW increase awareness by connecting the users in their journey through marketing, sales and the UX/UI strategies? Would our UI design plan benefit from a structured user flow with specific focus on actionable interactions (CTAs), so users can find relevant resources quickly?

How can we solve UI real problems, create pleasurable user experiences, and incorporate UI design-relevant innovations?

Working towards effective solutions through design ideations with focus on: user engagement, scanability, user requests for demos-trials and connections with the sales department.

JTBD in the SaaS sales and marketing funnel

RESEARCH, ANALYZE AND PLAN

Main User Experience Problems to Explore:

Current Blog-site was difficult to navigate
Branding was inconsistent
Not thinking of UX for Calls-to-action and processes moving toward sales
Not testing and measuring product usability
Non-intuitive design solutions

A unified mental model and solution-based hypothesis statement for design explorations:

We found some problems: Business and brand-driven assumptions. The company's marketing strategies required a considerate uptick in 'organic traffic' via blog site, and clearer paths to sales and purchasing.

We synthesized for solutions: With thoughtful UI design and the user as the focus, our team aimed at designing the most efficient solution for business and clients.

How we want to test and measure a hypothesis: Using a plan of A/B testing, audit of user feedback, metrics and KPI, the company wanted to learn effectiveness and efficiency of the new experience design.

UI Design Hypothesis:

If the user has an efficient and clear UI flow with strategic calls-to-action, then these users can discover items, like product demos easier and quicker – because our main focus is on clientele satisfaction and reaching strategic quarterly goals. Leading to more requests for demos, sales inquiries, purchases and business growth.

A holistic UI structure from the top - down

User flow map - to help uncover user needs, pain points and goals.

Defining the Ontology, taxonomy and content inventory

Peeling back the onion: navigation, pages and interaction from in an architecture structure map.

From competitive research analysis, heuristic audits, and questionnaire feedback from technical surveys, I uncovered new opportunities for innovation and a plan moving forward. This plan included flow charts, priority maps, navigation structures and wireframe sketches. I defining these experiences in user journey flow to better understand interaction behaviors and uncover pain points for user enjoyment and satisfaction; helping them to reach needs quicker.

Relevant and useful experience design paradigms implement during this project:

Tunneling to lead users through predefined tasks and UI functionality.
Progressive Enhancement to simplify and reduce UI content complexity.
Hook Model: UI triggers, actions, rewards and investments.
Five Hat Tricks: organizing information by category, time, alphabet, etc.
Identifying user issues with the Foggs Behavior Method: motivation, ability and triggered events.

Empathize User Pain Points & Solving Issues

User Process to Product:

Users were having issues navigating the website and blog-site's thought leadership articles, and running into trouble with the marketing funnel flow. Users were unable to locate efficient means of getting contact points and additional product information and demos. This had a direct impacting on their ability to go through with transactions and affected the overall experience satisfaction. These redundant steps were frustrating to the user and from a business position, this would potentially lead to a loss of revenue.

Designing an experience with efficient user flow and strategic UI content, as well as, addressing the marketing funnel and business needs were the top items to solve.

DESIGN EXPLORATION PROCESS AND SOLUTION

Underlying Structure and Interface Density

Baseline Sketches for UI Wireframe, Composition & Visual Hierarchy

Initial UI problem-solving "napkin" sketches: card-style design methods and content importance strategies

Consistency, Labels and UI Backbone: Order and Hierarchy

Low-Fi-Grey-tone Wireframe and the Visual Hierarchy Defined

Structural Importance: User Flow

Highlighted Blog Hero Title
"What's Hot" story feed
Filter-bar and Industry Story Feed
Leadership Knowledge Hub
Tweet-Social

Choreography of UI Structure: Consistency and Branding Definition

Process of macro-defining UI design and visual language

Designing for positive first impressions

Clarity, familiarity, color, size, font, negative space.
Discovered and distilled the most meaningful user activity.
Promoted visual emphasis and applied grid system: Draw attention to areas.
Use of the 60/30/10 Color system
Halo Design consistency effect carried throughout the experience – incorporating branding
Hick's Law: Ordered structure

Systems Design and UI Cards
Aesthetics, Color, Typography, Icons, Brand, Shape, Structure, Components, Spacing, Voice

Key Iterative Transformations:

Page Layout at a higher level
Branding guidelines and story applied to UI
Revised and enhanced interaction design considering the user flow
Clear and consistent Calls-to-Action in form of strategic CTA buttons
A/B testing of CTA color and placement
Considerations and planning for an Atomic Design System

A progression from early concepts to an end products, and then showing stakeholders 2-3 alternative low-fidelity to medium fidelity mock-ups that emerged as an output of this process. Later advanced to High-fidelity functional Prototypes.

A/B Design for Usability Testing. Similar UI Structures: variation of content style and visual theme within high-fidelity interactive mock-ups and prototypes: Alternates 1 and 2

UI Flow for MVP Functional Prototype. Blog main page with a UI filtering/modal, filter 'Sort-by' section, Blog pages, and marketing-focused CTAs-modals

Undertaking UI heuristic evaluation and audits, we selected alternative #1 as the way forward, but improved it with features from alternative #2, which was found to work better in guerrilla testing.

I brought these ideas to life with UI prototyping using the InVision app.

PROJECT OUTCOME AND RESULTS

Blog and Website Product Equity: Equipped users with the tools they need to reach their goals and achieve a better quality of business-life.

Our team made the product easier to use. Ensuring that the design, structure, and purpose of the product were clear to everyone.

We successfully designed a responsive design ecosystem to meet the Development Team requirements.

The outcome consisted of clear, efficient and easy-to-use UI experience – meeting the needs of both the user and business strategies.

These UI designs gave users a positive perception of the product and user became more engaged, and these helped solve the right problems and placed the user at the center of each design. As a result, BQE Software's refreshed blog-site had a considerable uptick in organic interactions and a clear flow within the marketing funnel. Users easily moved towards demos, sales, customer service and purchasing.

Tracking a Desired Outcome:

After testing we evaluated the following criteria for Usability.

Clearer Calls-to-Action and discoverability: resolving Customer Journey issues.

Equitable Design: Efficient User Flow through the marketing funnel.

Clear and enjoyable
UI experience and considerations with Responsive web/mobile

Positive product & brand perception emphasized by engaging UI and visuals.

Efficient hand-offs to development from concept to completion.

Lessons learned from the Blog-site reDesign project

Our team went on to delivered 63% more actionable content – tailored by the business strategy. Also, the marketing initiative went from only ~4 blog page entries a month to 22+ new entries monthly.

This project was a great reminder to me as a designer to make the best experience with what is available. With budget and time limitations, we had to sunset additional usability testing, but in the future, our team could revisit end-to-end features and evaluate an integrative exploration of user journey and a business service map audit. Limitations can be a positive force towards evergreen innovations and creativity.

Since Systems Design has become invaluable structure in the product pipeline, it would be beneficial to also revisit and implement an Atomic Design solution for the content structure and interaction design.

See examples below.

Atomic Design System:

Atoms, Molecules, Organisms, Templates & Pages

END

UI Case Study – Blog Design.

reDesign existing blog site to compliment a brand/website experience 'refresh'. Focus on business requirements and (re)branding to help elevate organic traffic via strategic marketing funnels.