1 of 49

1

2 of 49

2

3 of 49

3

4 of 49

4

5 of 49

5

6 of 49

6

7 of 49

Proto Persona

7

Meet the Duncan 151A Reserve from Alberta

8 of 49

Proto Persona

8

9 of 49

User Scenario

Our users (The duncan 151A Reserve) would visit the CER website to gain more information on any of the proposed or ongoing pipeline projects to find out if any are threatening to their everyday lives.

They would need the CER website to discover ways to be more involved in the processes such as register or participate in a hearing as well as submit any concerns they may have with the projects.

​

We have created 2 user paths:

  1. Register or submit a request to participate in a hearing
  2. Submit a complaint

​

​

9

10 of 49

10

Examples Of The Meandering CER Primary Navigation Bar

11 of 49

11

12 of 49

12

13 of 49

Mobile Annotated Agency Navigation

13

https://www.figma.com/file/gfJGMKuylIgF0mbbuzqUfF/Desktop-%26-Mobile-Pages-Redlining-CER?node-id=0%3A1

14 of 49

Path 1: Register or Submit a Request to Participate in a Hearing

​

  • From home page, select ‘Applications and hearings’ under ‘Services and information’
  • Be taken to a new page -select ‘participate in a hearing’ under ‘services and information’
  • On the Participate in a hearing page, select ‘Participation portal’ from the left hand side menu
  • Users can
    • Sign in to access their dashboard
    • Can contact a process advisor
    • View any available hearings they can participate in

​

14

15 of 49

Path 1 Screen Flow: Register or Submit a Request to Participate in a Hearing

15

16 of 49

Path 2: Submit a Complaint

  • From Home Page, click “Consultation and Engagement” and click “Land Matters Guide” then the subheading “Complaint Resolution”
  • From the “Complaint Resolution” page, the User is given information on what is considered a complaint followed by “Submit a Complaint”
  • User clicks the link to submit their complaint
  • User is taken to the CER Complaint Form page where they are to fill out a 3-page PDF document outlining their concerns
  • There is no clear signifier to submit the complaint. There is a link provided for an email that only provides a copy of the original complaint.
  • No notification that the complaint has been successfully submitted

16

17 of 49

Path 2 Screenflow: Submit a Complaint

​

17

18 of 49

18

19 of 49

19

20 of 49

20

21 of 49

21

https://www.figma.com/file/AKKaZD2rky1PJMK40HFFDd/CER?node-id=0%3A1

22 of 49

22

23 of 49

Card Sorting

23

https://www.figma.com/file/OlMld7w3RZXIO1ahBu7JGk/CER-Card-Sorting?node-id=0%3A1

24 of 49

Site Map

24

https://www.figma.com/file/OlMld7w3RZXIO1ahBu7JGk/CER-Card-Sorting?node-id=0%3A1

25 of 49

25

Why Government websites are mostly in Blue in color?

​

Blue gives the feeling of calmness, implies trust, reliability and professionalism – which is why blue appears so frequently in corporate colour schemes, the police, governments, etc.

Blue represents what people want from an organization.

26 of 49

26

27 of 49

27

28 of 49

28

29 of 49

Low-Fi Prototype

​

29

https://www.figma.com/file/F0E72CKBsHVBwWfMoX0QE3/CER-Prototype?node-id=0%3A1

30 of 49

30

31 of 49

31

32 of 49

CER Navigation Prototype Desktop

​

32

Click the image for the prototype link

33 of 49

CER Navigation Prototype Mobile

​

33

https://www.figma.com/file/cXereKT4mXsACABRQlLzME/CER-Mobile-Final?node-id=0%3A1

34 of 49

Final High-Fidelity Prototype - Mobile

34

https://www.figma.com/file/4Xb3UffuyWMQOZPdQh2HwN/C-E-R-Mobile?node-id=0%3A1

35 of 49

35

36 of 49

5-Second User Test: Desktop

36

https://app.usabilityhub.com/do/73967d71101f/d45f

  • User was able to identify what the website was
  • They were able to remember key links such as ‘contact us’ and ‘search’
    • Which are key links on the website
  • Confirms that the design of the home page will be easy to navigate through

37 of 49

5-Second User Tes: Mobile

37

Based on the 5 second user test, the redesign was able to:

​

  • Allow user to easily recognize what the website is
  • Makes navigation easier
  • UI is cleaner
  • Yellow highlight/accent made the app visually appealing
  • Encourage engagement through images used

https://app.usabilityhub.com/do/85f543696eba/64c2

https://app.usabilityhub.com/tests/85f543696eba/results/f511c857fc6a

Test:

Result:

38 of 49

38

39 of 49

39

40 of 49

40

Home Page Improvements

​

1. “Land and Property Issues” primary tab was added to further assist User navigation. Secondary tabs include: “Complaints”; “Land Use Compensation”; “Right of Entry”; “Statement of Concern”

​

2. CER logo added to all pages on the top left corner of the hero image. Clicking it brings Users back to the home page.

​

3. Drop-down menus are now at 75% opacity. This was done mainly for esthetic purposes while maintaining visual accessibility.

Desktop Usability Testing Improvements

41 of 49

41

42 of 49

Desktop Usability Testing Improvements

42

1: The CER logo is interactive. In the hover state, the 2nd half of the logo turns green and orange. Orange representing our Indigneous heritage whereas the green symbolizes the shift towards green/ renewable energy.

​

2: Numbers on the bottom of the text turn orange in a hover state to notify Users of the number of slides.

43 of 49

43

Desktop Usability Testing Improvements

​

* New “Complaints” page with streamlined buttons and improved layout

44 of 49

Final High-Fidelity Prototype

Desktop

44

Click image to view prototype

45 of 49

Final High-Fidelity Prototype

Desktop

45

46 of 49

Final High-Fidelity Prototype

Mobile - Complaints

46

https://www.figma.com/file/4Xb3UffuyWMQOZPdQh2HwN/C-E-R-Mobile?node-id=0%3A1

47 of 49

STYLE TILE

47

https://www.figma.com/file/cXereKT4mXsACABRQlLzME/CER-Mobile-Final?node-id=0%3A1

48 of 49

48

49 of 49

49