top of page

Finding the books you want to read while supporting your local community just got a whole lot easier! 

UX / UI Design

Total Icon BG 10.png
Frame 20.png

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

Screen Shot 2022-08-05 at 12.04_edited.jpg
“Buy books from people who want to sell books, not colonize the moon.”

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. 
fa86ca_1a7a1db2acb74c3587aa8f81960bee92_
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:

 
Screen Shot 2022-08-04 at 11.58.01 AM.png
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. 
Page 32.png
Page 33.png
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. 
Frame 91.png
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)
Screen Shot 2022-08-04 at 3.52.31 PM.png
Task Flow
Task Flow - Capstone - Bookstore Stuff.png
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. 
IMG_2200_edited.png
IMG_2198_edited.png
IMG_2201_edited.png
IMG_2199_edited.png

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.
mockuuups-p8nnpmQBC7TcA1yFq8kvGv25.png
mockuuups-9akpL19Lh1QWJgfi1fudam11.png
mockuuups-9akpL19Lh1QWJgfi1fudam12.png
mockuuups-9akpL19Lh1QWJgfi1fudam13.png
mockuuups-9akpL19Lh1QWJgfi1fudam14.png

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

mockuuups-p8nnpmQBC7TcA1yFq8kvGv25.png

MidFi.v1

15.png

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

mockuuups-9akpL19Lh1QWJgfi1fudam11.png

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

mockuuups-p8nnpmQBC7TcA1yFq8kvGv16.png

HiFi.v1

03

mockuuups-9akpL19Lh1QWJgfi1fudam13.png

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.

mockuuups-p8nnpmQBC7TcA1yFq8kvGv17.png

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

Page 34.png
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

Frame 4971.png

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.
13 Pro - 7.png
stacks
App Icon
Frame 4972.png
Finalized Wordmark
TitleCard.png
Primary Logo
TitleCard-1.png
White on Black
TitleCard-2.png
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. 
mockuuups-iphone-13-pro-mockup-perspective-right22.png
mockuuups-iphone-13-pro-mockup-perspective-left22.png
mockuuups-9akpL19Lh1QWJgfi1fudam21.png

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. 
Macbook Pro mockup floating to the left (Mockuuups Studio).png
iPhone 12 Mockup (Perspective Right) (Mockuuups Studio).png
integrate AR technology
WebsiteAR.gif
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
Apple Watch.png
I was challenged to explore what an alternate flow would look like for the Stacks application on a different platform other than mobile. 

In consideration of my persona and our target users, I explored what an Apple Watch version of Stacks might look like, and what functionality would be vital to its effectiveness. 

I decided the watch function would solely be aimed at alerting users when books were ready to be picked up and link to their navigation application of their choice. This simplifies things and allows users on the go the ability to get notifications and directions to their local store with ease! 
Stacks Application.
bottom of page