Ruckus
An events hub for veterans nonprofit AllTru.
TIMELINE
May 2023 - Dec. 2023
SKILLS
User Research
Design Systems
Desktop Design
Mobile Design
ROLE
Product Design Intern
TEAM
2 Product Design Interns
1 Design Lead
1 Project Manager
5 SWE Interns / 8 SWE
PROJECT CONTEXT
This was a pro-bono project picked up by Expression, and I and another intern had full ownership over the design and design process. Prior to working on Ruckus, we had completed and shipped a full redesign and branding of AllTru’s public-facing site.
I started this project as a part of my summer internship, which I was then offered to extend to the fall— when the V1 design of Ruckus was handed off for development.
BACKGROUND
Who is AllTru?
AllTru is a 300+ member nonprofit powered by women volunteers of a vetted group from the Special Operations community. They organize efforts and events across the U.S. and Afghanistan to “connect, engage and gather”— aka to provide internet infrastructure for youth in conflict zones, spread veteran awareness, and gather to build community & honor their fallen.
THE PROBLEM
AllTru’s growth is outpacing its volunteer resources.
AllTru currently operates on an all-volunteer team without efficient web tools or automation, and they needed a way to keep up with project growth and optimize resource utilization.
Additionally, after user research, we found that much of their event planning, promotion, and coordination is done through scattered emails and spreadsheets, which is frustrating for members to navigate and keep track of.
The founders had some ideas as to what features they wanted to see, but nothing concrete. It was up to my fellow design intern and me to figure out what to incorporate, how, and how to best design it.
SOLUTION
Ruckus, a secure one-stop event platform exclusively for the members of AllTru.
We designed and handed off the V1 of Ruckus, the member interface, for development in early 2024. After signing up and being granted access, users can view all upcoming events and all past events AllTru has held. They can RSVP, request a spot, and even suggest future events they’d like to see.
Solution Preview
GETTING STARTED
First, we needed to understand the project requirements.
Our project manager had created a preliminary project requirements document with the founders that included some desired functionalities and features. The initial goal was to establish a secure online platform accessible only to AllTru members to aid in event coordination. The design team and developers met to comb through the given information, but we needed additional clarifications on requirements and some jargon, so I and the other design intern set up a meeting with the client for the first time to ensure a comprehensive understanding across the whole team.
USER RESEARCH
There was no user research yet, so we needed to understand the users’ needs and further explore the problem.
Though we had a good understanding of the issues AllTru was facing from the founders’ perspectives, we wanted to understand this better from all levels of the organization, since our users would be drawn from all levels too. We conducted 2 user interviews and organized our findings by affinity mapping.
Combining our insights from client meetings and user interviews, some of the biggest pain points we uncovered were as follows:
Communication is unorganized.
2. It is difficult to plan, coordinate, and promote events within and for the organization.
3. Information is scattered and not streamlined.
4. Community engagement levels are not optimal, and interviewees believe the aforementioned are primary issues why.
Thus, we asked ourselves, how might we streamline organizational flow, enhance communication efficiency, and strengthen internal relationships to optimize planning and coordination within AllTru?
It seemed like these four biggest pain points could be alleviated if AllTru had a core point of sorts. As a volunteer-driven nonprofit organization, fostering a sense of connection among members to the organization, to each other, and to the mission is crucial. Achieving this becomes all the more challenging without a unified focal point, which brings us to our refined goal:
Establish a secure, centralized hub for AllTru, seamlessly integrating event management, fostering communication, and providing valuable opportunities for members to connect.
THE BRAND IMAGE
Visual Branding
We created this in the previous project phase when we designed the public-facing site. We chose purple as the primary color because we wanted something meaningful that also stood out from typical veterans' organization colors. Purple symbolizes honor and valor, reflecting the courage of the female members of AllTru whilst also conveying feminine empowerment.
If you recall, AllTru stands by three pillars: connect, engage, and gather. We assigned purple, orange, and green to these three respectively.
SOLIDIFYING THE PRODUCT VISION
We met with the founders to discuss our visions for Ruckus.
Once we settled on a vision, we looped in the developers to gather their thoughts on feasibility, adjusted our plans accordingly, and relayed that back to the founders.
The design team then worked to define some key user stories and a basic information architecture so that we could start designing:
Request an account and sign in.
View upcoming events and past events.
RSVP to events and request specific event roles.
Suggest future events.
Create posts to the community wall/feed.
Connect with other members.
Choose what personal data to display across the AllTru network.
Using these, we began to wireframe and weigh between some potential page layouts and feature iterations.
DESIGN CONCEPTS
We involved stakeholder and developer feedback throughout our cyclical and iterative design process.
As we were in the low fidelity phase, these discussions were essential in determining which designs to pursue and develop further in high fidelity, but we continued to have these meetings even in the high fidelity phase to always incorporate feedback as well as obtain usability critiques.
As we were wrapping up our designs, the V1 deadline was moved up suddenly, and the team needed to pivot. Many of our intended concepts had to be simplified or omitted due to time constraints.
The original V1 had a significantly different structure with more pages and functionalities than the final V1. We were initially gearing up for usability testing having finished much of the high-fidelity prototypes, but had to pivot due to the project shift. We had to cancel usability tests and instead focus on collaborating with the developer team and founders in reevaluating Ruckus— what was most important? What could be built out in time?
We needed to streamline its pages and features, as the original ones were more complex and time-consuming to develop. We communicated the revised timeline to the founders, leading to extensive discussions to determine which elements to retain in the V1.
We drove prioritization by revisiting our user research insights and critically thinking about implementation feasibility.
Here’s a look into the pages and features we were developing that were significantly changed or omitted, as well as some rationale for their initial inclusion and some rationale for their exclusion from V1.
Onboarding and personal information
Users fill out four screens to request an account
After approval, they log in and specify preferences to help us suggest volunteers they may be interested in connecting with.
Initially, the client wanted 60+ pieces of onboarding info collected. We streamlined by separating essential registration information and placing supplementary details in a "complete your profile later" section that’s accessible post-approval.
❌ Ended up simplifying and streamlining the registration because not all pieces of information were essential. Preferences/connection recommendations omitted because algorithm development could not be done in time.
Overview - the dashboard
Users are prompted to complete the additional questions to complete profile if uncompleted
View calendar of upcoming events + RSVP to them
Minimized version of the news feed.
❌ Ended up being unneeded due to simplification of profile and omission of news feed.
News Feed
Same as in Overview.
Make posts and tag them with specific categories
Like and comment on posts
🔎 The founders wanted a feed of sorts so that members could stay connected, and we thought this would be a good way to foster community and communication within the hub.
❌ Ended up being omitted because this would require a content moderation system of sorts and it was highly unlikely that developers would be able to develop it in time. There also exist similar, well-made solutions out there that AllTru could utilize instead.
Network - directory and connecting with other volunteers
Algorithm suggests role models you may want to connect with based on collected preferences and other characteristics
Full directory of all members with Ruckus accounts
Filters based on what user interviews suggested would be most beneficial: by location, branch, occupation (obtained through research of most common veteran industries)
View profiles and send message (opens up email)
🔎 Created to to enhance internal relations, responding to insights from user research that indicated weaknesses in community engagement and internal bonds.
❌ Ended up first omitting recommended connections because we did not have the resources to develop a matching algorithm in time. Ended up omitting directory altogether due to time constraints as well.
Profile - edit and adjust visibility of personal information
Edit registration information as well as additional information
Users prompted to complete additional questions (complete profile) if they have not done so
Toggle profile elements’ visibility on/off and preview how profile looks to AllTru network.
🔎 User research unveiled varying comfort levels regarding personal information, due to the sensitive nature of data for active-duty members. In response, we designed a feature allowing users to restrict profile elements’ visibility to admins only, addressing the founders’ initial desire to collect comprehensive information while also respecting members' privacy within the broader AllTru network.
❌ Ended up not needing as complex a profile page since we reduced the amount of information collected. There was no need for the visibility toggle due to the information reduction as well, since we no longer collected extensive information that was available for display.
THE PIVOT
We decided to make events the focus of Ruckus V1.
Our goal was always to establish a secure and centralized hub for AllTru, emphasizing better event management, communication, and member relations. Recognizing events as the core of AllTru's mission and understanding that event planning is at the root of major pain points identified in user research, such as disorganized communication and information, guided our strategic pivot for the V1. The focus shifted towards refining the volunteer-facing side of a streamlined event management platform with Ruckus.
With Ruckus, much of the pain of coordinating events, promoting them, assigning roles, and more will be eliminated, leading to successful events, which in turn will improve community engagement and foster better internal relations. Thus, focusing on optimizing AllTru’s event planning in the V1 of Ruckus allows us to comprehensively address our goals and proactively mitigate existing pain points, aiding overall efficiency and community involvement.
POLISHING AND HYPOTHESIZING FINAL DESIGNS
We again followed an iterative process of gathering stakeholder and developer feedback to aid our designs, but the ultimate design decisions rested primarily with us.
Once the team established events as the central focus for Ruckus V1, we transitioned to reassessing the necessary screens + flows and refining both the existing designs for the events page and the additional required screens.
Let’s take a deeper dive into the finalized screens of Ruckus V1 and some of the decisions we made along the way.
Events
Events serves as the homepage of RUCKUS. Users can:
View events they’ve RSVPed to
Suggest future events they’d like to see
Search and filter events
View events on map
See past events
Events Map
❌ Map 1
Less space for map
Seems like search and filters are only functionalities of the map, and not all events like we intended, seems like they are limited to map
✅ Map 2
Bigger map, user can see more
Search and filter are moved above the map section for clearer indication
Added line between “your events” section at the top and the rest of the page, which is searchable and filterable.
RSVP for Upcoming Event
Users can rsvp for an event and indicate what role(s) they’re interested in.
Viewing a Past Event
Sustains (what was executed well) and improves (what to improve on) will be displayed for each event, collected from event feedback forms and input by admin.
A brief event reflection/summary will be provided
Photos from the event can be found on the page
Profile Page
We ended up cutting the collected information to just first name, last name, and email. Then, we needed an easy way for users to view and edit it. We discussed different versions with the development team and agreed on the most feasible and simple design for the profile.
✅ Profile 1
Simple
Uncluttered
Optimized for responsiveness
❌ Profile 2
Greater cognitive load
Redundant information
More difficult to translate to mobile
Final Profile Screens
MOBILE VERSIONS
After completing the web mockups, we moved to creating the mobile version.
We made mockups for two additional breakpoints, tablet and phone.
THE FUTURE
What’s next for Ruckus?
Our designs are currently being implemented by the developers. While certain aspects had to be omitted for the initial V1, these concepts remain invaluable for shaping future iterations, including V2 and beyond.
The founders and other AllTru members were thoroughly impressed by our designs and expressed their gratitude towards us for helping their nonprofit efforts. They hold ambitious visions for the future of AllTru, and they envision the omitted designs as integral components of the evolving platform’s future.
Additionally, given the limited rounds of usability testing conducted, the team is gearing up for sessions to glean insights and address any imperfections in the platform.
Then, to measure success, we aim to look at the following metrics:
Registration and RSVP rates
Platform utilization
Operation time of event coordination
WRAPPING UP
An all-around great experience
From working full-time over the summer to part-time on top of school, I would not trade the journey for anything. I learned a lot:
Design isn’t always a straightforward and rigid process. There can always be unexpected project shifts (as there was with this project) and you have to be quick on your feet to adapt, as a designer and as a team.
I’ve never worked with developers before as a designer, so this gave me the chance to be in a truly cross-collaborative environment. Feasibility concerns are a valid thing, but feasibility should not always drive our decisions. What’s easiest to implement isn’t always the best design.
Sometimes, there simply will not be enough time or resources to do everything, especially in a fast-paced work environment, so we need to prioritize ruthlessly but always try and advocate for design.