As a UX designer, once I understand the direction, scope, and budget of the project, and after I have researched and thoroughly understood the requirements, I begin the logic flow exploration. 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 captures the best user experience, I will wireframe that design, looking for instructional interaction points and micro-interactions that will make the experience better.

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 Homepage

Initial sketch

Wireframe based on the initial sketch.

Dashboard Design

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

Extra Large Web 1920w

Large Web 1280w

Medium Web 1020w

Small Portrait Web 768

Extra Small Web 414

Contact and FAQ Design

This concept developed 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.

Rough interaction thumbnails. Rough design flow thumbnail
These interaction thumbnails were further explored and fleshed out. (The initial FAQ prominence design was rejected.) Below are the two Contact prominence designs and the separate page designs.

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

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

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

 

 

Leave a Reply