Quabbin Quills
Redesigning Quabbin Quills' website to feature primary services for their users in the writing community.
Project Overview
I worked as the sole UX/UI Designer on my team for JumboCode. Our client was a nonprofit called Quabbin Quills (QQ), an organization that creates opportunities, collaborations, and connections for writers in the New England region.
I worked with a team of 1 Project Manager, 1 Tech Lead, and 8 Developers.
The Problem
Our client wanted a complete web redesign that highlighted the collaborative features of their writing community for their users. The current site had several issues:
Unclear Features
Cluttered UI
Inconsistent Branding
Users struggle to complete primary tasks such as publishing and commenting on works.
No information hierarchy and an overwhelming amount of text on each page.
The Solution at a Glance
Project Scope
Streamline web interface with the key functions of the community, with the following main features:
Publish work
Comment on others' work
Rebrand Quabbin Quills to align with business identity and create a design system to ensure visual consistency.
Design a dashboard that lets users view and post work right away.
Timeline
Initial Research
I performed a cognitive walkthrough and navigation test of Quabbin Quills current website. Some primary issues arose that cause usability concerns:
Heavy Text: There is no hierarchy of information. The user's eyes wander due to the lack of bolded text.
Inconsistent Branding: The typography is not standardized and the slogan is larger than the QQ name.
Unclear Tasks/Features: The abundance of features can overwhelm first-time users. QQ's main features are lost in the text.
Quabbin Quills' current website
From this initial analysis, I compiled a list of main implementations the web redesign would include:
Navigation Bar: Have a menu on the top of the page that users can reference for the main features of QQ.
Primary & Secondary Palette: Minimize color use and limiting heavier colors as secondaries.
Information Hierarchy: Standardize the type and organize information based on order of importance.
User Flow & Task Analysis
Using Whimsical, I visualized the mind map of a user navigating through the page; taking in mind the main tasks the user is set out to do:
Task 1. Log in / Sign up
Task 2. Uploading their work
Task 3. Commenting on others
Task 4. Checking for feedback
Task 5. Making / updating profile
User Flow Diagram
Creating this diagram was critical in shaping what I would put in the navigation bar.
Translating into Low-Fidelity Wireframes
Taking in mind the user flow charts and CTA, I developed low-fidelity wireframes for each component of the web. Below are demos of main tasks:
Task:
Log in / Sign up
Task:
Uploading work
Task:
Commenting on work
Task:
Checking for feedback (1 of 2 ways)
Other notable low-fi features:
1. Search Bar: as more work gets published, users can search for specific work.
2. Filter Channel Box: users can filter posts based on the genre.
3. Infinite Scroll: provide users a seamless access to older posts.
4. Access to User Profiles: users can interact with other writers by going on their profile page and accessing their other works.
User Testing & Admin Feature Discovery
After presenting the low-fi wireframes to our client, I received the following feedback:
Our client was worried about users posting / commenting inappropriate content. This led to an admin feature discovery. The interface would include moderator tasks such as creating channels, deleting posts/comments, and banning accounts which addressed client concerns.
Add a pop-up for Terms of Agreement & Privacy Policy information.
I also user-tested across of sample of 25 participants from colleagues to QQ users and noted some take-aways:
Define terminology such as area code as many were confused.
Create a confirmation pop-up for drastic user actions such as deleting a post.
Creating a Design System for Visual Consistency
Before designing the high-fidelity wireframes, I decided to create a design system to ensure visual consistency. The design system would also offer UI specs and documentations for Developers and Designers in the future.
To build the design system, I first had to establish Quabbin Quills' branding.
Branding
The client wanted a rebrand of their website that embodied the essence of the Quabbin Reservoir in Massachusetts and has an scholarly image. I made the following design decisions:
Heading fonts as a serif typeface to give a classy feel.
Body fonts as a sans serif typeface for readability.
Color palette to feature earthy green and blue tones reminiscent of the Reservoir.
From there, I designed the following spec sheet:
Design System
Using the new spec sheet as the visual reference, I created Quabbin Quills' design system.
The design system can be accessed here.
Putting It All Together: High-Fidelity Wireframes
Using the design system, I designed the hi-fi wireframes. Demos for the new features are below:
Interacting with other users
Editing / deleting posts
Additional feature:
Admin-side
Admin interface elements:
Different Nav Bar: with features such as Ban Member and Create Channel
Edit Filter Box: home page option to remove and add channel filters
Ban Member: searchable by name, infinite scroll
Delete Post / Comment: allows admin to delete any inappropriate content
The Final Design
Click on the image to open the Figma prototype.
Key Takeaways & Reflections
From this year long project, I learned a LOT about designing a web to accommodate the client and user's needs. This was my first time designing a full web from start to finish -- I got to dig deep in user research & constructing the interactive features on the wireframes.
Overall, I learned:
Simplicity is key! Especially when you are dealing with an older user base who just wants to utilize the main aspects of a service. In this case, the user wants to use QQ to publish and receive feedback on their work.
Design systems are useful in creating visual structure and consistency. It's also easier to translate for Devs and allows for efficiency if the website ends up scaling up.
Information hierarchy is critical to guide the user's eyes as they navigate through a page; planning out where key functions lay + their corresponding type makes a big difference!
Communicate design decisions across a cross-functional team of 8 developers, 1 PM and 1 tech lead. I had to explain my iterations to the developers and in the best interest of the users
The final design prototype has been developed and shipped with our client, who will be utilizing this streamlined interface as a reference for their developers. And that's a wrap!
