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.
Wireframe based on the initial sketch.
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 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.