Canada Energy Regulator - Responsive Website Redesign
DESCRIPTION
The aim is to redesign a government website of our choice and ensure the new website is responsive from desktop to mobile.
My Role and Responsibilities
USER
EXPERIENCE DESIGNER
USER
INTERFACE DESIGN
Timeline
5 weeks
Year
2020
Problem
Users/people comparing the current website to a maze, it's difficult to find the information they’re seeking, which leads to some giving up before achieving their goal.
Solution
Redesigning the menu by revising the categories and applying architect information to the content
Tools
Figma . Miro . InVision . Google Slide . Photoshop
We were tasked to research the UI pain points that users experience of this government website. To synthesize that research into meaningful data and create a user persona from it, as well as execute a heuristic evaluation of a website, conducting user tests and building a mood board
User Persona
we started by creating two proto personas. The first is Trevor Ford, Corn, soybeans and other grains farm owner and Aanya Vihaan, a University of Toronto (UofT) student in Environment and Energy
But in the end, we decide to further the project with "Trevor Ford" due to the minimum time allocated to the project
Aanya Vihaan (Student)
Trevor Ford (Farm Owner)
User Path Statement
We decided to study a user path during their process of reaching their goal on this government website. This process with help understand what needs to be improved.
Scenario: The user is trying to file a compensation application because he thinks his settlement from energy company to use his land is not enough, and he failed to negotiate for more compensation. Since he has no experience filling this application, he wants to find a latest sample application form that can reflect his situation so he can use as a reference.
Website User Heuristic Testing (Path)
STEP 1
STEP 2
STEP 3
STEP 4
STEP 5
User Wireflow
This is the wireflow drawn from the website screenshot to represent the user flow
FRAME 1
FRAME 2
FRAME 3
FRAME 4
FRAME 5
Guerilla Usability Testing
We defined 4 objectives, then conducted 5 Guerilla usability test on Zoom (Due to COVID-19)
OBJECTIVES
INTERVIEWS
“For somebody who doesn't know the rules and regulations and is just looking for probably like an extra remuneration or something. This is so confusing” Divya C.
“Search results did not come up with anything and hard to find what you're looking for” Camilla
Data Prioritization Matrix
After the user interviews, we had a lot of data, that needed to prioritized, hence the use of prioritization matrix below.
Website Heuristic Evaluation
FRAME 1
FRAME 1: ANNOTATIONS
1. User Control & Freedom
Menu options are confusing. Add a tab for guidance and first steps.
2. Clarity of content
Slides are not helpful. They seem to be oriented to showcase the work the organization has done instead of the information users might look for.
3. Navigation efficiency
Highlighting most requested documents in a way that is more noticeable could increase efficiency of use.
4. Functionality
Highlighted items of the site are confusing. Better to display a map of the site with a more intuitive categorization of information.
5. Efficiency and functionality
Clear contact information should be provided without a click
FRAME 2
FRAME 2: ANNOTATIONS
1. Consistency and Standards
They way “Services and information” is displayed in the home page is very different from the way they are displayed here.
2. Clarity of content
It´s not clear how the new information displayed here is related to applications and hearings.
3. Navigation efficiency
Most users spent a long time on this page trying to figure out how to move forward. Consider adapting links to make navigation more efficient
FRAME 3
FRAME 3: ANNOTATIONS
1. Consistency and Standards
Icons and overall aesthetics is very different in this page, compared to the previous two.
2. Clarity of content
It is not clear how the shortcuts are useful for submitting applications and regulatory documents (see “tools” or “proponents”)
3. Redundancy
This item is also part of a subsection of the nav bar. Avoiding redundancy is sometimes important for clarity and ease of navigation.
4. Efficiency
This space could be taken advantage on and display a map with all the steps that users would need to follow for submitting applications
FRAME 4
FRAME 4: ANNOTATIONS
1. Navigations
Though it’s good to have the breadcrumbs, the way these categories are related is unclear for users
2. Consistency & Aesthetics
Different fonts with similar titles looks unpleasing
3. Efficiency and proximity
The link to the document the user is looking for is too far down.
Our goal is to understand how users navigate the website.
OBJECTIVES
We set up 5 objectives, then conducted 2 mobile and 2 desktop usability tests
INTERVIEWS
“The page is too text heavy after click “apply”, text size for title and body are very similar, hard to tell the difference and who we are and what we do” is duplicated (one as secondary category and one as tertiary category Henry.
“Everything is crowded and text-heavy Like they set a background pattern for each category. “Export and import ”page needs to scroll left or right which is uncomfortable. Like the web notifies something you missed before you go to the next stage.” Jacob
Data Prioritization Matrix
After the user interviews, we had a lot of data, that needed to prioritized, hence the use of prioritization matrix below.
I designed 2 different Card-layouts for the mobile design: Layout A and Layout B. The plan is to do an A/B Test, this will provide more choices to users and learn more elements that impact the their experiences and behavior.
LAYOUT A
LAYOUT B
Navigation Usability Tests
I set up objectives and created 3 tasks to understand how users navigate through the menu and footer of the desktop and mobile, then conducted 2 Mobile and 2 Desktop usability test
OBJECTIVES
MOBILE
DESKTOP
RESULT
After synthesizing data from the user interviews, the layout A was proven to provide more card at first glams and was more appealing to users
I designed 2 different Card-layouts for the mobile design: Layout A and Layout B. The plan is to do an A/B Test, this will provide more choices to users and learn more elements that impact the their experiences and behavior.
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
“For somebody who doesn't know the rules and regulations and is just looking for probably like an extra remuneration or something. This is so confusing”
Divya C.
“Search results did not come up with anything and hard to find what you're looking for”
Camilla