My Interaction Design experience has helped shape UX stories, and create imaginative and intuitive interfaces that empower users.
My Interaction Design experience has helped shape UX stories, and create imaginative and intuitive interfaces that empower users.
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
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 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
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.
Retrospectives
- User as the Focus
- Reinforce Brand across entire project
- Usability Heuristics:
• Aesthetics Appeal-Ease
• User Control-Flexible
• Consistency-Conventions
