Frontier One

My Design
Fingerprint

Menu Page -Case Study

Fingerprinting agency accredited and authorized by the RCMP

Industry: Forensic and Security Services

User Interface/User Experience

Freelance Project

Overview

As a freelance UI/UX designer contracted by Frontier One Inc., my objective was to redesign and rebuild their website with a focus on simplifying the user interface for improved appointment booking. By conducting user research and testing, I was able to identify areas of confusion and complexity in the current design. Through iterative design and testing, I implemented a more user-friendly layout and navigation, resulting in a seamless appointment booking experience for users.

The Challenge

Upon being hired, I was initially surprised to learn that my role would not only include designing the website for Frontier One Inc., but also building it using Wix.com. This was a new challenge for me, but I was excited to learn and grow as a designer.

During the project, I had the opportunity to gain insight into the operations of a small business. When I asked why they chose to use Wix instead of building their own website, I learned that their previous website had been built by a software developer. However, when they needed to make changes or updates to the site, they were always reliant on the developer to do so. Unfortunately, the developer eventually stopped responding to their requests, leaving them with a website that they couldn't update or fix. This led them to turn to Wix as a more user-friendly and self-sufficient option for building their website.

Target Audience

The target audience for Frontier One is diverse, as the company provides services that cater to a wide range of needs. This includes individuals who require background checks for job applications, foreign travel, citizenship and permanent resident applications, and criminal history checks. Additionally, the company caters to a wide range of industries such as healthcare, finance, education, and more. The company's services are designed to meet the needs of both individuals and organizations in these industries.

Scope & Contsraints

In redesigning the website for Frontier One, I had to consider several key elements that were important to the client. These elements included:

A clean and simple design with a white background
Incorporation of the company's branding colors (5 colors) throughout the site
High visibility and accessibility of the 'Book Appointment' button from every page
A modern and timeless look and feel, avoiding anything too edgy or trendy
Distinctiveness from other fingerprinting agency websites across Canada.

By taking these elements into consideration, I was able to design a website that met the client's specific needs and goals while also providing an improved user experience.

My UX Design Process

Strategy

Discovery

Analysis

Design

Production

Stakeholder discussions
Project vision/goals
Brand strategy

Competitor analysis
Content audit
User interviews
Surveys
User testing

Persona creation
Experience map
User flow diagram

Sitemap
Paper wireframe
Digital wireframe
Prototyping
Mockups
User testing

Prototyping
User testing
Stakeholder review
Reiteration
Launch

User Research: Summary

During the initial discovery phase of the UX process, I conducted user interviews and task-based testing on the current state of the website to gain valuable insights from the users. Through these efforts, I was able to identify common pain points and areas for improvement as reported by the users. These insights were critical in guiding the redesign process and ensuring that the final product met the needs and expectations of the target audience.

"Colors are ugly"

"The website looks outdated"

Users reported that the website had an outdated appearance. They commented that it appeared as though the website hadn't been updated in several years. However, it is worth noting that the company is relatively new, having only opened in 2017. These user perceptions were important to take into consideration as they reflect the users' experience of the website, regardless of the company's actual age.

"It looks sketchy"

Users were asked for their overall impressions of the website and the company. Unfortunately, all users stated that they felt the website had a shady appearance and gave the impression of a potential scam. Furthermore, all users reported that they would not feel comfortable providing personal information on the website. These findings were concerning and highlighted a major issue with the website's trustworthiness and credibility.

Initial Design Concepts

After planning the new sitemap, I created sketches of potential homepage designs to convey the direction of the new look. The first sketch focused on keeping the homepage simple and easy to access, with all information immediately visible upon entering the website, with no need for scrolling. The second sketch, on the other hand, had a more minimalistic design, with a similar amount of information but presented in a way that required scrolling to access all features. Both sketches were created to provide a visual representation of the new design direction, and were used to guide the redesign process and ensure that the final product met the client's needs and goals.

First Sketch

No scrolling needed.
Book appointment form on the homepage.
Sliding gallery for any special promos/news.
Similar concept as the current homepage, but more modern.

Second Sketch

Scrolling needed
Book appointment button on the header
Banner image
More space between different elements

Digital Wireframes

After creating the sketches, I created digital wireframes of the two designs, which provided a more detailed and clearer vision of the design. The wireframes had different numbers of navigation buttons to test the possibility of simplifying and modernizing the website.

When presenting the wireframes for approval, the stakeholders selected the second design as the winner. The following features were cited as reasons for the selection:

The placement of the 'Book Appointment' button on the header was preferred over the form on the homepage, as the latter was perceived as "pushy"
The stakeholders felt that the second design had more lines of text, which helped with branding and navigation throughout the website
The second design was perceived as more spacious, while the first one felt too cramped and had little space between elements.

These feedbacks were taken into consideration during the final design process, to ensure that the final product met the client's needs and goals.

Mockups: Main User Flow

The main user flow for the website is centered around directing users to Frontier One's booking appointment service (youcanbook.em) in the most efficient way possible. To achieve this, the booking button was prominently placed in the header, allowing users to book their appointment from any page of the website.

In comparison to the previous design, the new user flow significantly improves the booking process by reducing the number of pages needed to complete the process from 8 pages to just 5 pages:

Any page
Select location
Select date and time
Input information
Confirm

By streamlining the user flow and reducing the number of pages required to complete the booking process, the new design provides a more seamless and user-friendly experience for users.

Key Takeaways

It was a great opportunity working with Frontier One, and I received positive feedback from the stakeholders. I was even given a bonus for my ability to capture the brand of the company through my design work.

One of the biggest takeaways from this project was the process of creating the homepage banner image. Initially, I was provided with an image of a fingerprint scanning machine, which was not suitable due to its poor contrast. I knew that using this image would not be a good representation of my work, and decided to look for a better solution.

I found inspiration for the new banner image during a visit to one of Frontier One's locations, where I saw a mural on their wall. The mural immediately struck me as the perfect representation of the brand and was used for the homepage design. By being patient and taking a step back from the initial design plan, I was able to find the perfect image to represent Frontier One. The owner of the business was thrilled with the new design and impressed that I was able to come up with a solution that they hadn't thought of.

Overall, I am proud of the work I did on this project, and it was a success in terms of capturing the brand and providing a better user experience. The mural that inspired the homepage design can be seen below, as well as the hexagon decoration that is used throughout the site to fill empty spaces.

Thanks for checking out my case study! I highly recommend to check out my other UI/UX Designs. Click here to view design concept for a budget app.