Quabbin Quills

Designing a writing platform to empower authors to publish and receive feedback on their work.

Scope

UX Research, UX/UI Design, Design System

Scope

UX Research, UX/UI Design, Design System

Scope

UX Research, UX/UI Design, Design System

Role

UX/UI Designer

Role

UX/UI Designer

Role

UX/UI Designer

Stack

Figma, Whimsical, Adobe Illustrator, Procreate

Stack

Figma, Whimsical, Adobe Illustrator, Procreate

Stack

Figma, Whimsical, Adobe Illustrator, Procreate

Timeline

September 2021 - May 2022 (9 months)

Timeline

September 2021 - May 2022 (9 months)

Timeline

September 2021 - May 2022 (9 months)

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

Users struggle to complete primary tasks such as publishing and commenting on works.

Unclear Features

Users struggle to complete primary tasks such as publishing and commenting on works.

Unclear Features

Users struggle to complete primary tasks such as publishing and commenting on works.

Cluttered UI

No information hierarchy and an overwhelming amount of text on each page.

Cluttered UI

No information hierarchy and an overwhelming amount of text on each page.

Cluttered UI

No information hierarchy and an overwhelming amount of text on each page.

Inconsistent Branding

A lack of visual identity and standardized style.

Inconsistent Branding

A lack of visual identity and standardized style.

Inconsistent Branding

A lack of visual identity and standardized style.

The Solutions at a Glance

I designed two distinct interfaces—one for members and one for administrators—with the overall goal of creating a website that serves as a social community platform dedicated to literature. Additionally, the Quabbin Quills Design System was made.

1. Member-side Experience

2. Admininstator-side Experience

Project Scope

  1. Streamline web interface with the key functions of the writing community, with the following main features:

    • Publish work​

    • Comment on others' work

  2. Rebrand Quabbin Quills to align with business identity and create a design system to ensure visual consistency.

  3. Design a home dashboard that allows users to view and interact with the works of others.

  4. Creating an admin interface that would moderate content and ban members if needed.

Initial Research

I performed a cognitive walkthrough and navigation test of Quabbin Quills (QQ) current website. Some primary issues arose that cause usability concerns:

1

1

1

Lack of Information Hierarchy

The heavy text cause user eye strain, making the interface unfriendly for reading dense writing.

2

Inconsistent Design Patterns

The typography and layout are not standardized, leading to accessibility violations.

3

Unclear Tasks & Functions

The abundance of functions in what is supposed to be the Nav Bar can overwhelm first-time users.

Guerrilla Recruiting Templates
Guerrilla Recruiting Templates
Guerrilla Recruiting Templates

Quabbin Quills' current website

From this initial analysis, I compiled a list of main implementations the web redesign would include:

1

1

1

Fixed Navigation Bar

On the top of the page, a Nav Bar to guide users to the primary functions of QQ.

2

Rebrand & Design System

A rules-based design system to ensure visual consistency across pages and limit saturated colors to accent colors.

3

Standardized Design Components

Creating a component library to help with organizing information and ensure clarity across pages.

4

Defined Layout & Grids

Defining margins and grids to help declutter the user interface.

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 and sign up

Task 2.

Uploading their work

Task 3.

Interacting with other users

Task 4.

Checking for feedback

Task 5.

Making and updating profile

Guerrilla Recruiting Templates
Guerrilla Recruiting Templates
Guerrilla Recruiting Templates
Guerrilla Recruiting Templates
Guerrilla Recruiting Templates
Guerrilla Recruiting Templates

User Flow Diagram

Creating this diagram was critical in defining what I would put in the navigation bar. The initial nav bar included the following:

Guerrilla Recruiting Templates
Guerrilla Recruiting Templates
Guerrilla Recruiting Templates

Translating into Low-Fidelity Wireframes

Taking in mind the user flow charts and cognitive task analyses, 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.

Screenshot 2024-07-17 at 3.25.09 PM.png
Screenshot 2024-07-17 at 3.25.09 PM.png
Screenshot 2024-07-17 at 3.25.09 PM.png

User Testing & Admin Feature Discovery

I user tested across of sample of 25 participants from colleagues to QQ users and noted some take-aways: 

Redunant Navigation Bar

"My Posts" displayed the same content as the "My Profile" page. In addition, it took users awhile to find "Create Post"

Confusing Navigation Labels

The button label for "Settings" was confusing as most users did not know it would open a drop-down menu leading to "My Profile", "Preferences", and "Log Out"

Inability to Recover from Errors

Some users were frustrated by the lack of warnings for drastic actions, such as deleting a post.

Poor Readability

As this was a writing platform, displaying text in such wide margins led to poor readability and eye strain.

After presenting the low-fi wireframes to our client, I received the following feedback:

"I'm worried about members posting or commenting inappropriate content. Is there a way to moderate this?"

"I'm worried about members posting or commenting inappropriate content. Is there a way to moderate this?"

"I'm worried about members posting or commenting inappropriate content. Is there a way to moderate this?"

After a few whiteboarding sessions, my team decided on a separate admin interface that would include moderator controls, such as creating channels, deleting posts and comments, and banning accounts, addressing key client concerns.

Creating a Design System for Visual Consistency

