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.



UI-UX Design

Creative Management


BQE Software

2-4 Weeks


Illustrator, Photoshop

Sketch, InVision, Zeplin


– 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 updated brand systems guidelines.


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


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 

Sample Blog Page Layout: Consistency & Conventions

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


Medium Fidelity Clickable Prototype
Key Takeaways:

• Form, Function & Interactivity
for the Users Top Level Tasks & Goals


• User engagement with system

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.


- User as the Focus

- Reinforce Brand across entire project 

- Usability Heuristics:

  • Aesthetics Appeal-Ease

  • User Control-Flexible

  • Consistency-Conventions

Mobile UI.jpg