RaidPools
![RaidPools dashboard displayed on an iPad Air. A grid of stacked barplots in orange and white on a black background.](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FRaidPools-thumbnail.5bee821e.jpg&w=3840&q=75)
Description
RaidPools is a software as a service (SaaS) startup that aids small Twitch streamers as they grow using its recommendation algorithm. As the founding designer, I created its branding and web app.
Try RaidPools- Date
- 2023-09 to present
- Colors
- orange
- black
- white
- Media
- UI/UX design
- brand identity design
- development
- Roles
- founding designer
- front-end web developer
Research
Twitch is a video game live-streaming platform that dominates the industry. While it boasts 35 million average daily viewers, more than 90% of streamers have fewer than 6 viewers.
![Data from six user interviews mapped onto an affinity diagram.](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FRaidPools-research-1.606bbdfb.jpg&w=3840&q=75)
Interviews revealed that growth is difficult for small streamers as viewers cannot discover them organically.
Streamers seek reliable ways to discover other streamers in the same community, exposing them to new viewers who like similar content.
RaidPools aims to provide clear and reliable recommendations that pool like-minded streamers together, fostering growth for both individual streamers and the larger community.
For such a service to be successful, I outlined the following design principles:
- Approachable
- Core functionality is presented clearly without jargon.
- Accessible
- Provide the best possible experience for all users.
- Memorable
- Deliver a distinct identity that users will remember.
The RaidPools brand is bold and brutally geometric. The typography is structured and constrained, exhibiting a mechanical precision that is hard to forget.
![RaidPools logotype and favicon displayed in a Chrome browser on Windows. The favicon is the letters “R” and “A” from the logotype. Orange on black.](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FRaidPools-branding-1.06e0278d.jpg&w=3840&q=75)
![RaidPools stream placeholder screen displayed within the Twitch interface on a Nothing Phone 1.](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FRaidPools-branding-2.f8beb796.jpg&w=3840&q=75)
![RaidPools test stream image. Similar to a TV test pattern but in orange, with the RaidPools logotype at the center.](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FRaidPools-branding-3.0d664184.jpg&w=3840&q=75)
![RaidPools home page displayed on an iPad Air in dark mode. Orange text and graphics on a black background.](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FRaidPools-design-1.cb70e4d8.jpg&w=3840&q=75)
The RaidPools web app draws heavily from cassette futurism designs from games like Fallout 4, Alien: Isolation, and Signalis.
![RaidPools home page displayed on a Nothing Phone 1 in dark mode. Orange text and graphics on a black background.](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FRaidPools-design-2.9547af80.jpg&w=3840&q=75)
![RaidPools sign-up page displayed on a Nothing Phone 1 in dark mode. Orange text and graphics on a black background.](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FRaidPools-design-3.66387d18.jpg&w=3840&q=75)
![RaidPools dashboard displayed on a Surface Pro 8 in dark mode. Stacked white and orange bar plots on a black background.](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FRaidPools-design-4.bb46b96f.jpg&w=3840&q=75)
The interface strikes a balance between decoration and visual clarity. The result is a distinct aesthetic that maintains good visual hierarchies.
![RaidPools “calculate raid” page displayed on a Surface Pro 8 in dark mode. A large live stream accompanied by user information and a button labeled “start raid.”](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FRaidPools-design-5.ba7e17aa.jpg&w=3840&q=75)
![RaidPools footer with drop-down menus for animation, theme, and contrast. The theme menu is expanded, showing the options “auto,” “light,” and “dark."](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FRaidPools-a11y-1.a963035d.jpg&w=3840&q=75)
The interface has animation, theme, and contrast settings that respect the user’s system preferences by default.
![RaidPools home page displayed on a Nothing Phone 1 in high-contrast light mode. Dark red text and graphics on a white background.](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FRaidPools-a11y-2.ce7d5cfd.jpg&w=3840&q=75)
![RaidPools dashboard bar plot displayed on a Nothing Phone 1 in light mode. Red text and graphics on an off-white background.](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FRaidPools-a11y-3.dd23df40.jpg&w=3840&q=75)
![RaidPools footer displayed on an iPad Air in high-contrast light mode. Dark red text and graphics on a white background.](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FRaidPools-a11y-4.fb8715b4.jpg&w=3840&q=75)
To provide the best experience for assistive technology users, the web app was initially designed as an accessibility tree before any visuals were created:
Header
Graphic “RaidPools logo with futuristic and angular lettering.”
Unordered list “Authentication.” 2 items
Link “Log in.” Points to /login
Link “Sign up.” Points to /signup
Main
Heading 1 “The recommendation algorithm for Twitch raids.”
Link “Sign up for closed alpha.” Points to /signup
Graphic “Three rolls of tape filled with binaries passing through a scanner as it searches for the optimal choice.”
Heading 2 “Growing your channel, community, and network through intelligent raid recommendations”
Ordered list “Algorithmic steps.” 4 items
List item
Heading 3 “Observe stream”
...
This approach was received positively by assistive technology users:
“Props on that because a lot of people don't think of it that way. No wonder the website looks pretty but doesn't hinder the screen reader.”
“Websites these days are not good, I was preparing for the worst. Compared to all the websites out there, this website is perfect.”
![RaidPools error page displayed on an iPad Air in dark mode. Shows a 500 status code with source, endpoint, and identification information.](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FRaidPools-devex-1.85f8e630.jpg&w=3840&q=75)
Indicators and additional information are included in the interface for a better developer experience. The indicators give developers critical information but look like decoration to users.
![Four-by-three grid of dots, some filled in and some empty, displayed on the top right corner of every error page.](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FRaidPools-devex-2.7df9bef4.jpg&w=3840&q=75)
![Three dots formed into a triangle, displayed on the top left corner of every page.](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FRaidPools-devex-3.8095249a.jpg&w=3840&q=75)
![Badge at the bottom right corner of the footer. There is a four-by-three grid of lines along with the text “PRD.”](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FRaidPools-devex-4.4a4f9567.jpg&w=3840&q=75)
![RaidPools “awaiting activation” page displayed on a Surface Pro 8 in dark mode. Orange text and graphics on a black background.](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FRaidPools-progress-1.90befac8.jpg&w=3840&q=75)
RaidPools is undergoing closed alpha testing with a select number of users. If you are interested, sign up using the link below. The service will become generally available once the experience is polished.
Try RaidPools