Before designing the high-fidelity wireframes, I created a design system to ensure visual consistency. The design system would also provide UI specifications and documentation for future developers and designers. To build it, I first established Quabbin Quills' branding.

Branding

The client wanted a rebrand of their website that embodied the essence of the Quabbin Reservoir in Massachusetts. I made the following design decisions:

  • Heading fonts as a serif typeface to give a scholar feel.

  • Body fonts as a sans serif typeface for readability.

  • Color palette to feature earthy green and blue tones reminiscent of the Reservoir.

Quabbin Quills Design System

Using an initial spec sheet as visual reference, I created the Quabbin Quills Design System which can be accessed here.

Notable Design Changes

Nav Bar Redesign: Reducing Redundancy and Improving Discoverability

Before

  • Poor discoverability of main functions like 'Create Post'

  • Redundant page destinations: 'My Posts' duplicated content from 'My Profile'

  • Confusing navigation structure: users didn’t realize 'My Profile' and 'Preferences' were nested items

Guerrilla Recruiting Templates
Guerrilla Recruiting Templates
Guerrilla Recruiting Templates

After

  • Different button design for "Create Post" to improve discoverability

  • Nested 'My Profile,' 'Settings,' and 'Log Out' under a profile icon to reduce text and follow standard design patterns

  • Incorporated brand colors to enhance visual contrast and reinforce Quabbin Quills branding

Guerrilla Recruiting Templates
Guerrilla Recruiting Templates
Guerrilla Recruiting Templates

Home Page: Creating Visual Hierarchy through Layout, Color, and Typography

Before

  • Poor text alignment and hierarchy created visual clutter

  • Lack of feed customization: posts are sorted only by most recent

  • No distinct branding or personalized touches

Guerrilla Recruiting Templates
Guerrilla Recruiting Templates
Guerrilla Recruiting Templates

After

  • Improved vertical alignment for better readability

  • Replaced the 'Recent Posts' heading with a sort button, allowing users to view posts by Recent, New, or Top

  • Established a text hierarchy using varied font weights, sizes, spacing, and colors

  • Added a collapsible banner at the top to incorporate brand personalization and style

Guerrilla Recruiting Templates
Guerrilla Recruiting Templates
Guerrilla Recruiting Templates

Page-wide Changes: Improving Accessibility and Readability

Before

  • Narrow line height made paragraphs difficult to read

  • Wide margins reduced scannability, particularly in denser text sections

  • Accessibility issues: buttons failed to meet WCAG 2.0 Level AA contrast ratio requirements for large texts (3:1)

Guerrilla Recruiting Templates
Guerrilla Recruiting Templates
Guerrilla Recruiting Templates

After

  • Set line height to 1.7 (170%) for body text

  • Removed unnecessary styles and uppercases; substituting with icon buttons for consistency

  • Narrowed margins to limit characters per line to under 150

  • New button design meets WCAG 2.0 Level AA guidelines with a contrast ratio of 3.35:1

    • All interface elements pass the 3:1 contrast ratio, and all text elements meet the 4.5:1 contrast ratio!

Guerrilla Recruiting Templates
Guerrilla Recruiting Templates
Guerrilla Recruiting Templates

Putting It All Together: Final Design

Using the design system, I designed the hi-fi wireframes. Demos for the key tasks are below:

Interacting with Other Users

Editing & Deleting Posts

My Profile & Settings

Admin Interface

Beyond the user-side interface, I also designed what the admin interface would look like. Some key differences include:

  1. Nav Bar: Channels, Members, and Reports.

  2. Channels: delete, edit, and create channels.

  3. Members: grid offering at-glance information on members with a side panel to provide more insights.

  4. Reports: view reports on comments, posts, and members.

  5. Ban controls: privately message and ban members.

  6. Editing Access: delete comments and modify posts.

Key Takeaways & Reflections​

From this year-long project, I learned a lot about designing a web interface that accommodates both client and user needs. This was my first time designing a full web interface from start to finish. I had the opportunity to dive deep into user research and carefully consider the interactive features across each page.

If I had more time…

  • More user testing: I would test my final designs to assess whether the new changes are effective and evaluate readability across pages.

  • Further accessibility design: I would push my UI design components to meet WCAG Level AAA guidelines as well.

Overall, I learned:

  • Designing for accessibility: This process taught me a lot about WCAG 2.0 Level AA guidelines and how to design a more inclusive experience.

  • Design systems are important: They establish visual rules and consistency, making it easier for developers to translate and increasing efficiency, especially if the website scales.

  • Information hierarchy matters: Guiding the user's eye as they navigate through a page is essential. Grouping related elements and establishing a clear text and component system makes a significant difference.

  • Effective communication with cross-functional teams: I collaborated with a team of 8 developers, 1 PM, and 1 tech lead, where I had to clearly explain my design iterations, always keeping the users' best interests in mind.

The final design prototype has been developed and shipped to our client, who will use this streamlined interface as a reference for their developers. And that’s a wrap!

Let's Connect!

I'm always excited to chat about my work and design in general :)

Let's Connect!

I'm always excited to chat about my work and design in general :)

Let's Connect!

I'm always excited to chat about my work and design in general :)