DMV Eye Test

UI/UX Redesign
.   The client
DMVET is on a mission to bring an easy and pragmatic way for users to renew their drivings license without having to attend an in-person appointment with their revolutionary at-home eye vision test.
The task
The brief was to redesign the company’s website to give it a vibrant new look, gain trust of their users and enhance the overall user experience of the site to keep them engaged with the test.

Design Process

1. Research
2. User Flows
3. Wireframes
4. High Fidelity Results

1. Research

User Testing

As a designer, we don’t work for ourselves, nor for our clients, we work for the users. This is why before starting the project, the current landing site was showed to the client’s potential users, to see how they first reacted to it and what they thought about it.We took note of their actions, their frustrations, their comments, and we used that to strategize the next step of our process.
‍
Relevant comments from users:
- The idea (of the website) sounds very promising and I would use it, but it’s not clear to me how it works.
- I honestly wouldn’t trust it, the design is very generic and doesn’t look professional.
- I like the simplicity of the site and the colors, but it feels like its lacking personality.
- I liked the promotion (Sharp Vision Plan) and I wanted to know more, but when I clicked “Take me there” the link was broken and that was very confusing.

Findings:

The outcome of this research helped us pin point the exact problems the user could encounter by first checking the landing page. As we know, the landing page of the website is critical in helping generate leads, moving them through the sales process and into new customers, which is why is so important make a good first impression and efficiently show the users want they’re looking for.What we found in our user testings was that this objective wasn’t being achieved in the best way possible.
‍
Positive and negative aspects

The Challenge

From our preliminary research, we recognized the problems with the website and established the following goals that our redesign would have to follow:
‍1. Update the UI to a visually appealing design without distracting the user from the main objective, which is taking the eye test.
2. Reflect professionalism in the website in order to gain the trust of the users so they sign up and take the test.
3. Reorganize and prioritize the main information, making the main points easier and faster to read and understand.

2. User Flows

Before even thinking about the visual aspect, we focused on how to improve the structure of this website. For this we created user flows, which provided clear guidance to the tasks the user would need to perform in order to achieve their goals.It wasn’t an easy process, ideas were changed many times the more I worked on this, the more I started to think like our users. Referring to it often, the user flows gave me and the team of developers and product managers a close look at what the minimum viable product should be like.

user flowsuser flows

3. Wireframes

With our goals and user flows defined, the process of sketching the user interface began. In this stage of the UX process, ideas are free to come in and out and didn’t depend on any visual style or color yet.Rough concepts were then transferred to Figma for the high fidelity design.

wireframes drawn on paper

4. High Fidelity Results

With our goals and user flows defined, the process of sketching the user interface began. In this stage of the UX process, ideas are free to come in and out and didn’t depend on any visual style or color yet.Rough concepts were then transferred to Figma for the high fidelity design.
‍

web design on laptops
Redesign (Left) vs. Original design (Right)

Colors

On of the main aspects I decided to focus, thanks to the research, was the color palette. We took the same colors used in the logo and added two more shades for a more colorful and pleasing eye experience. We ended up with a website design with a dominance of blue color; which represents stability, trust and reliability which is aligned to the objectives we had for the project; and also purple, which highlights important buttons or icons and helps the user identify them quickly. With this changes, DMVET now had a more defined personality.

color palette

Landing Page

landing page

Account Dashboard

account dashboard

Medical Questionnaire

medical questionnaire

Aknowledgement

aknowledgement

5. Takeaways

This task was a great opportunity to work on a useful, beneficial service that was in need of a visual and UX transformation, which will in result help people with the process renewing their license quicker and with lower exposure to COVID by taking this online test at home.It was also an excellent learning opportunity to take an already created branding, which already had a logo, and give it a fresh twist that aligned more with the purpose of the website and their user’s needs.

Don't forget to read this article in Medium and check out the Figma file if you would like to see more! 
web design on mockups
Made with and lots of