HHSA Website
an imagined responsive web design for a student-led Hip Hop organization.
UI Design & Front-End Development
2 weeks
@ HHSA
ℹ️ Context
For my Web Design and Development class at Shoreline Community College, I chose to design and code a prototype for UWHHSA’s website. I wanted to improve and update the interface of the existing website so it would align with the RSO’s branding and could attain better reach and engagement from users.
🎯 Site Description and Goal
Before starting my design process, I asked myself some questions to clarify my vision and mission for this website.
Who is this website for?
The HHSA website is made for enthusiasts of Hip Hop in the Seattle area, and any University of Washington student.
What touchpoints do I want them to make?
I mainly want them to browse around the website via buttons titled "about", "events" and a CTA titled "join us" for information about the club's events and how they can participate in them.
How can we keep them engaged and feel satisfied after visiting the website?
We can keep visitors engaged by introducing relevant and recent photographs and videos of events and making the website organized and intuitive to navigate.
🗺️ Site Map
Because I knew that my website was purely an informational source, I understood that its layout did not have to be complex and should only consist of a navigation bar and a few simple pages of information. I established that there were only four crucial pages visitors would be interested in.
🚧 Low-Fidelity Prototype
📝 User-Testing
Due to time constraints and a looming deadline for this project, I only had the opportunity to conduct one user test. I allowed the user to navigate the website while I observed for moments of hesitation, confusion or ease and flow. My main takeaways from this user test were:
1. The links on the page were not obvious or accessible.
Although the links to volunteer or apply for positions were included on the website, the user didn't know where they were and didn't think that you could directly apply from the website. Adding a more apparent and intuitive CTA button such as a “Click here to apply!” or an obvious button can grab users’ attention better.
2. The interface of the website was not engaging enough.
I understood that student club websites generally lack appeal to audiences outside those who are already interested in their topic. In order to address this concern and make the website more engaging and interesting, adding more imagery throughout the website and filling up the Resources page could help draw users’ (outside our target audience) attention to our information architecture.