BQE Software
Blog UI Structure.

Design Challenge: To create a new Blog site and UI experience for BQE Software customers that will alleviate corporate marketing plans as well as create engaging and enjoyable interactions.

scroll

Blog-MacBook Frame.png

ROLE

UI-UX Design

Creative Management

CLIENT

BQE Software

TIME FRAME
2-4 Weeks

SOFTWARE

Illustrator, Photoshop

Sketch, InVision, Zeplin

 

DESIGN ROLE
– Brand Research & Project Strategy

– UX/UI & CX 

– Brand Voice & Content Strategy

– Visuals / Graphics / Content

– Interactive Design

Design Problem: The existing Blog site did not align with the new marketing plans and the updated brand systems guidelines. 

DESIGN RESEARCH & SOLUTIONS

A Holistic UI structure from the top - down

User Flow Mapping - Understand User Needs & Goals

Defining the Navigation/IA and Content Inventory

Peeling the Onion: Navigation, Pages & Interaction

Underlying Structure & Interface Density

Baseline: Sketches for UI Wireframe, Composition & Visual Hierarchy

Solution: Consistency, Labels and UI Backbone

Refine Stage: Grey-tone Wireframe, Design Strategies & Visual Hierarchy

• Define & categorize content inventory

• System Experience throughout pages- Global Nav & Breadcrumbs (Scent Strategy)

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

CaseStudy-Build8.jpg

Iterative UI Design: UI Mockups: Medium Fidelity

Visual Interface & Consistent Design System Implementation

Key Transformations:

Gestalt Principles for High Fidelity Visual - Primary and Secondary Actions

• Page Layout at a Higher level

• Interactions within User Flow

• Call-to-Action(s)

• Primary User Goals 

Iterative Ideation Stages for Main Blog Page Design

BLOG SITE DESIGN

Sample Blog Page Layout: Consistency & Conventions

UI Design, branding & system-level design for the entire project life

Responsive Design Ecosystem to meet Dev-Team Requirements across Multiple Devices

A Coherent Experience for Desktop & Mobile: Meeting the needs of both the user and business strategy.

Retrospectives

- User as the Focus

- Reinforce Brand across entire project 

- Usability Heuristics:

  • Aesthetics Appeal-Ease

  • User Control-Flexible

  • Consistency-Conventions

Mobile UI.jpg