RESEARCH/UX/UI FOR AN

EDUCATIONAL WEBSITE - HIT-N-BRIBE

RESEARCH/UX/UI FOR AN

EDUCATIONAL WEBSITE - HIT-N-BRIBE

RESEARCH/UX/UI FOR AN

EDUCATIONAL WEBSITE - HIT-N-BRIBE

BRIEF

Research has found that there are major overlaps between countries with higher corruption and traffic accident rates, as people tend to act more careless when they know they can buy their way out of trouble.

The topic is something that the majority of the Canadian public is not aware of at all.

Research has found that there are major overlaps between countries with higher corruption and traffic accident rates, as people tend to act more careless when they know they can buy their way out of trouble.

The topic is something that the majority of the Canadian public is not aware of at all.

In this project, my group of 6 members was invited to analyze and edit service design practices of the Cafeteria of Emily Carr University located in Vancouver.

After thorough research, we chose to focus on spatial challenges, issues in overall user experience and certain branding gaps.

One of the less thought about dangers has been the adhesive conduction of metal poles in freezing temperatures.
Children often fall victims to such occurrence which can lead to dangerous health conditions such as hypothermia.

To further showcase the correlation, Hit-n-Bribe will be used as an interactive website, demonstrating the chances of a person committing bribery in various countries around the world.

Young adults (18-25) were chosen as the target audience, due to commonly being the age category when people learn how to drive while often being more reckless due to the lack of experience.

To further showcase the correlation, Hit-n-Bribe will be used as an interactive website, demonstrating the chances of a person committing bribery in various countries around the world.

Young adults (18-25) were chosen as the target audience, due to commonly being the age category when people learn how to drive while often being more reckless due to the lack of experience.

To further showcase the correlation, Hit-n-Bribe will be used as an interactive website, demonstrating the chances of a person committing bribery in various countries around the world.

Young adults (18-25) were chosen as the target audience, due to commonly being the age category when people learn how to drive while often being more reckless due to the lack of experience.

RESEARCH

RESEARCH

RESEARCH

The main resource used was Transparency International- a public, independent organization, further supported by their Global Corruption Barometer that on annual basis collect and analyze data regarding corruption rates within the public sector.

The main resource used was Transparency International- a public, independent organization, further supported by their Global Corruption Barometer that on annual basis collect and analyze data regarding corruption rates within the public sector.

The main resource used was Transparency International- a public, independent organization, further supported by their Global Corruption Barometer that on annual basis collect and analyze data regarding corruption rates within the public sector.

The dataset for the global death toll of traffic accidents was taken from Our World in Data, and the theory itself was supported by a line of articles, all linked within sources cited at the end.

The dataset for the global death toll of traffic accidents was taken from Our World in Data, and the theory itself was supported by a line of articles, all linked within sources cited at the end.

The dataset for the global death toll of traffic accidents was taken from Our World in Data, and the theory itself was supported by a line of articles, all linked within sources cited at the end.

LOW-FIDELITY PROTOTYPE

LOW-FIDELITY PROTOTYPE

LOW-FIDELITY PROTOTYPE

For the Low-Fidelity prototype, I have created a sketch depicting the basic set up of the website interface and later developed it into a primitive Figma prototype with a simple pop-up on-click info function.

For the Low-Fidelity prototype, I have created a sketch depicting the basic set up of the website interface and later developed it into a primitive Figma prototype with a simple pop-up on-click info function.

For the Low-Fidelity prototype, I have created a sketch depicting the basic set up of the website interface and later developed it into a primitive Figma prototype with a simple pop-up on-click info function.

At this stage, the primary focus fell on combining the illustrative and textual information in a visually cohesive manner.

At this stage, the primary focus fell on combining the illustrative and textual information in a visually cohesive manner.

At this stage, the primary focus fell on combining the illustrative and textual information in a visually cohesive manner.

USER-TESTING I

USER-TESTING I

USER-TESTING I

For the first user-testing, the 4 participants were asked about their driving experience; familiarity with the corruption statistics and its correlation to traffic incidents; and finally, their thoughts on the prototype’s interactive feature.

For the first user-testing, the 4 participants were asked about their driving experience; familiarity with the corruption statistics and its correlation to traffic incidents; and finally, their thoughts on the prototype’s interactive feature.

For the first user-testing, the 4 participants were asked about their driving experience; familiarity with the corruption statistics and its correlation to traffic incidents; and finally, their thoughts on the prototype’s interactive feature.

Key takeaways:

  • Lack of context leads to confusion behind intent

  • Legibility issue created by the map’s full view

Key takeaways:

  • Lack of context leads to confusion behind intent

  • Legibility issue created by the map’s full view

Key takeaways:

  • Lack of context leads to confusion behind intent

  • Legibility issue created by the map’s full view

MID-FIDELITY PROTOTYPE

MID-FIDELITY PROTOTYPE

MID-FIDELITY PROTOTYPE

