Club Website Design Process

Club Website Design Process

Screenshot of home page of final club website

Objective

CSSMB became an active club in spring 2020. During spring and over the summer, our members worked to develop a website to better connect with potential and current members and to reach a diverse population of students. With the mode of education switching to online due to COVID-19 risks this website was designed to serve as an online alternative to some in-person resources by including tutorials and other content.

Process

INITIAL RESEARCH

We conducted 11 interviews & surveyed 15 people. We found that people in general have a lot of reasons for not wanting to join clubs. 

Clubs need to be clear about what they are offering and make it less stressful for new members. A lot of people do see professional benefits in joining a club. Most people want a social aspect to be the main part of the club. People are not joining clubs, mainly because they are too busy or they are not getting information about clubs they would like.

COMPETITOR RESEARCH

Many of the clubs’ websites we found focus on showcasing their projects heavily. However, many sites had low activity and weren’t currently being utilized.

Screenshot from Herscript website
Screenshot from Design for America website

AFFINITY MAPPING

Based on our interview data we found that potential users had a lot of reasons not to join a club. Therefore, for our affinity mapping exercise we decided that our club website should be inviting and clearly showcase the benefits that come with membership.

Affinity map for the club website

PERSONAS

We based the primary persona off of a student who is curious and wanted to learn more about UX design but lacks information. They also require motivation to join a club because they’re shy and introverted so joining a club is not an easy task for them.

User persona for Elizabeth Montoyia, who would be interested in joining the club

As for the Secondary Persona, they’re based on a president of a club. They love to learn and teach new things to their fellow members. They desire to have all of their members be involved and feel welcomed to a place where everyone shares the same passion. The problem is, there are no platforms to showcase the events, meeting times, and also projects of the club so more students who are interested may learn about the club. 

User persona for Brandon James, a UX club leader

JOURNEY MAP

User journey map for the club website experience

Design

MOODBOARD

Based on our research we compiled images and typography that we felt conveyed a sense of our club and would be effective at communicating our vision.

Moodboard for the club website including a blue and green color scheme, and modern typography and icons

SITEMAP

Next we created a potential map of the different pages.

Mind map for the navigation structure of the club website

INITIAL SKETCHES

Nicole Freeman's low fidelity sketch for the layout of the club website homepage
Aya Cabero's low fidelity sketch for the layout of the club website
Anna Stubler's low fidelity sketch for the layout of the club website homepage

MOCKUP ITERATIONS

Anna Stubler's design direction for the club website
Nicole Freeman's design direction for the club website
Calvin Norwood's design direction for the club website

Final Design

Here is our final design we based the website off of which includes tutorials, projects, and other club information.

Final high fidelity prototype image made in Adobe XD