Improving accessibility for nwPlus' websites

Restructuring the nwPlus websites to enhance usability and ensure clarity for all users.
ROLE
Visual/UX Director
TEAM MEMBERS
6 Designers
PROJECT LENGTH
April 2024 - Present
TOOLS
Figma

00. What is nwPlus?

nwPlus is a student-led club supporting aspiring programmers and designers through hosting 3 flagship hackathons throughout the year: HackCamp, nwHacks, and cmd-f.

As the director of the design team, I lead a team of 6 designers in creating websites, promotional materials, and internal tools for our events. On top of the design work, I organize and facilitate meetings, work delegation, and social events to help track task progression, team chemistry, and capacity of designers.

01. Project Overview

One of the design team’s main task every year is to design the websites for our flagship hackathons. These websites are the heart of our events—it is where hackers, sponsors, and mentors/volunteers alike go to find out relevant information, answers to their questions, and most importantly, how to get involved. Through our websites, we hope to captivate each user enough to want to take part in some shape or form.

This year, we also focused on improving our club website, nwplus.io.
OUR MOBILE WEBSITE DESIGNS FOR THE 23/24 YEAR
THE PROBLEM
Looking back at our previous website designs, I noticed that the structure had remained fairly consistent. Although for the most part, the core information was being conveyed, some core problems stood out:
Key highlights and information were missing
Space on the website was not being optimized
Lack of clarity for sponsors, mentors, and volunteers

So, we asked...

How might we effectively use our websites to convey relevant information to three different audiences (hackers, mentors/volunteers, sponsors), while still upholding the quality of our visual graphics and maintaining fundamental design principles?

02. Identifying the Core Issues

Maintaining the status quo is always an option because It’s safe and we know it works. However, in a time where the tech industry is constantly innovating, we too need to improve and innovate.

Following the pandemic, the eagerness of aspiring coders and designers to participate in hackathons has been higher than ever before.
As a club who has been hosting hackathons since 2014, it is of upmost importance to maintain the quality of our events and continue exceeding our attendee's expectations. This happens in the form of consistently advancing our designs and coming up with solutions that make, not only the hacker experience better, but also better for sponsors, mentors, and volunteers.
OUR CORE USERS + WHAT THEY CARE ABOUT AS A USER

Hackers

+ What is a hackathon?
+ Lived experiences
+ Answers to FAQ
+ Where to apply

Sponsors

+ Benefits of sponsoring
+ Statistics from previous years
+ What sets nwPlus apart?
+ How to get involved

Mentors/Volunteers

+ Benefits of helping at our events
+ What you do as a mentor/volunteer
+ Necessary qualifications
+ Where to apply
OUR APPROACH 
After understanding the needs of each core user, we began researching different hackathon and event websites. Each designer was tasked to compile a list and from there, we pointed out the core problems of our existing websites, along with how we could implement improvements.
THE MOST PROMINENT ISSUES
📷
We weren’t showing any lived experiences from our events (e.g. photos, videos, testimonials, etc.)
💬
The relevance of the information varied depending on who the stakeholder was
🔔
During our “off season” (when no events were taking place), there was no CTA available for users to stay in the loop
NEXT STEPS
With the list we compiled, we decided to widen the discussion and bring in the other executive teams to see where they believed that improvements could be made. This included teams like EDI, logistics, sponsorships, marketing, and our developers.

In our meeting with these teams, we were exposed to new perspectives and ideas. We were given resources like Microsoft’s accessibility guidelines and we were able to effectively prioritize the changes we wanted to make, while discussing the scope and feasibility from the implementation side.

03. Ideating a New Structure

Each designer created different screens ideas that incorporated the new improvements and how it could be shown on the website.
From there, we created a tentative layout that we shared with the executive team to get feedback.
WIREFRAMES CURATED BY EACH DESIGNER
From feedback, we concluded that implementing separate pages for the different stakeholders was beyond the scope for the year. However, it remains something that we want to keep in the backlog for the future.
BRINGING IT ALL TO LIFE
With our improved layout in mind, we began designing our first hackathon website of the year, HackCamp.

04. The Final Result

Our first completed hackathon site for the 24/25 year addresses a majority of the pain points discovered.

05. Next Steps

Although we have begun slowly implementing the improvements into our website structure, our jobs not done. There are always more ways to improve our websites and make them even better. Here are just some of the ideas our team wants to implement into future websites:
👥
Creating separate pages for different stakeholders, so the information is tailored towards each user group
💖
Incorporating more accessibility considerations into our designs
📜
Condensing our website information so that users don’t scroll away before reaching the end of the site

don’t be a stranger, let’s connect! ദ്ദി(˵ •̀ ᴗ - ˵ ) ✧

freshly made with 💌 and 🧃
© 2024 by angelina hsu