Girls Write Now
Building community & empowering young women through the power of storytelling
role
lead product designer
team
pm, 5 engineers
duration
9 months
year
2023-2024
skillset
Visual Design
Wireframing
Design Systems
Interaction Design
Usability Testing
Handoff
Girls Write Now
Building community & empowering young women through the power of storytelling
role
lead product designer
team
pm, 5 engineers
duration
9 months
year
2023-2024
skillset
Visual Design
Wireframing
Design Systems
Interaction Design
Usability Testing
Handoff
context
Girls Write Now (GWN) is a national NPO that breaks down the barriers of gender, race, age and poverty to mentor the next generation of writers and leaders
Their main program matches gender expansive mentees (ages 14-24) with mentors (ages 25-95) to publish stories of all media types.
problem scope
...but GWN has an archive of 1000s of stories from mentees & mentors that’s currently only accessible on the web
limited filtering & search functionality
no engagement with stories
no personalized user experience
how might we
make GWN’s stories accessible to
grow their audience and
aid their mission to
“shape culture and inspire change”?
our solution
A mobile app that empowers users to easily explore content, have a personalized experience, and engage with others in the GWN community.
Jump to Final Designs
my task
Design the MVP with core functionalities (onboarding, search, filter, reading story, settings)
Research the most impactful stretch features in scope, design and usability test them
understanding our users
After conducting 10 user interviews with mentors, mentees, and avid readers on GWN, I concluded three key insights:
Discoverability
Users break out of their reading preferences primarily through recommendations from friends, by readers who liked similar interests, and from the “featured stories” from the GWN monday newsletters.
reading experience
Readers are busy and often look for stories that they can save for later when they’re more available.
user-to-user engagement
People prefer positive-only reactions instead of comments because comments requires additional moderation.
feature ideation
After ideating multiple solutions based on our user research, we employed an impact-effort matrix to assess which stretch features to prioritize. We defined impact based on personalization, community engagement, and reflection opportunities.
We prioritized low-effort high-impact features and eliminated features that weren’t technically feasible in our timeframe.
feature selection
We ultimately decided the core features would be:
Onboarding & Login
mvp
create account with name. email, birthday, pronouns
Story Search & Filter
mvp
Search for stories by title or author name.
Filter by genre, theme, or tone.
Admin Highlighted Content
mvp
Highlight featured stories and collections on home page
Read Story
mvp
Read story, ability to access author profile and genre pages from story
personalization
stretch
Recommendation algorithm based on your favorites and 5 most recent reads
story engagement
stretch
Ability to react to stories and add to favorites or reading list
design decisions
decision 01
Filtering
Given the large amount of nested genres (ie. multiple sub-genres of fiction within fiction), I had to ideate the best way to display the amount of options without interfering with the usability.
The first iteration had a drop-down menu, while the second option had modal that expands up, making it easier for users to select options with their thumbs.
Drop-down menu
Modal
Chosen
decision 02
Story Cards
I had to ideate multiple solutions to consolidate all of the important elements of a story to attract readers, while also highlighting the author themselves. The first few iterations focused on elements required for the MVP, and later in the project they were iterated further to include the stretch feature elements: reactions and adding to your reading list.
decision 2a
Information Hierarchy
One key factor I had to take into consideration was the information hierarchy of the title, author names, pull quote, tags, and reactions.
I wanted to ensure the authors were highlighted whether through a higher placement in the hierarchy or in their own designated section.
I also wanted to ensure the story cover image and pull quote was highlighted as my user research showed that book covers aided in discoverability of new genres and authors.
v.1
v.2
Chosen
decision 2b
Tags
Additionally, I had to consider the best way to display the tags.
In my first iterations, I experimented with the option to expand the card by clicking “+X” to display all tags. However, after usability testing, I discovered there wasn’t a real value-add with this interaction.
In my second iteration, I also considered removing the fill behind the tags to avoid confusion on whether or not they were clickable (they’re not). I also had to consider how I would display which filters were active and applicable to each story.
v.2.1
v.2.2
Chosen
final designs
discover
Users can discover new stories and explore genres via the home page or through the search page.
Highlighted monthly collections and stories from GWN’s Monday Newsletter favorites
Personalized user experience through a recommendation algorithm based on your favorites and recently read
Previously:
Users could only browse all stories at once.
Home
Discover Subgenres
search
When users have a specific story or author in mind, they can use our search feature.
Designed edge cases for when a user does not have an existing search history, and when there are no results based on their search
Search results include relations to story title, author, genre, and text.
Previously:
Users did not have a search history and wouldn’t know how each story related to their search.
If a recent search history does not exist
If a recent search history exists
Search Results
filter
Users can narrow their exploration by specific genres, topics, and/or tones.
Nested sub-genres on a separate overlay to avoid cognitive overload.
Results dynamically update in the background as filters are selected.
Designed edge case where there are no matches for user’s selected filters.
Color coded filter tags to make it clear which filters applied.
Previously:
Users could select “Fiction” and “Children’s Fiction” as separate entities, making it repetitive.
Some categories existed in both genre and topic filters, making it unclear which filter the category was from.
story engagement
Users can positively react to stories, as well as add stories to their favorites or reading list.
Reaction counts aided users discovery process to select a story to read and created a sense of community
Favorites and Reading List created a more personalized user experience
Designed toast notifications to show confirmation a user added/removed from their favorites or reading list.
Previously:
Users could only share a story. There was no other form of user engagement with stories.
learnings
This was my first project where I was the sole designer on a team of engineers. I operated where my designs were the source of truth for all of development. Some key learnings:
navigating innovation vs. feasibility
Being the only designer, I had to develop a stronger understanding of technical constraints to align my creative visions with technical feasibility. For instance, although I believed adding personal collections would add the most impact in terms of personalization, we simply did not have the time to implement an entirely new backend. Instead, we compromised by still adding community value by implementing reactions.
communication is key
I had to learn how to communicate my designs effectively. I couldn’t always rely on being able to verbally walk my team through my designs, so I realized early on how important it was to establish a good connection with my team. As such, I annotated my designs with explanations of how I expected each interaction to work and constantly asked for feedback and input from my team.
thanks
A huge shoutout to Cal Blueprint for this opportunity :) I grew so much as a designer through your constant support and design crit. <3
design team
girls write now team
Girls Write Now
Building community & empowering young women through the power of storytelling
role
lead product designer
team
pm, 5 engineers
duration
9 months
year
2023-2024
skillset
Visual Design
Wireframing
Design Systems
Interaction Design
Usability Testing
Handoff
context
Girls Write Now (GWN) is a national NPO that breaks down the barriers of gender, race, age and poverty to mentor the next generation of writers and leaders
Their main program matches gender expansive mentees (ages 14-24) with mentors (ages 25-95) to publish stories of all media types.
problem scope
...but GWN has an archive of 1000s of stories from mentees & mentors that’s currently only accessible on the web
limited filtering & search functionality
no engagement with stories
no personalized user experience
how might we
make GWN’s stories accessible to
grow their audience and
aid their mission to
“shape culture and inspire change”?
our solution
A mobile app that empowers users to easily explore content, have a personalized experience, and engage with others in the GWN community.
Jump to Final Designs
my task
Design and ship the MVP with core functionalities (onboarding, search, filter, reading story, settings) with a team of 5 developers
Research the most impactful stretch features in scope, design and usability test them
Design and ship the MVP with core functionalities (onboarding, search, filter, reading story, settings) with a team of 5 developers
Research the most impactful stretch features in scope, design and usability test them
understanding our users
After conducting 10 user interviews with mentors, mentees, and avid readers on GWN, I concluded three key insights:
Discoverability
Users break out of their reading preferences primarily through recommendations from friends, by readers who liked similar interests, and from the “featured stories” from the GWN monday newsletters.
reading experience
Readers are busy and often look for stories that they can save for later when they’re more available.
user-to-user engagement
People prefer positive-only reactions instead of comments because comments requires additional moderation.
feature ideation
After ideating multiple solutions based on our user research, we employed an impact-effort matrix to assess which stretch features to prioritize. We defined impact based on personalization, community engagement, and reflection opportunities.
We prioritized low-effort high-impact features and eliminated features that weren’t technically feasible in our timeframe.
feature selection
We ultimately decided the core features would be:
Onboarding & Login
mvp
create account with name. email, birthday, pronouns
Story Search & Filter
mvp
Search for stories by title or author name.
Filter by genre, theme, or tone.
Admin Highlighted Content
mvp
Highlight featured stories and collections on home page
Read Story
mvp
Read story, ability to access author profile and genre pages from story
personalization
stretch
Recommendation algorithm based on your favorites and 5 most recent reads
story engagement
stretch
Ability to react to stories and add to favorites or reading list
design decisions
decision 01
Filtering
Given the large amount of nested genres (ie. multiple sub-genres of fiction within fiction), I had to ideate the best way to display the amount of options without interfering with the usability.
The first iteration had a drop-down menu, while the second option had modal that expands up, making it easier for users to select options with their thumbs.
Drop-down menu
Modal
Chosen
decision 02
Story Cards
I had to ideate multiple solutions to consolidate all of the important elements of a story to attract readers, while also highlighting the author themselves. The first few iterations focused on elements required for the MVP, and later in the project they were iterated further to include the stretch feature elements: reactions and adding to your reading list.
decision 2a
decision 2a
Information Hierarchy
One key factor I had to take into consideration was the information hierarchy of the title, author names, pull quote, tags, and reactions.
I wanted to ensure the authors were highlighted whether through a higher placement in the hierarchy or in their own designated section.
I also wanted to ensure the story cover image and pull quote was highlighted as my user research showed that book covers aided in discoverability of new genres and authors.
v.1
v.2
Chosen
decision 2b
Tags
Additionally, I had to consider the best way to display the tags.
In my first iterations, I experimented with the option to expand the card by clicking “+X” to display all tags. However, after usability testing, I discovered there wasn’t a real value-add with this interaction.
In my second iteration, I also considered removing the fill behind the tags to avoid confusion on whether or not they were clickable (they’re not). I also had to consider how I would display which filters were active and applicable to each story.
v.2.1
v.2.2
Chosen
final designs
discover
Users can discover new stories and explore genres via the home page or through the search page.
Highlighted monthly collections and stories from GWN’s Monday Newsletter favorites
Personalized user experience through a recommendation algorithm based on your favorites and recently read
Previously:
Users could only browse all stories at once.
Home
Discover Subgenres
search
When users have a specific story or author in mind, they can use our search feature.
Designed edge cases for when a user does not have an existing search history, and when there are no results based on their search
Search results include relations to story title, author, genre, and text.
Previously:
Users did not have a search history and wouldn’t know how each story related to their search.
If a recent search history does not exist
If a recent search history exists
Search Results
filter
Users can narrow their exploration by specific genres, topics, and/or tones.
Nested sub-genres on a separate overlay to avoid cognitive overload.
Results dynamically update in the background as filters are selected.
Designed edge case where there are no matches for user’s selected filters.
Color coded filter tags to make it clear which filters applied.
Previously:
Users could select “Fiction” and “Children’s Fiction” as separate entities, making it repetitive.
Some categories existed in both genre and topic filters, making it unclear which filter the category was from.
story engagement
Users can positively react to stories, as well as add stories to their favorites or reading list.
Reaction counts aided users discovery process to select a story to read and created a sense of community
Favorites and Reading List created a more personalized user experience
Designed toast notifications to show confirmation a user added/removed from their favorites or reading list.
Previously:
Users could only share a story. There was no other form of user engagement with stories.
learnings
This was my first project where I was the sole designer on a team of engineers. I operated where my designs were the source of truth for all of development. Some key learnings:
navigating innovation vs. feasibility
Being the only designer, I had to develop a stronger understanding of technical constraints to align my creative visions with technical feasibility. For instance, although I believed adding personal collections would add the most impact in terms of personalization, we simply did not have the time to implement an entirely new backend. Instead, we compromised by still adding community value by implementing reactions.
communication is key
I had to learn how to communicate my designs effectively. I couldn’t always rely on being able to verbally walk my team through my designs, so I realized early on how important it was to establish a good connection with my team. As such, I annotated my designs with explanations of how I expected each interaction to work and constantly asked for feedback and input from my team.
thanks
A huge shoutout to Cal Blueprint for this opportunity :) I grew so much as a designer through your constant support and design crit. <3
design team
girls write now team