6 minute read
Client Overview
The founder of Worcester County Women's Cycling (WCWC), Monique Trammell, created the Facebook group after moving to New England. I accepted Worcester County Women's Cycling as a client as I have recently started biking myself.
Task: Produce a responsive, mobile-friendly website for a private cycling group for the new year.
Role:
UX/UI Designer
Duration:
8 weeks
Tools:
Figma, Adobe Photoshop, Maze, Miro, Wix Website Builder
Deliverables:
Competitive analysis, User interviews, Personas, Wireframes,
Flow diagrams, Prototype, Usability study, High-fidelity
Discover
Problem
The members of our private women's cycling group face various challenges in managing group activities, fostering communication, and ensuring a cohesive experience. The existing problems and gaps within our group include:
Solution
To address these challenges, there is an immediate need for the development of a dedicated website for WCWC. This website should provide a secure, centralized platform for communication, event coordination, membership management, and group identity. By doing so, it will enhance the overall experience of our members, improve the efficiency of group management, and ensure the privacy and security of our community
WCWC is currently using Facebook as its primary location. I joined the private group to start looking at how the group uses the platform to set up rides and communicate with one another.
Research Insights
For me to further assess these problems, I looked at relevant data and insights about cycling and what was necessary for a successful ride. At the time I also asked the client for any documentation about their rides, what their expectations were for the website, and what concerns they had. Lastly, the client and I pulled in screenshots of other cycling groups in the area on Miro, a collaborative tool. Key elements we looked for were the navigation and how they communicated ride information to their members.
Through my research, I discovered how to:
Identified WCWC's competitors and evaluated their strengths and weaknesses. (View graphic here)
Discovered the goals, needs, motivations, and frustrations of WCWC members.
Learned if there is any struggle getting ride event information.
Understand the experiences people have when participating in the group.
User Interviews
This client and project were excellent because I had no shortage of research participants. I spoke to five older women virtually through Zoom, all of whom confronted me with their thoughts and concerns about the current Facebook group. It was interesting listening to their stories about why they joined WCWC. Reasons varied from feeling lonely after moving into a new state, to a desire to get back into cycling more regularly and be a part of a new community. After the interviews, The client and I decided if rides and resources were posted on a website the information would be easier to find instead of digging through the group’s Facebook news feed.
100%
of members agree ride events get buried or don’t show up on a member’s home Facebook feed. A calendar feature was favored.
40%
of members suggested a way to sign up for the reoccurring rides so the leader can see a roster of who's in the group.
60%
of members agree there needs to be a place where new and current members can find helpful information about cycling so they are more prepared to ride.
increased 55%
Nearly 1,000 bicyclists die and over 130,000 are injured in crashes that occur on roads in the United States every year. (cdc.gov)
60%
of interviewees stated experiencing anxiety before joining their first group ride.
Define
Define the Story
Based on the research I gathered through speaking with the client, current members, and any information I could find on cycling, I then formulated user stories to properly state/define the needs of the user. Since the developer planned to build the website on WIX.com, I provided a document to help explain what kind of features the website builder can do from their WixAppMarket.
To enhance communication, collaboration, and engagement among members, we agreed on these features.
Event Calendar: Centralized calendar for scheduling and promoting cycling events. (Integration with Facebook events for seamless updates)
Member Profiles: Enable members to create and customize profiles (Include cycling achievements, interests, and personal bios)
Resources and Guides: Curate a collection of cycling resources, safety guides, and leader guides.
Photo Galleries: Showcase the group activities and women riding bikes.
Wix plugins:
Members Area, Google Event Calendar, Wix FAQ, Photo Gallary, and Facebook feed widget (elfsight.com)
Identified the user type with personas. My primary personas identified current members and new members. (Click for full graphic)
Since the developer plans on building the website on WIX.com, I took time researching the platform to label features by priority.
Validate the user with HMW statements
Building the structure
During one of our weekly meetings, the client and I went over the website’s architecture. I took into consideration our competitor’s site maps and features to lay out how members will navigate the site. The client brought concern about maintaining the privacy of the group and fear of migrating completely to a new website. We decided to remove the Member’s Page feature so new members will still need to join the Facebook group instead of making their profile on the website. A ride schedule will be accessible with a password instead while Information about the group and cycling will remain public.
Before meeting
After meeting
Before moving into wireframes and UI development, I created some task flows to better understand how a user would interact with the key screens and features. I wanted to ensure that each task was completed successfully and to pinpoint any errors that may occur along the way.
Design
Visual Design
WCWC had no intention of re-branding and asked me to keep the original logo, typography, and colors seen on Facebook the same. What I love about WCWC are their donation events, parties, and themed rides. I wanted to make sure to showcase all of their events through photography so that way new people looking to join and see the engagement within the group. We hope to encourage more woman to start riding and build up their confidence.
Wireframes
While sketching out the wireframes, I looked at what WIX’s website builder could do first. I felt by taking advantage of design layouts on WIX, the developer would have an easier time building the website. I kept the high-priority features and the limitations of what Wix could do in mind. At this point, the client could only provide text for the leader guide, group riding tips, and upcoming ride dates. As a result, I came up with temporary headlines and blocks of lorem ipsum to provide possible locations for information.
I participated in group critiques with a UX community on Discord and discussed my design decisions with a mentor before presenting the designs to the client on Miro. Once the designs were approved, I brought them to a higher fidelity to test for usability.
Introduction
About WCWC & Questions
Ride Schedule & Calendar
Resources and Guides
click the images for more detail.
Thinking responsively
To demonstrate how the user flows would function on mobile, I created a video of a high-fidelity prototype.
Prototype for Web
I created a second video of a high-fidelity prototype to demonstrate how the user flows would function on the web. Just like in mobile, this prototype shows three different tasks.
Tested for Usability
Eight unmoderated usability tests web were completed through Maze while a workshop was performed virtually with the presidents of WCWC. Each participant went through a series of tasks and was tested on their ability to complete them. Since the information on each page was still being written, the prototype only tested for the UI and if certain features could be located.
100%
of the UI design was approved by the client. They noted it looks professional, and clean, and represents their brand well.
38.7% misclick rate
Participants found adding a ride to their Google calendar difficult.
75%
of participants found the FAQs page without any blockers.
Pain Points
Testers felt the safety tips were a little word-heavy. They suggested I could try to incorporate more visual cues (videos, iconography) to break it up.
During task three, two of the testers went off the path and used the navigation menu to look for the calendar instead of clicking the member’s area button.
Hyperlinks are too small
Links in the footer did not respond when testers tried to us it to find the FAQs.
Client feedback
Update the type of ride “Centuries Rides” to “Casual/Beginner” on the Ride with WCWC page. That way visitors can see the group as welcoming beginners and younger riders.
Update some photos to show younger riders.
Included a message about the need for volunteers to lead beginner rides.
Design Hand-off
Once all the feedback was addressed and the designs were approved, I sent the creative assets to the developer. These included visual elements, user flows, copy, and responsive breakpoints.
Once built on Wix, I would work with the developer to test the designs again to ensure the design’s usability.
Product launch:
The leaders at WCWC hosted a winter social at the end of January to discuss the website with the rest of the group. We passed around a survey to ask for their feedback on the current designs and what they would like to see in the future. The overall design was well received; however, the majority of the members were not in favor of a new website. After some debate, the leaders of WCWC decided to put the website project on hold until further notice.