Stories2Connect
How might we increase access to books to school-age children during a pandemic?
Overview
Stories2Connect is the result of a 1-week challenge proposed by Adobe's Creative Jam in partnership with Scholastic Book Fairs, where students from UX Bootcamps should design an app related to book-sharing events for school-age children. My partner and I applied a user-centered approach during both the research and the design phases, while we exercised our UX/UI knowledge from our bootcamp, and practiced the creation of a product in a team of two.
My role
UX Researcher
UX Designer
UI Designer
Context
Collaboration with Betty Chen (CareerFoundry colleague) for the Adobe Creative Jam, in partnership with Scholastic Book Fairs
Tools
-
Adobe XD
-
Miro
-
Notion
-
Zoom
Spoiler alert!
We ranked 15th place out of 408 participants!
See official project brief:
The problem
"Your challenge is to design a mobile tool to help communities host book-sharing events, safely, in a pandemic. No matter how large or small the event, it must introduce or increase access to new or used books to school-age children."
The solution
Create an app that provides a comfortable and safe place for both adults and children to choose their next reading based on their needs, as well as to connect to their community through book-sharing and donation events. With our app, we hope to bring a useful tool for book lovers to find comfort and a sense of belonging during difficult times.
Our design process for Stories2Connect
5 W's Chart
Competitive Analysis
User Interview
Empathy Chart
Problem Statement
User Personas
User Flows
Mid-Fidelity Wireframes
Mid-Fidelity Prototype
Mid-Fidelity Usability Test
Mid-Fidelity Iteration
UI Style Guide
High-Fidelity Wireframes
High-Fidelity Prototype
Explore the current prototype:
(Or keep scrolling down to see more details of the design process.)
Understanding the context
We used the project brief provided by Scholastic Book Fairs to create a 5 W's chart to visualize the context in which our product would be used, the problem we are trying to solve and start crafting a viable solution.
-
5 W's chart
-
Competitive Analysis
Competitive Analysis
We performed a competitive analysis of three apps that offer features that we could include in our product: Little Free Library (book sharing app), Mobilize (volunteer), and Facebook (events feature). We were able to see what works well and could be implemented in our app, and what are the weaknesses and functionalities we can improve. It was a good source of ideas to guide us during our brainstorming sessions.
​
Free Little Library
Mobilize
No child-friendly interface for library
Incentives for volunteers
Lack of clear default safety guidelines
Our main goal is to increase children's access to books, but the interfaces for these platforms have only adults in mind, so we see here an opportunity to create something more appealing to children.
In order to encourage more people to volunteer in events and give back to the community during a pandemic, it would be nice to offer some incentive and emphasize the benefits of helping others.
When creating an event, the user is the one who writes the specific guidelines for their event. It would be beneficial if the platform at least suggested a default list/text for users who want to create a safe event.
Defining the user
We were able to perform one ​user interview with a mother of three school-age children. In order to gather more qualitative information about the potential users, and I analyzed an article written by the School Library Journal on how School Librarians Get Creative To Hold Book Fairs Despite Pandemic Restrictions, where I found quotes from school librarians and educators on their experience during the pandemic.
-
User Interview
-
User Research
-
Empathy Chart
-
Problem Statement
-
User Personas
What are the needs of parents and educators?
Children's reading level & autonomy
We found that children's reading level plays an important role when parents select a book for their children. Also, children enjoy choosing a book by their own in a book fair.
Book recommendations for parents
Parents enjoy to participate and see their children in school activities, and they would also like a source of book recommendations.
Educators miss community engagement
Also, educators are trying to recreate the autonomy children like so much in book fairs, and need an online platform to connect remote book fairs with families.
​
Problem Statement (parents & children)
Parents need a way to safely access books that matches her children's reading levels despite the pandemic lockdowns, because she needs a way to encourage them to read physical books during their off-screen time. We will know this to be true when we see children accessing physical books that were curated specially for their level, and that they enjoy, acquired in a safe manner.
Problem Statement (educators)
Educators need a way to create a safe event where they will be able to present books that match their student's needs, because they are studying online and have no access to the school library. We will know this to be true when we see students choosing a physical book from a curated catalogue created specially for their reading needs.
User Personas
Anne
Ben
Ideating Stories2Connect
Based on the research, we wanted to serve the community as a whole, where both parents and children could enjoy the access to books. So the app will offer recommendations to parents, but it will also provide a special tab for children to browse and chose titles based on their reading level. Community get together by volunteering in events and donating books.
-
User Flows
User Flows
Wireframes & Prototype
Due to the time constrain, we decided to work on mid-fidelity wireframes from the start of the designing process.
-
Mid-Fid Wireframes
-
Mid-Fid Prototype
The next step was to transform all information gathered into proto-personas. We created one representing the parents and other representing school librarians and educators. This way, we could better understand and visualize these two user profiles.
Testing our prototype
We carried out a usability test with a parent and gave them three tasks to be perform based on out user flows. Our main goal was to discover how intuitive and easy is the flow we created.
-
Usability Test
-
Iteration
​
From the three tasks asked to be performed, there was an issue only with one, where it wasn't clear for the user where they could find the list of books to donate and pickup. The solution was to divide the "Donate" tab into "My Donations" and "My Pickups", where the books are more organized.
Refining our prototype
We developed a style guide in order to move on with the high-fidelity wireframes. We wanted to display bright, positive and optimistic colors to appeal to both parents and children, as well as volunteers in an intuitive flow.
Style Guide
-
UI Style Guide
-
High-Fid Wireframes
-
High-Fid Prototype
High-fidelity Prototype
Stories2Connect is a very special project to me, it was challenging and fun at the same time. We wanted to show this positive and exciting feeling in the user interface, where both adults and children can discover new stories in an intuitive flow. We created a positive emotion for users when volunteering or looking for new books by using bright colours to showcase excitement and optimism.
Next Steps
User testing with children
One of the things that we are sorry about is that we were not able to conduct a usability test with a child to test the kid's interface. That would allow us to test the visuals and how easy it is for a child to use our app.
Parents exchanging book recommendations
A button allowing parents to upvote a book so that it is highlighted in a specific age-group/grade. Parents could also leave comments and exchange tips in a book's page to improve the reading experience.
Online events within the platform
A community feature allowing story-telling or book clubs hosted within the platform. Parents could volunteer to read stories to their children's classmates, for example.
Key learnings
Time is precious and organization is the key
With only one week to create an app from scratch, Betty and I set out a schedule to make sure that the most important phases of the research would be doable, and we were constantly communicating with each other to make sure we were on the same page throughout the process.
Get creative and work with what you have
The time constrain made us decide what was essential and what we should let go. While we weren't able to perform surveys, and a second round of user testing, we knew that we should get as much information as we could about the potential users. Since we could not find another mother or an educator to interview, we used the School Library Journal article to get more insights about user needs.
Don't be afraid of trying new tools
It was my first time using Adobe Xd and, while it was weird at first to figure it out, my knowledge in Figma helped me to walk through it. Betty also helped me a lot whenever I had questions about the platform.
Having a teammate is awesome
It was my first collaborative UX/UI project, and I'm so glad that Betty accepted my invitation to work on this challenge. I learned a lot with her and the process made me more confident about sharing, questioning, and defending design decisions with a co-worker in the future.
"Aline is a dependable, hardworking, and detail-oriented person. I had a great experience working with her on the Adobe project. She helped to ensure that tasks were completed on time while maintaining an open mind with feedback. She constantly strives for improvement on the project and encourages collaboration.
I highly recommend working with Aline as she is pleasant and easy to work with as she always strives for excellence."
Betty Chen, UX/UI Designer & my awesome teammate in this project
And the result is...
We ranked 15th place out of 408 participants!
I'm so proud of this project, sometimes I still can't believe how much we've done in such short amount of time, and the recognition from the Adobe Jam team makes me feel we are in the right path to become great UXers!
See also...
Olive
UX/UI Design - Nutrition App
Olive is a an app that helps users to switch to a plant-based diet in a healthy and motivational manner. My role in this project includes product design, UX research, information architecture, and UI design.
