Finding the books you want to read while supporting your local community just got a whole lot easier!
UX / UI Design
Capstone project during UX Design bootcamp at BrainStation
UX/UI Designer, Researcher, Prototyper
I was challenged to tackle a problem space that had some meaning to me. With this is mind I chose to explore a potential solution to help connect avid book-readers to their local stores & libraries in order to foster more of a community. Throughout the eight weeks working on this project I was exposed to ideation, research, designing, prototyping, and creating a brand identity.
Through the eight week challenge I followed a structured outline to help complete each step in a timely manner. This allowed me to attack each step in the design process with the same emphasis and come away with a greater understanding of everything that goes into designing an application.
User Stores & Epics
“Buy books from people who want to sell books, not colonize the moon.”
Greenlight Bookstore in Brooklyn is using its storefront to urge customers to shop at independent bookstores. Photo Credit: Amr Alfiky/The New York Times
During the pandemic, shoppers flocked to large box stores with greater online presences. While Amazon's profits rose by almost 220% during the pandemic, over 100,000 small businesses in the U.S. closed their doors.
Independently owned bookstores, and subsequently local communities, suffer from underinvestment by local residents, adversely affecting their surrounding community.
Initial How Might We
How might we connect avid readers to independent bookstores in order to support their local communities in lieu of large retailers?
Through my research I found a direct correlation between the amount of money spent at local stores to money being reinvested back into the local community it's located in.
per $1 spent at a local business is reinvested into the community
per $1 spent at a large box store or other non-local store is reinvested into the community
Using these initial findings I moved on to the interview stage of my research. I identified three different individuals that met my target demographic. In order to qualify they needed to be:
- aged 25 - 35
- read at least 6 books a year
- Lives in the United States
Using this participant criteria, I conducted interviews with the following individuals:
People prefer to read physical copies of books
The library is still a valuable asset to avid book readers that some dismiss as archaic.
Convenience is the biggest factor in an avid book reader’s choice to buy from a large retailer.
Each interviewee felt a social responsibility to support their local community by making purchases at local bookstores.
Large retailers have a wider selection and easier to use tools to find more hard to find books.
Updated How Might We
How might we make it easier to connect avid readers to independent bookstores and libraries in order to support their local communities in lieu of large retailers?
With my initial research explored and organized and a more fine tuned HMW question created, I began to turn my attention to my prospective users. Who would these people be? How would they act? What would they most want, and just as importantly NOT want, a solution to look like? As I combed through my findings I was able to synthesize VERONICA. While a single persona, she represents the characteristics captured in all of my research and interviews.
Taking what I now know about my users, I was able to map out what their potential experience would be in the current marketplace and what moments of opportunity existed for my solution to intervene and save the day.
Now that our user and what the current state of affairs within the problem space were clearing up, I jumped head first into the IDEATION phase to firm up what User Stories are most vital to addressing the problem space, and what a potential task flow would be for an app-based solution.
I began with a wide range of about 20 user stories. Once I reached that number, I focused on grouping the stories into similar groupings, or EPICS. I finally decided which Epic was most relevant to my problem space and potential solutionThis final list landed me on a handful of epics that I wanted to take further into the Task Flow stage. (Full List of Stories)
TASK: Find a new book at your local book store in order to support your community.
I began the prototyping phase by exploring design solutions with a number of sketches. These were meant to explore different possibilities without filtering out any ideas. This was used as a free-thinking time period which would help me move onto the actual prototyping.
Home Page Mockup
Book Hero Page
Store Selection Page
Hero Book Cover Image
Share, Find Store, Add to List Buttons
Images of the Bookstores
Modals w/ pertinent bookstore info: distance, copies available, etc
Selected Book Info
From my solution sketches I developed a greyscale mid-fidelity prototype to explore what the solution flow would look like and how the user would interact with it. This allowed me to move into user testing to finalize the usability before HiFi.
With a greyscale prototype fully functioning, it was time to return to the users to test the usability of my solution. It was vital to conduct this testing now, and before getting into high fidelity, because pages are much easier to change in midfi, thus wasting less time and working out the kinks before hifi.
I conducted two separate rounds of testing involving 5 users each. From those tests I found 3 major themes that I needed to focus on as I worked into my high fidelity designs:
Built out the featured store section and added a section to show the user how their money is supporting the stores.
Refocus the solution on how to best connect users to their local stores and build a sense of community.
Lost the shelf design and implemented a more dynamic interaction in switching between the users' different shelves.
Simplify the shelf to simplify the style and allow the book covers to be the focal point without a flashy shelf design
Got rid of general purchasing options and made options more clear and specific for users. Put more emphasis on the bookstore as well with options to call, email, map, or add to stores.
Get away from the average book app with generic purchasing options. Push the user to have to pick the book up in store to increase engagement.
With initial rounds of User Testing and major pain points catalogued and prioritized I turned my attention to the pretty packaging the solution will be wrapped in: Branding.
I decided on a name for the application early on. As I wanted to focus on a nostalgic, old world feeling of connectivity through books, STACKS felt like a natural name to use. For me it brings back images of long rows of bookshelves from floor to ceiling. Endless possibilities of what needles could be found within the haystacks of books.
Now with a same decided on, I had to figure out what I wanted the Stacks brand to look like, be like, feel like. I landed on three words that captured the essence of a local bookstore experience:
My mood board served as a main guiding tool as I worked my way into branding specifics. I identified my primary colors being a combination of neutrals, accented by more cozy vibrants like the orange below.
For my brand's fonts, I wanted to juxtapose the old world feel of books with a more modern vibe. Futura felt like an interesting choice for a book application as I'd not seen it used by other potentially direct competitors. Open sans served as a great simplistic, but stylish, font to get information across easily to users in the body of the app.