Additions and improvements based on the previous feedback:

  • Information-based intro page, for better context understanding

  • Zoom-in and out button for better map overview

  • Navigation bar to supplement additional pages

Additions and improvements based on the previous feedback:

  • Information-based intro page, for better context understanding

  • Zoom-in and out button for better map overview

  • Navigation bar to supplement additional pages

Additions and improvements based on the previous feedback:

  • Information-based intro page, for better context understanding

  • Zoom-in and out button for better map overview

  • Navigation bar to supplement additional pages

USER-TESTING II

USER-TESTING II

USER-TESTING II

During the second user-testing, the 3 new participants repeated the same procedure as the first set of interviewees.

During the second user-testing, the 3 new participants repeated the same procedure as the first set of interviewees.

During the second user-testing, the 3 new participants repeated the same procedure as the first set of interviewees.

Key takeaways:

  • Simplify the info-page into more digestible chunks

  • Add world overview with display of the statistics for all countries

  • Adjust the navigation bar and

  • Zoom-in/out functions

Key takeaways:

  • Simplify the info-page into more digestible chunks

  • Add world overview with display of the statistics for all countries

  • Adjust the navigation bar and

  • Zoom-in/out functions

Key takeaways:

  • Simplify the info-page into more digestible chunks

  • Add world overview with display of the statistics for all countries

  • Adjust the navigation bar and

  • Zoom-in/out functions

DESIGN SYSTEMS

DESIGN SYSTEMS

DESIGN SYSTEMS

Colors

Colors

Colors

Typography


Typography

Road Rage

Roboto Flex - Medium

Roboto Flex - Bold

Typography


Typography

Road Rage

Road Rage

Roboto Flex - Medium

Roboto Flex - Medium

Roboto Flex - Bold

Roboto Flex - Bold

Additional Elements

Additional Elements

Additional Elements

HIGH-FIDELITY PROTOTYPE

HIGH-FIDELITY PROTOTYPE

HIGH-FIDELITY PROTOTYPE

Final implementations based on the second user-testing session:

  • World overview tab with hover states for smaller countries

  • Additional statistics provided on the country overview page

  • Simplification of the text provided on the intro-page into smaller columns for easier navigation

  • Final adjustment of design elements

Final implementations based on the second user-testing session:

  • World overview tab with hover states for smaller countries

  • Additional statistics provided on the country overview page

  • Simplification of the text provided on the intro-page into smaller columns for easier navigation

  • Final adjustment of design elements

Final implementations based on the second user-testing session:

  • World overview tab with hover states for smaller countries

  • Additional statistics provided on the country overview page

  • Simplification of the text provided on the intro-page into smaller columns for easier navigation

  • Final adjustment of design elements

The final prototype is available bellow and is accessible through this link.

The final prototype is available bellow and is accessible through this link.

The final prototype is available bellow and is accessible through this link.

SOURCES CITED

SOURCES CITED

SOURCES CITED

Sources Cited:
“Corruption Perception Index.” Transparency.org, 2019, www.transparency.org/en/cpi/2019/. Accessed 2024.


“Death Rate due to Road Traffic Injuries.” Our World in Data, 2019, ourworldindata.org/grapher/death-rate-road-traffic- injuries. Accessed 2024.


Hua, Law Teik, et al. “The Direct and Indirect Effects of Corruption on Motor Vehicle Crash Deaths.” Accident Analysis & Prevention, vol. 42, no. 6, Nov. 2010, pp. 1934–1942, https://doi.org/10.1016/j.aap.2010.05.015. Accessed 22 Feb. 2021.

Sources Cited:
“Corruption Perception Index.” Transparency.org, 2019, www.transparency.org/en/cpi/2019/. Accessed 2024.


“Death Rate due to Road Traffic Injuries.” Our World in Data, 2019, ourworldindata.org/grapher/death-rate-road-traffic- injuries. Accessed 2024.


Hua, Law Teik, et al. “The Direct and Indirect Effects of Corruption on Motor Vehicle Crash Deaths.” Accident Analysis & Prevention, vol. 42, no. 6, Nov. 2010, pp. 1934–1942, https://doi.org/10.1016/j.aap.2010.05.015. Accessed 22 Feb. 2021.

Sources Cited:
“Corruption Perception Index.” Transparency.org, 2019, www.transparency.org/en/cpi/2019/. Accessed 2024.


“Death Rate due to Road Traffic Injuries.” Our World in Data, 2019, ourworldindata.org/grapher/death-rate-road-traffic- injuries. Accessed 2024.


Hua, Law Teik, et al. “The Direct and Indirect Effects of Corruption on Motor Vehicle Crash Deaths.” Accident Analysis & Prevention, vol. 42, no. 6, Nov. 2010, pp. 1934–1942, https://doi.org/10.1016/j.aap.2010.05.015. Accessed 22 Feb. 2021.

Mariia Semenova ©2024

Mariia Semenova

©2024

Contact:

Email

LinkedIn

Mariia Semenova ©2024