Bi-Women Quarterly
A submission portal web app that streamlines the submission and review process for Bi-Women Quarterly publications.
CONTEXT
This is a year-long project my team at Jumbocode works with Bi-Women Quarterly, the oldest bisexual+ women’s publication in the world (since 1984!) that features the voices of those who identify as women, trans, and non-binary with bi+ sexualities. It has an international readership and hundreds of submissions per issue. BWQ is a grassroots all-volunteer publication produced by the Boston Bisexual Women’s Network.
My Contribution
In my team, I was the sole product designer in a team of PM, tech lead, and 10 engineers. Â I worked mainly with the client, PM, and tech lead to define the user experience, create wireframes, design the interface, and ensure the final product aligned with the client's vision and user needs. In the second half of the project year, I transitioned into a front-end engineering role, where I worked on various ticketed projects using HTML, CSS (specifically Tailwind CSS), TypeScript, and React.
THEÂ PROBLEM
With over hundreds of submissions from places all over the world, including places where being LGBTQ+ is dangerous, all submissions and communication with applicants were handled by email. This process was overwhelming for staff members who had to manage a high volume of submissions manually on email and keeping track of things on an excel sheet.
THEÂ Solution
After discussing with the client, our PM created the following tasks:
- Create a submission portal web app
- Streamline the submission and review process
- Allow BWQ staff to access, download, and tag submissions in a single place
- Allow users to create accounts, provide their information, and submit work
- Facilitate communication between applicants and volunteers
USERÂ FLOW, WIREFRAME
After speaking with the client, I found out that there were two main user groups — the people who submit publications to BWQ and the BWQ staff who curates for the publication. I created a user flow and wireframe of what the web portal might look like. Although the founder didn't have a specific brand guideline, I created a style guide according to their website to ensure everything stays consistent.
User Flow for Applicants and Admin
Sign In / Sign Up
Applicant Home Page
Applicant Submission Portal
According to the client, they would like to be able to edit and access the original submission file through a google drive. Therefore, this portal will act as a preview of the content in the google drive with an option for admin to access the specific google drive folder.
Admin Portal
1st Iteration
After the initial wireframe, I added some colors and graphics following the style guideline IÂ created according to their website.
.png)
Brand Style Guide
Applicant Home Page
Applicant Profile Page
Applicant Submission Portal
2nd Iteration
I wanted to make sure the colors reflect BWQ more accurately, so I changed the colors of the site.
Color Exploration
.png)
Applicant Home Portal
Applicant Profile Portal
Applicant Submission Portal
.png)
Admin Portal
3rd ITertation
I spoke to the client and other designers for input and received feedback on the legibility with the background, some usability concerns particularly in the applicant submission portal, and the engineering feasibility of the admin dashboard, as well as other minor issues. Based on this input, I made the following changes.
