Case Study: Online Eye Test Redesign
This case study is meant to document the website redesign process that was done as a Sr. UX/UI Designer at Darkwhale Studio, in 2021.
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.
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.
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:
- Update the UI to a visually appealing design without distracting the user from the main objective, which is taking the eye test.
- Reflect professionalism in the website in order to gain the trust of the users so they sign up and take the test.
- 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.
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.
4. High fidelity results
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.
Iconography
Other thing that was missing from the website were icons — which are better for grabbing users’ attention and reinforce the message we’re giving.
The icons we added illustrated the texts, while at the same time made the design more memorable and attractive.
Improved Account Dashboard
We wanted to give the user a simple way to see their information, as well as update it, and get a quick resume of their recent activity using the site. Which is why, we came up with a new Account Dashboard that provides it all in a structured and clean manner.
User Experience Enhancements
We took the past pages that the client had and made improvements to the interface to make them cleaner and on-brand with the new graphic identity.
We also added breadcrumbs in the test process to let the user know in which step they are and reduced texts to make it easier to read while maintaining the exact same message.
Seamless Responsive Design
For the process of taking this online visual test, there was a need for the user to use their phones alongside the test on the computer, which is why we designed separate screens for mobile version.
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.
