Ylva Publishing: Diverse Stories, Embrace Love.
Creating a responsive design for Ylva Publishing's digital platform to ensure optimal accessibility and user engagement.
Project Type:
Responsive Design
My Role:
User Research
User Interviews
Wireframing
Prototyping
Usability Testing
My Team:
Me, Myself & I
Tools Used:
Figma
Timeline:
4 Months
Overview
What sets Ylva Publishing apart in the world of literature?
Ylva Publishing is a pioneering force in the literary landscape, dedicated to amplifying the voices of women-loving women (WLW) and LGBTQ+ authors. With a diverse array of genres ranging from romance and mystery to sci-fi and fantasy, Ylva Publishing offers readers a rich tapestry of narratives that celebrate love, identity, and empowerment. Their commitment to authenticity and inclusivity shines through in every book they publish, fostering connections and inspiring readers around the globe.
The Problem
The issue with Ylva Publishing house lies in its inadequate design structure and lack of effective diversity filtering. This results in a limited representation of diverse voices and experiences within their publications, hindering readers from accessing a comprehensive range of perspectives.
The Solution
My goal is to enhance the user experience by implementing a
comprehensive filter system that offers a broader range of diverse
categories at Ylva Publishing. Through this improvement, readers will have the ability to easily access and explore a wider array of perspectives, ensuring a more inclusive and enriching reading experience for all.
Background
I began by assessing the strengths and weaknesses of other LGBTQ+ publishing houses.
Competitive Analysis
I compiled a chart detailing the strengths and weaknesses of prominent LGBTQ+ publishing websites. It revealed a lack of robust filtering systems for categories and genres, along with a prevalent absence of account creation options. However, a shared trait among these sites is their commitment to inclusivity and providing opportunities for submitting written works.
User Interviews
I interviewed five target users to ascertain their expectations from LGBTQ+ publishing houses.
These users belong to the LGBTQ+ spectrum, which aligns with Ylva's focus on serving the LGBTQ+ community through their works.
Objectives
Understand the expectations and needs of queer readers and authors from LGBTQ publishing houses.
Evaluate the importance of diverse representation in LGBTQ literature and identify specific aspects of representation that are crucial to readers.
Identify underrepresented LGBTQ stories, themes, and identities in LGBTQ publishing and explore opportunities for greater diversity and inclusion.
Gather suggestions and recommendations from queer readers and authors to improve the inclusivity, representation, and overall user experience of LGBTQ publishing houses.
Insights
My interviews with skill-seeking users emphasized the importance of personalized experiences, goal alignment, and a sense of progress.
Persona
While engaging with various demographics within the LGBTQ+ community, I found their needs and pain points to be sufficiently similar to amalgamate into a unified persona. This synthesized persona serves as a summary of my research findings, which I will present to the clients.
Point of Views
Users are frustrated by the lack of authentic representation and visibility in mainstream literature. They seek inclusive platforms that prioritize intersectionality and offer a wide selection of LGBTQ+ literature. User-friendly features are seen as essential in addressing these frustrations, empowering users to engage with diverse narratives and foster a sense of belonging within the community.
Design
With Ylva Publishing's design priorities at the forefront, I commenced planning the information architecture and user flows.
I aimed for the site to revolve around intersectionality, representation, and discovery. To achieve this, I prioritized two main features: ordering books or eBooks and implementing robust filtering capabilities.
Site Map
User Flows
Derived from the primary tasks users need to complete on the website, I devised two distinct user flows to pinpoint potential drop-off points and user choices, thereby informing the design process.
User Flow Navigation
Selecting a Book/Ebook
Filtering
Checking Out
Low Fidelity Design
Mid Fidelity Design
I refined my favorite layouts and ideas to a higher fidelity. After several iterations, these became the final mid-fidelity screens.
Branding
Recognizing the significance of Ylva's name and logo, I developed a UI library to best represent the brand's sapphic elements and created a wolf mascot.
Drawing inspiration from the brand's old logo and the meaning behind Ylva's name, I designed a wolf mascot. I adorned the wolf's ear with a violet flower, a sapphic symbol from LGBTQ history. Noticing that the current colors were too bright and harsh, I created a new palette featuring various shades of violets and pinks, complemented by touches of beige and dark purple to evoke a sense of androgyny.
High-Fidelity
Frames
I incorporated the branding and made several layout adjustments before finalizing this iteration.
Here are selected screens from my initial round of designs.
Usability Test
Via Google Meet, I tested five users' ability to complete the three task flows.
I closely monitored areas where users paused or were unclear about where to click to proceed in the flow. Users successfully completed the following tasks:
Order a Book or Ebook: Navigate through the website to find a specific book, add it to the cart, and complete the purchase process.
Filter Books by Category: Utilize the filtering options to narrow down the book selection base on genre, author, or other categories.
Check Out: Proceed through the checkout process, including entering payment information and confirming the order.
Usability Test Insights & Provisions
Users found the filtering experience quick and easy, but many suggested adding a search bar or icon as an additional filtering option. They were also confused about how to add a book to the shopping cart due to the absence of a clear button. Additionally, most felt that the website did not meet their typical expectations for a checkout process. Here’s how I addressed these common issues.
Poor Visual Hierarchy: Before
Users observed inconsistencies with the logo, menu links, and icons in the header, which made it difficult to predict where to find key actions and led to a disjointed experience. They also suggested adding a search bar to enhance the filtering process.
Poor Visual Hierarchy: After
I redesigned the site header to improve visual consistency and user efficiency. This involved integrating a persistent search bar for quick filtering and reorganizing the navigation menu with clear, standardized labels. These changes create a more intuitive flow, significantly reducing friction and helping users find specific books or categories faster.
Redundant or Repeated Call-to-Action (CTA) Buttons: Before
The repeated "Add to Cart" buttons caused users to feel unsure about whether they have already added an item to the cart or might lead to accidental multiple additions.
Redundant or Repeated Call-to-Action (CTA) Buttons:
After
The 'Add to Cart' button would be replaced with a 'Quick Add' hover effect over the book image. This will allow users to effortlessly add items to their cart without needing to navigate away from the product page, streamlining the shopping experience.
Unresponsive Elements : Before
Users expressed confusion about the buttons on the product page, unsure whether they would add the book to the art or serve as option selectors.
Unresponsive Elements : After
To address this, I redesigned the elements as option buttons and added a clear call to action button for adding items to the cart.
Final Design
Reflection
Reflections & Next Steps
Working on the Ylva Publishing website redesign has been insightful and rewarding. The primary goal was to create a platform that reflects Ylva's values of intersectionality, representation, and discovery. User research revealed key pain points and expectations within the LGBTQ+ community, guiding the design process. Improvements included robust filtering options and a more intuitive checkout process. The new color palette and wolf mascot were well-received, strengthening the brand's visual identity.