Finding the books you want to read while supporting your local community just got a whole lot easier!
UX / UI Design
Project Overview
Project Type
Capstone project during UX Design bootcamp at BrainStation
Role
UX/UI Designer, Researcher, Prototyper
Timeline
12 Weeks
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.
Design Process
Empathize
Problem Space
Secondary Research
Primary Research
Define
Persona
Experience Map
Competitive Analysis
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.
Ideate
User Stores & Epics
Storyboard
Task Flow
Prototype
Concept Sketching
Wireframes
MidFi Prototype
Test
Usability Testing
Addressing Notes
Refine
Brand Identity
HiFi Prototype
“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
Empathize
Problem Space
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?
Secondary Research
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.
$0.45
per $1 spent at a local business is reinvested into the community
vs.
$0.15
per $1 spent at a large box store or other non-local store is reinvested into the community
Primary Research
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:
Interview Insights
People prefer to read physical copies of books
1
The library is still a valuable asset to avid book readers that some dismiss as archaic.
2
Convenience is the biggest factor in an avid book reader’s choice to buy from a large retailer.
3
Each interviewee felt a social responsibility to support their local community by making purchases at local bookstores.
4
Large retailers have a wider selection and easier to use tools to find more hard to find books.
5
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?
Define
Persona
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.
Experience Map
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.
Ideate
User Stories
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 Flow
TASK: Find a new book at your local book store in order to support your community.
Prototype
Concept Sketching
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
Shelf Mockup
Book Hero Page
Store Selection Page
Book
Covers
Scrollable
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
MidFi Prototype
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.
Test
Addressing Notes
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:
01
MidFi.v1
Built out the featured store section and added a section to show the user how their money is supporting the stores.
HiFi.v1
Refocus the solution on how to best connect users to their local stores and build a sense of community.
02
MidFi.v1
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
HiFi.v1
03
MidFi.v1
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.
HiFi.v1
Refine
Brand Identity
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:
cozy
homey
warm
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.
Brand Font
App Font
Primary Colors
Word Mark
I began exploring the styles of local bookstore signs by recreating a rough graphical element that resembled the signs hanging by a wood post. Through research many of these used Serif fonts on their signs. So my initial exploration began with Serif fonts for my word mark.
Word Mark
But as I developed my ideas and the overall brand style, I was more drawn to san serif fonts.
I landed on the FUTURA font as a modern artistic expression that contrasts the old world feel and nature of bookstores.
stacks
App Icon
Finalized Wordmark
Primary Logo
White on Black
Black on White
Bring It All Home
final hifi prototype
As I finalized changes and began to inject color, I was able to firm up my hi-fidelity prototype for the task flow. As with my other iterations I kept my focus on connecting users with their local stores and emphasize community. This led to a number of some more design changes and better ways to implement color in the process.
Will all of this in hand, I was able to produce a final prototype comprising of everything I've researched, discovered, built, and learned over the 8-week span.
What's Next?
market
With a fully functioning prototype it's time to get the word out and let it show its stuff. I developed a prototype of a functioning one-page marketing site to promote stacks and its key features on both web and mobile desktop spaces.
.png)
%20(Mockuuups%20Studio).png)
integrate AR technology
Augmented Reality technology is one of the more exciting aspects in app development currently. With the expressed goal of helping users find books locally, I'm setting off to build a design to integrate my users' goals with the tech of AR.
At a friend's place and like a book you see? Navigate to the "Scan" tab in the app and hold it up for the camera to add it to your shelf or find it at a local store!
explore alt platforms
