UI/UX CASE STUDY: Odlan Website Re-design

Jasmin H.
6 min readAug 15, 2022

--

Odlan

Re-design the ODLAN.ca webpage for mobile and desktop layout to allow visitors particularly seniors complete their research and receive more traffic from the +2LGBTQS community.

Role: UI/UX Designer

Client: Ontario Digital Literacy and Access Network
Scope: User Research, Analysis, Site Map, Fidelity Screen

Re-Design: Mobile + Desktop
Timeline: 3 weeks
Tools: Figma, Google form, Miro, Zoom, Trello

Problem

2SLGBTQ+ community members often experience heightened barriers when accessing and using online resources. ODLAN specifically focuses on 2SLGBTQ+ older adults because they are at an increased risk of experiencing social isolation and loneliness.

Our focus will be to create a refined navigation menu for easy comprehension to accommodate those whose technical skills are novice.

Objective

As per the request of Odlan’s CEO, we were tasked with redesigning their website to optimize the mobile viewing experience. The goal is to create a functional, well-designed website for the Ontario Digital Literacy and Access Network website and their resource hub

  • Improve ODLAN.ca to display a visually aesthetic not-for-profit website
  • Remove technical barriers and display a clear format for visitors who want access to online resources
  • Accessibility! members of the 2SLGBTQ+ community have an easier time accessing information if they are aware of how its websites are laid out.

Background

Currently, Canadians are already overwhelmingly busy with work, family and leisure. Accessing online resources can be challenging even for the average person and often falls short of importance when keeping up to date with the latest information. Most people rarely if ever consider the potential barriers 2SLGBTQ+ older adults encounter when adapting to digital service provisions.

At the moment there are plenty of reasons why a person would visit the ODLAN website, such as: Educational resources, consulting services, advocacy and viewing outreach programs. Odlan.ca provides a platform for individuals to come and feel a sense of equal opportunity and have access to virtual service provisions focusing primarily on the 2SLGBTQ+ community.

Especially when underprivileged community members already experience heightened barriers in digital literacy with a potential to feel social isolation and loneliness. The challenge for Odlan website visitors is navigating all the topics and information that’s provided in a clear and aesthetically pleasing format, which can often feel unrelated to the purpose of the website

Research

The team conducted (6) interviews to understand how people connect, what they use for establishing the connection and where they educate themselves

The ideal participants were a mixture of members of the 2SLGBTQ+ and older adults that potentially visit ODLAN.ca for educational resources, training and research purposes.

The goal was to answer:

  1. How comfortable are you navigating the internet?
  2. As a member of the 2SLGBTQ+ that uses Odlan.ca do you feel the website does a proper job of providing all the resources in a clear and understandable format?
  3. What is your biggest pain point when using Odlan.ca

Interview pain points:

  • Members of the 2SLGBTQ+ often have difficulty accessing the internet, in particular, the senior users of the community. With the occurrence of the pandemic, members that were already feeling secluded, now feel a heightened social isolation.
  • Members of the 2SLGBTQ+ are accessing the internet to educate themselves by using online resources and are looking to join an online community in order to alleviate some of their internet barriers
  • Along with struggling to use the internet’s resources, individuals within the 2SLGBTQ+ feel anxious and reluctant to go online because most websites they visit rarely cater to their demographic and understand their pain points
  • Individuals would like to access the internet and Odlan.ca to reach out to other individuals that share similar interests and issues, which can give them a sense of inclusivity in the online community
  • Our users prefer to increase digital literacy by watching simple tutorials on their community websites

Affinity Map

Once interview data was collected we conducted an affinity map to assist in understanding our user.

As we began to understand our user patterns it became imminent to assign key findings into 4 main categories — Pain points, Other Challenges and Opportunities

Research Insight

Senior users in the 2SLGBTQ+ community have a difficult time accessing digital resources and educational guides.

Through our user research, we noticed seniors were lacking confidence when using computers or digital products. They wanted to connect with people in their 2SLGBTQ+ community but had no way of doing so. Many preferred educating themselves with video content since pauses were possible while following along on screen.

Although Odlan.ca does display resources and PDFs to enhance education for its users the web pages display information in a rolling list with no option to search the website for any specific program. Therefore we will provide a search bar option for users to input queries and eliminate having to go through multiple pages to find what they are looking for. This will also allow users to gain confidence in navigating the website.

Persona

The Non-Binary Senior Citizen

User Journey

Glenda is searching for a way to visit & learn from websites with online resources that target their demographic

Site Map

Once card sorting was complete a site map was generated. We established refining the navigation menu was a priority and needed to be concise to allow users the ability to find information that they require.

Style Guide

We wanted to choose a style guide to accommodate colour and font accessibility while still aligning with Odlan’s theme.

Desktop Before + After

Solution + Improvements

Odlan.ca does a good job of listing all of its resources and information with a legend to alleviate a user’s stressors of learning new buttons and features but they provide their information in pamphlet format and unnecessary buttons to press in order to read through their latest articles. As such we want to redesign their ‘Community Updates’ into a modern blog format that displays their information in a clear and concise layout which will also remove any unnecessary buttons that can cause confusion to a user.

We also believe that a person visits Odlan.ca for the sole purpose of education and receiving resources to eliminate their digital literacy barriers but feel the website does not provide a clear message on their purpose/services for a user that already experiences digital challenges. As such we will reformat their website to display ODLAN’s key purpose and vision on the homepage with a page dedicated to showcasing their services

FULL CASE STUDY DECK

My Takeaways

Overall working on this project was positive and insightful

Opportunity — Having the opportunity to educate ourselves on AODA compliance was eye-opening

Inclusiveness — Working on a project that ensured inclusiveness felt impactful

Teamwork — Working with a team that provided positive reiterations and feedback allowed each of us to learn and grow

If we had more time our future development would be to expand the desktop layout of Odlan.ca to further be AODA compliant as well as elaborate events section and resources featured on the mobile layout

Thank you for reading 😀

--

--