Business goal:

Design Portal Homepage, Dashboard, Contact and FAQ Design using existing and new patterns

Design goal:

Understand user, user needs, and create a responsive SaaS design

Problem:

No access to users, relying on old data, most patterns were designed unresponsive

Contributions: 

Everything in this write-up is mine. 

  • Testing scenarios
  • UX flows
  • Wireframes
  • Low to mid-fidelity prototypes

Contributors:

  • Another UX Designer
  • PM
  • Dev leads

 

 

As a UX designer, once I understand the project’s direction, scope, and budget, I begin the logic flow exploration after researching and thoroughly understanding the requirements. After I have confirmed the flows with the project’s partners, I typically start the design exploration on paper.

When I find a direction that most effectively captures the requirements and the best user experience, I will wireframe that design, looking for instructional interaction points and micro-interactions to improve the experience.

Note: the content below has been unbranded and altered at the request of a previous employer. For this project, I did not go beyond wireframes.

Portal Homeage

Initial sketch

Portal Mid-Fidelity Wireframe

Wireframe based on the initial drawing.

Dashboard:

I developed this dashboard concept to determine how specific components would reflow in responsive design.

Dashboard Design

Extra Large Web 1920w

Dashboard Design

Large Web 1280w

Dashboard Design

Medium Web 1024w

Dashboard Design

Small Portrait Web 768w

Dashboard Design

Extra Small Web 768w

Contact and FAQ Design:

I developed this flow to discover how FAQs and Contact should behave—should the pages be interlaced in one page or separated into two? The exploration below reflects those decision points.

Initial interaction flow:

Interaction Flow

Initial exploration

WireFlow

Initial exploration

These interaction flows were further explored and fleshed out. (The client rejected the initial FAQ prominence design.) Below are the two Contact prominence designs and the different page designs.

FAQ interlaced

This design explores the main Contact page with an FAQ module interlaced—the user selects the department, and filtering begins.

FAQ begins with basic questions

This design explores the main Contact page with an FAQ module that begins with a random set of FAQs—the user selects the department, and filtering begins.

Contact and FAQ

This design explores separate Contact and FAQ pages—there is no interlacing of modules.

UX Web Wireframes