top of page

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

2.png
3.png

Spoiler alert!

IMG_0928.PNG
Image 2.png

We ranked 15th place out of 408 participants!

See official project brief:
Frame 2.png
Frame 1.png

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."

Untitled_Artwork 46.png
Untitled_Artwork 47.png

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

Stories2Connect Process.png

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
Why.png

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.

​

Little Free Library.png
Free Little Library
Mobilize.png
Mobilize
facebook.png
Facebook

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

User Persona 1 - School Staff.png

Anne

User Persona 2 - Mother.png

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. 

Screen Shot 2022-01-28 at 10.45.27 AM.png
image 794.png
image 770.png
iPhone 11 Pro.png
image 339.png

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
Design Style Guide.png

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

MOCKUPS - MOBILE.png

Next Steps

Frame 49.png

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.

Frame 50.png

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.

Frame 62.png

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

Untitled_Artwork 50.png

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. 

Untitled_Artwork 49.png

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.

Untitled_Artwork 53.png

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. 

Untitled_Artwork 54.png
Untitled_Artwork 52.png

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

Untitled_Artwork 55.png
Union.png

And the result is...

Untitled_Artwork 56.png
Frame 1.png

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!

Thank you for taking a look at my work :)

Now you know how my design process worked for this project. How can I help you with your next project?

Let's connect and share our thoughts about UX, UI, and the industry in general! I like to learn new stuff :)

Aline Carbonaro

UX/UI Designer

Untitled_Artwork 57.png

See also...

Desktop - 1.png

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.

Desktop - 3.png

StudyBuddy

UI Design - Student Community App

Study Buddy is a social network for students who are looking for like-minded users who are studying similar subjects to share their academic goals, motivate each other and get some help from their peers. 

bottom of page