Overview
THE CHALLENGE
"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 PROJECT
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.
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.
My Role
UX Researcher
UX Designer
UI Designer
Context
Client: Scholastic Book Fairs
Team: Aline Carbonaro & Betty Chen a.k.a. "Golden Stars"
Timeline: 1 week
​
Tools
Adobe Xd
Miro
Notion
Zoom
THE DESIGN PROCESS
Who? What? Where? When? Why?
Competitive Analysis
User Interview
Feeling, Thinking, Doing 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
Understand & Empathize
UNDERSTANDING THE CONTEXT
We used the project brief to create a table to visualize the context in which our product would be used, the problem we are trying to solve and start crafting a viable solution.
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. We analyzed the usability, layout, navigation structure, differentiation, and CTAs. It was a good source of ideas to guide us during our brainstorming sessions.
​
Free Little Library
Mobilize
Define
USER INTERVIEWS & USER RESEARCH
Due to the reduced amount of time to develop and design the product, 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, we had to be creative 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 found quotes from school librarians and educators on their experience during the pandemic.
​
​
Goals:​
-
Find what is the main source of children's books
-
Get insights about attending and organizing school activities and community events
-
Get information about parents and children reading habits
-
How librarians and school staff adapted school fairs during the pandemic restriction
With​ the information gathered from the interview and article, we developed a "Thinking, Doing, Feeling​" chart in order to organize the insights to proceed to the ideation phase.
.jpg)
Interview with a parent of school-age children​
Article with quotes from school librarians and educators
We were able to get the following insights:
We also realized that we have three different types of potential users: parents, educators and children, and we have to bear them in mind while designing our product. Because of that, we developed two problem statements so that we could focus on the specific goals of those audiences:
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
USER FLOWS
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.
Ideate
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.
Prototype
MID-FIDELITY WIREFRAMES
Due to the time constrain, we decided to work on mid-fidelity wireframes from the start of the wireframing process. We knew what features we wanted in our MVP, so now it's time to make this app happen!
Test
USABILITY TEST
We carried out a usability test with a parent and gave them three tasks to be perform based on out user flows.
Methodology: 1 test conducted in person using Adobe Xd prototype on a desktop.
Participant: 1 tester that somehow fit in the target audience
MAIN GOAL
How intuitive and easy to use is the flow?
​
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.
The user pointed out the they don't feel comfortable sharing an image from their child while creating a profile, so this step was removed.
STYLE GUIDE
We developed a style guide in order to move on with the high-fidelity wireframes. We wanted to display bright and optimistic colours to appeal to both parents and children, as well as volunteers.
Refine
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.
Reflections
LESSONS LEARNED
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...
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!