Business goal:

Design responsive cloud application homepage, dashboard, contact, and FAQ SaaS web applications utilizing existing and new design patterns to enhance the user experience. 

Design goal:

The design goal centered on gathering information about the use cases and user needs to create a portal that was both functional and aesthetically pleasing.

Problem:

The team and content experts lacked direct user access, relied on outdated data, and the absence of responsive design components hindered the project timeline.

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

 

 

The Journey:

Research & Analysis: The project began with a deep dive into the existing data and patterns, despite the lack of direct user access. The goal was to understand user needs and create a responsive SaaS design that could adapt to various screen sizes and devices.

Prototyping & Testing: The process involved developing low to mid-fidelity prototypes, UX flows, and wireframes. These were essential in exploring logic flows and determining the most effective design directions to enhance user interaction.

The Transformation:

Design Evolution: Starting with initial sketches and moving to mid-fidelity wireframes, the design evolved to focus on instructional interaction points and micro-interactions that could significantly improve the user experience.

Visual Highlights: The visual journey included creating a portal homepage and dashboard designs that would reflow responsively, ensuring a seamless transition between different device displays.

The Trouble:

Overview: A significant challenge was the lack of user engagement, relying on outdated data and patterns that were not designed for responsive behavior.

Sections: The design exploration included determining how FAQs and contact pages should behave, whether interlaced on one page or separated, leading to various design iterations.

Collaboration: The project was a collaborative effort with contributions from another UX designer, a project manager, and development leads, ensuring a cohesive approach to the wireframe designs.

The Impact:

Results: The wireframes laid the groundwork for a responsive web application that would meet the users’ needs and provide a foundation for further development and user testing.

Reflection & Future Directions:

Lessons Learned: The project underscored the importance of responsive design and the need for user-centric approaches, even when direct access to users is not possible.

Conclusion: The wireframing for the web app was a critical step in the design process, setting the stage for a user-friendly and adaptable SaaS product. The focus on responsive design and user needs, despite the challenges, highlights the commitment to delivering a quality user experience.

In-Depth Exploration:

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