USER RESEARCH

Before the research, I finalized my list of the main goals which can help me focus on my further research.

• Understand strategy of the client to sell auto insurance plans online.
• Understand the needs and pain points of the users with existing application.
• Understand the standards and trends of the industry.

User Interviews

I conducted five 20-30 minute user interviews to learn how people interact with the existing applications on different devices and recorded their experiences so that I could revisit them later to make a design decision.

UX DESIGN

Information Architecture

Based on a content audit of the existing application and new content requirements that emerged from research, an information architecture for the new application design was drafted.

Card Sort

Performed card sorting on the application to modify and regroup the form fields which would make sense and would be easy for the users to use.

Site Map

Using the categories from the card sort as a starting point, I plotted out the content to guide the design of the new application.

The next stage involved designing a semi-functional greyscale prototype of the new site. The new website would render for any screen size on desktop,tablet and smartphone devices.

Interaction Design

Task Flow

This task flow helped me to analyze every step of finishing the task from Information to Auto Quote pages. In this process, I ought to perceive key pages that I wished to build primarily.

The next phase involved designing a sketch prototype of the new application which desired to be responsive for desktop, tablet and smartphone screen sizes.

Wireframes

Low Fidelity Wireframes

Low-fidelity wireframes are a great way to discover many possibilities rapidly and inexpensively. At this stage, I was ready to recapitulate to design the sketches using pen & paper.

High Fidelity Wireframes

High-fidelity wireframes of primary screens for desktop, tablet, and mobile were created in Figma (42 screens). High-fidelity wireframes will be tested for usability and signed off with specs for development. In this practice, I used collective design patterns and recognized the sizing and placement of form fields. I focused on maintaining consistency across screens & devices.

Usability Testing

Before recruiting participants to test the high-fidelity wireframes, I defined usability test goals and objectives, methodology and tasks.

To test the wireframes, I asked 5 participants to try out the wireframes and asked for their initial impressions, let them explore the application and then had them perform specific tasks.

Results

Through usability testing, I gathered some results from the participants. My next move was to pull out key insights or pain points and a list of prioritized revisions for another design iteration.