BookBag
Adobe creative jam challenge mobile app for avid book readers.
Client: BookBag
Role: UX/UI Designer
Toolkit: Adobe XD, Adobe Illustrator, Slack
Duration: 1 Week
Background: The Scholastic Book Fairs Adobe Creative Jam is an annual event where creative professionals showcase design skills and develop innovative solutions. This year’s project is a mobile app for kids and adults to remotely access books, like a digital library.
Challenge
With many public libraries closed and bookstores dwindling, access to books has become increasingly limited during the pandemic. Reading remains essential for all ages, yet many lack safe, accessible ways to enjoy and learn from books. We aim to design a mobile app that creates a virtual space for both avid and new readers to safely access and engage with books remotely.
My Impact
To address the problem, I designed user flows that recreate the experience of navigating a physical library. I developed key screens, including the menu, home, library, book trade, and purchase screens, allowing users to explore, trade, and buy books seamlessly, much like an in-person library visit.
We decided to put our heads together to express some ideas by making how might we statements talking about the key features we want our application to achieve. Then I wrote down some ideas I believe would be great assets to our app.
Sketches
My teammate and I communicated virtually through Zoom discussing the main points of focus on the project. Based on these HMW statements then I began to create a couple of sketches on my tablet to visualize how these features may interact in the mobile app. Once I finished making these sketches I presented them to my teammate to receive some feedback and that way we can identify which ideas to use in our design.
Since books come in all types of colors we wanted to capture the attention of children and parents to make them feel comfortable navigating through this mobile app. I was determined to create a mood board with playful colors that appeal to both parties. Then I went ahead created a style guide and selected the appropriate font and colors to make it look modern and simplistic to set the mood of a library/bookstore.
With our sketches finalized, we decided to move forward by creating wireframes for each screen to stay on track with our deadline. Knowing that an efficient, functional design was essential, we focused on developing low-fidelity wireframes to outline the core screens and user flows.
This section was challenging, as we needed to ensure the color palette was just right. We avoided overly bright colors to prevent distractions, focusing on creating a comfortable reading experience. Ultimately, we created high-fidelity screens that achieved our goal of a fun, friendly, and visually appealing app for all users.
1. Flow
Create an account and arrive on the home screen.
2. Flow
Select a book and complete a purchase.
3. Flow
Select a book to swap and rate swapper.
4. Flow
Find a donation bin and donate to a local book fair.
Conclusion
Communication is the most important thing to have when working with someone. If you feel like you don't understand something. Stop what your doing and ask questions. It's crucial to ask as many as questions you can to make your workflow easier in the end. Our communication helped us stay on top of things and it was by far my favorite part of doing this project. Working with my teammate Bridget McKay was an outstanding experience. I never thought I would meet such a creative individual to work with for a fast-paced project. I had so much fun working with a teammate and I am excited to work more with others in the future.
If I could go back and fix something in this project. I would go back and make sure the colors we used are passing at least AA standard contrast. Also, rework the events flow I feel like that screen looks a bit crowded and the buttons look too small on the first screen.
Reached the end? Plot twist—there’s more to see!
