Side Menu
The side menu on this webpage provides options for the user that they may not use as frequently as the top menu.
Such as; choosing their province/territory, learning more about DRIV, viewing in-car training options, and translating the page to Russian.
I chose a darker blue for this menu, as well as added a drop shadow to create an effect that appears as though the main homepage is overlapping this menu.
DRIV was the first fully functioning high-fidelity prototype and UI design project I created (2018), and I feel it is valuable in showing my earlier design work and process, while also reflecting on it to see where I could have improved and what I have learned since then.
DRIV is an online resource, aimed at easing the process of obtaining a Canadian Driver's license for Russian immigrants into Canada, by facilitating driving lessons, providing online training courses, and information about the steps involved in receiving your driver's license.
Problem
When someone with a license from their home country immigrates to Canada from another country, the language barriers and difficulty understanding the culture make obtaining a Canadian driver's license very difficult. This results in an inability to assimilate to the new culture, find a reasonable job, or cause feelings of isolation since they already know how to drive, but can't.
Goal
Ease the process of obtaining a Canadian driver's license, and reduce the effects of culture shock to which this issue contributes.
Solution
DRIV provides a streamlined process for immigrants who already have their Russian driver’s license to be able to travel around freely within Canada in the same capacity. This then helps them to do things such as attend job interviews, work, shop, and more. Providing access to resources which assist with the transition from living in one country to the next will help ease the culture shock that comes with it.
Step One: Identifying Problems
The first step in our process of creating our product, is researching the problems Russian-Canadian immigrants may face in obtaining a driver’s license, and coming up with resources that will help.
Upon researching the issue of transitioning from Russia to Canada, we found that there is a lack of resources to assist in obtaining a Canadian Driver’s license. Without these resources, it is extremely difficult and time consuming to obtain a Canadian driver’s license as an immigrant who has experienced driving in their home country. We felt that we could fill this gap.
The main difference between driving in Russia and driving in Canada, is the side of the road which you need to drive. Secondary to these, are the road signs, traffic laws, and the age at which you can obtain your license. If someone has a license from Russia, he or she may not as easily be able to acquire a Canadian license as someone who came from a country where you drive on the left side of the road.
Because 74% of all Canadians drive themselves to work, we felt that it is an important step for any newcomers to Canada who are used to driving daily in their home country to feel more comfortable in this new culture and environment. This is why we determined that DRIV would be resource which provides users the ability to create a profile, take online lessons and complete quizzes to prepare for the written knowledge test, view their progress throughout this process as well as allow them to book driving lessons through the website to meet the requirements for obtaining their driver’s license or to get comfortable behind the wheel in Canada.
Allowing Russian-Canadian immigrants to take online lessons, as well as book and take in-car lessons will help them get comfortable driving and prep them for their full Canadian license faster and more efficiently.
The first thing I should have done for this process of creating this website, was create wireframes, a sitemap, and some user testing with our target audience before jumping into the prototyping process.
However, as this was my first project with no prior experience, I decided to jump head first, and created the assets for this website, as well as a colour scheme to follow throughout. The main colour scheme for this website was inspired by the colours of the Russian flag; blue, red, and white.
I used the colour blue primarily, as it was the background colour for buttons, the menus, and the details such as pie charts and progress display. Red was used in the home button/logo for the website. White was used as text colour, as well as the background for several forms on the website. Grey was also used throughout for text on lighter backgrounds, text that was smaller/less relevant, and for the buttons on sliding menus.
The assets were created to allow for consistency when creating multiple page
Step Two: Beginning Design Process
I began my prototyping process with creating the home page. I included a very clear onboarding process on this page, which prompts the user to log into their account upon entering. For new users, there is a button underneath the log in button, which allows the user to see if they are eligible for the DRIV offerings.
There is also a call-to-action beside the login box, which reads “start driving today”. This also guides the user to check their eligibility and sign up as a user.
The menu options at the top were chosen based on the what the website specialises in, as well as the user’s “main goals” upon entering the website. By putting “Profile” first, I’m allowing the users of this website an easy way to access their dashboard without having to spend too much time looking.
Step Three: Prototyping
Home Page
The “FAQ” is next, because I feel that most users on the website upon first entering, may have some questions about its purpose and how it can be of use to the user. The “Lessons” tab is next, which allows the user to continue or begin their online lessons as well as take quizzes to prepare for the written knowledge test. There is another “Log In” option, which was put there with a drop down menu, because if a user is no longer on the homepage, but decides they want to log in, sign up, or log out, they can. There is a hamburger menu to the right of these which will display more options for the user that are used less frequently
My next step in creating this prototype, was designing the sub-pages. I will first explore the “profile” sub-page.
This is the page the user will land on as soon as they log in. It gives them a set of menu options available only to eligible members of the website. A greeting is given to the user, along with a reminder of any in-car lessons they have booked.
There are four options on this page. The first option is to “cancel” current bookings, second is to “book” in-car lessons, third is to “view progress” within the course, and third is “lessons”
Profile Page
The main function of this website, the lessons, have their own page which is designed to be as simple to use as possible. On the left are the list of lessons the user has access to, which teaches all aspects of what they need to know in order to drive in Canada. Each lesson has a specific focus, and has a brief written description of the topics which will be covered in the lesson. Below this, is an audio player that allows the user to listen to, and scrub through the lesson. On the bottom right is a button which allows the user to take a quiz on all of the topics taught in the course.
Lessons
Book a test
When the user goes to book an in-car lesson, they will be presented with the soonest availabilities for the instructors, as well as an option to choose neither. This makes the process extremely straight forward for the user, while allowing them the option to decide. By allowing them to press, neither, they have the option to choose a later date that has openings. By connecting the user to the in-car instruction facilities, this allows the user to book in car lessons through the website, eliminating the stressful process of seeking out and booking an in car lesson externally. A user can also set reminders for appointments, cancel their bookings, and view their progress (see below).
Other sub-pages
Below you can see a collection of some of the other pages that will appear on this website, such as:
-
The Eligibility Page, detailing what is needed to be eligible for DRIV’s services and allowing the option to sign up
-
The Sign-Up page, allowing the user to fill in their information to create a profile
-
The Contact Page, with a link to the FAQ, a contact email, as well as a phone number and office hours
-
The FAQ Page, with questions and answers that may be valuable to the user
After creating the main sub-pages of this website, I decided to make every aspect of the prototype usable, turning it into a high-fidelity prototype.
I created every instance of the side menu being open, as well as the drop-down for provinces/territories on every sub-page, error pages, as well as lesson topics and the ability to switch between them. See below for a walk-through of this website.
The Prototype
Moving Forward
Because this was my first ever completed prototype, I feel that it is important to mention key areas where I could have improved upon, and am more mindful of now.
In the beginning stages, I feel that I should have began with a sitemap, so I could organise the pages and the order of menu options to be more in-tune with the flow of the user’s journey throughout the website.
I would then begin creating low-fidelity wireframes, creating only the layout and interface of the website with no colour or content. Then, I should have created a low-fidelity prototype. Using this, I could have conducted some user-testing, to determine what aspects of the website could be improved/changed/taken out, before jumping head-first into the prototyping and page-linking process.
Beyond this, when looking at the overall design and aesthetics of the website, I feel I could have made a few changes to the website. Because of this, I decided to redesign the home page in a way that I feel is a better representation of my UI design skills today.
The biggest change to the website design is the deletion of the top and bottom blue bar. I feel that these make the website look and feel very cramped. I also decided to use a more simple font and design for the home button, as opposed to a logo. I then changed the background photo to more accurately represent the website’s purpose, as well as the colour scheme to align better with the background. As well, the colour scheme is no longer specific to Russia, perhaps opening up the potential for this website to include lessons for immigrants from other countries.
I also decided to centre the log-in box, and update the text colours to have more consistency.
With this recreation, I feel that I was able to improve upon some very crucial design elements and show my improvement from two years ago, to now. Although the layout and the interface of the original prototype could use improvements, I feel that my process and learnings from this is a good indication of my progress as a designer over time.
DRIV - Website Prototype
April 2018
Classification: School Project, Group of 4
Roles: UX/UI Design, Research
Tools Used: Figma, Illustrator
DRIV - Website Prototype
April 2018
Classification: School Project, Group of 4
Roles: UX/UI Design, Research
Tools Used: Figma, Illustrator