The Weekend Warriors
Timeline: February – March 2022
Deliverables: Website Homepage ReDesign
Team: Self-directed with feedback from mentor and peers
Role: UX/UI Designer
Tools: Figma, Adobe Illustrator, Adobe Photoshop
The Weekend Warriors is an outdoors club founded at Drexel University. The club’s members consist of undergraduate students who act as trip leaders. As trip leaders, members of this club lead Drexel students who are not members on outdoor trips. These trips are varied, from kayaking down rivers in New Jersey to backpacking on the Appalachian Trail and skiing in the Poconos. If a student wants adventure, The Weekend Warriors makes it possible. Their main advertising platform is Instagram where they have flyers and posts to get students to sign up for upcoming trips on their website.
Background:
Design a new and easy to use homepage
Make sure the homepage is accessible to all
Objectives:
Step 1: Empathize
The Weekend Warriors just finished the process of transitioning their old website to a new one. Their old one ran into errors as it was created by a student who graduated and was no longer in the club. The new website that was created has caused a decline in trip participation because Drexel students have difficulty navigating the homepage of The Weekend Warriors’ new site. Being a member of The Weekend Warriors, I could not stand by and watch as our trips were being canceled due to a lack of student participation that stemmed directly from our own website’s lack of user flow. To find a solution to this I asked the question:
“How might we streamline a website’s homepage experience to get better participation on our trips?”
In order to accomplish this, we must deep dive into who our users are and what kind of experiences they have when using the new website. The end goal will be to have a homepage where students know exactly where to find new trips and information without hesitation.
Problem
When on an outdoor hiking trip with The Weekend Warriors this past month, I interviewed two trip leaders and five participants. I used these interviews to build the user persona. After the interviews, I summarized the user research and created a user persona to represent all of the website’s users.
User Persona/Research
Step 2: Define/Ideate
While redesigning the homepage of The Weekend Warriors’ website, I also researched similar clubs/organizations to get inspiration from their sites. I then decided to create a full sitemap of a successful website to better understand what works when designing a homepage.
Sitemap
While researching for a user persona I also questioned the interviewees on how their experiences were with the current website. One major theme I found throughout the interviews was that users expressed issues with understanding what the website’s main function was as there was little to no information about the trips. Another big issue mentioned was that some of the text on the homepage was difficult to read and did not seem to reflect The Weekend Warrior brand.
User Feedback
Taking into account all of my research and feedback from the users, I began drafting up sketches of a new homepage. I used inspiration from a variety of companies that sell outdoor gear, like REI and North Face. I also looked into other college hiking clubs to see how their sites ran. Being a member of The Weekend Warriors I sometimes have the opportunity to communicate with members of other college hiking clubs through social media. Specifically, Penn State’s Hiking club has higher engagement as evidenced by greater trip participation. After digging deep I practiced rapid sketching and came up with 18 different possible designs for the homepage.
Sketches
I decided I needed the opinions of other club members so I asked a couple of members to look over all my sketches. Many had varying opinions on which designs they liked but one that stuck out to most was the green starred version (as seen above).
Step 3: Prototype
Low Fidelity Wireframe
After creating the low-fidelity version of the homepage I then focused on user testing. I organized a group of 5 individuals, all of whom were members of The Weekend Warriors or Drexel students participating in the club. I then shared with them a link to the homepage prototype so they could access the low-fidelity version on their computers and provide their feedback.
The feedback provided 3 Big Takeaways:
Add a feedback page
Overlay all text and information in the photo
Make photos larger or carousel images
Test
After incorporating all the feedback suggestions, I created a style guide and mood board for the homepage. When choosing the colors for the site I wanted to make sure I was staying on brand and following the colors that The Weekend Warriors club was known by, which are navy and forest green. I also wanted to have an accent color on the site to make certain text and buttons pop out. After researching the best contrasting colors for navy and forest green I decided to choose a lime green accent color. Before adopting this color into the style guide I tested to make sure its’ contrast was not too stark to cause accessibility concerns. I tested the colors using the Adobe Color Accessibility Tool and got positive color contrast ratios for my accent color when tested with navy and forest green. This meant that these color choices would meet the accessibility guidelines set by the WCAG.
Style Guide
Regarding font choices, The Weekend Warriors do not have a specific font that they consistently use. Past flyers and social media posts show that they use a San-Serif typeface. Considering this and the user I did not want to stray so far away from what the users were comfortable with. Therefore I chose the font Urbanist for the headers and Raleway for the paragraph text. One thing to make sure of is that the font sizes were neither too large nor too small when considering accessibility. The paragraph fonts were sized at 16 pts, as the WCAG guidelines suggest.
Mood Board
As the development of the homepage design proceeded I was slowly gathering images and user interface design ideas from other brands, REI & North Face, and different college hiking clubs. With all of this inspiration, I was then able to move on to creating the high-fidelity version of the homepage.
When creating the final high fidelity wireframe I took into account all the research and testing that I did and brought to life a realistic-looking version of the new homepage (as seen below).
High Fidelity Wireframe
Step 4: Next Steps
The next steps to this project would be to showcase my findings and work to The Weekend Warriors and begin the process of transitioning the original homepage to this new design. After doing so I would then go more in-depth with the site and start creating additional pages which I continually test on the users.