All She Wrote Productions
Responsibilities
Research and analysis, design user flows, layout wireframes,
create style guidelines, illustrate visual assets, design user interface, usability testing
Background
Thea Chard, founder and creative director of All She Wrote Productions (ASWP), enlisted my help to design the website for her company. ASWP is a hybrid-publishing company that focuses on elevating the voices of authors from underrepresented communities, with an emphasis on femme and non-binary writers. They offer a variety of publishing services to writers individually or as a package, and want to begin a subscription service for readers to receive monthly Launch Boxes containing new books and promotional items.
Goals
Discover the needs of authors looking to navigate the publishing landscape, as well as book lovers who are interested in learning about and purchasing books by new authors. Design user flows for both types of users, style guidelines for the brand, and a responsive website with intuitive user journeys.
Process
Research competitors and user needs
Define the features and structure for an MVP
Develop the user journey
Ideate layout design
Create a UI Kit and style guidelines
Design and test the user interface
Stakeholder Interview and Competitive Analysis
In the initial stakeholder interview, Mrs. Chard helped to define problems, goals and requirements, and provided a list of her direct and indirect competitors. Analyzing the competitors involved auditing their product features by organizing a comparison chart.
Empathy Interviews and Analysis
ASWP has two primary users: writers and book customers. One-on-one interviews were held over Zoom video conference with participants representing each user type.
The research revealed surprising information about the difficulty authors face trying to be published by traditional methods, as well as the many avenues that book lovers use to discover new authors. One persona for each user type was developed, and empathy maps contributed valuable insight to their points of view.
From Feature Roadmap to Site Map
Using the guidelines from the stakeholder interview and the competitive analysis comparison chart, a feature roadmap was laid out to prioritize product requirements and their implementation. A site map constructed with these features in mind laid down the framework for task flows.
Task and User Flows
Designing a task flow for each of the two user types provided the building blocks for the user journey. The task flows were expanded into a full user flow, adding alternate ways to enter the website, more options to navigate through the site map, and annotations on the personas’ experiences throughout the flow.
Low- to Mid-Fidelity Wireframes
With the user flow completed, the next step was ideation. After exploring multiple design variations in thumbnail sketches, selected layouts were drawn in cleaner mockups that provided the structure for mid-fidelity wireframes. It was during this process that a need was discovered for an individual description page for each publishing service category.
Creating the UI Kit and Assets for High-Fidelity Wireframes
The stakeholder had provided her company message, wordmark fonts, and a branding mood board in the initial interview. These were used to define brand themes, create logo variations, and designate a color palette. Typography choices and designs for interactive components and their various states completed the initial UI kit for the site.
Infographic assets were created in Illustrator for the services overview page as a fun, stylistic feature that fit within the brand character. Finally, the guidelines in the UI Kit were applied to the mid-fidelity wireframes.
Prototype and Usability Testing
Using Figma’s prototype feature, the high-fidelity wireframes were connected into a prototype for usability testing. Participants completed tasks with Zoom conference video-sharing, and then answered questions about their experience. Organizing key observations into an affinity map revealed important insights, including the need for a less subtle navigation bar, clearer navigation labels, and space for more content on some pages.
Final Prototype and Wireframes
The high-fidelity wireframes were updated to reflect the observations from the usability tests. The final prototype was presented to the stakeholder, who was excited about the interface design of ASWP’s new website, and felt confident in a user experience crafted from direct user research and testing.