Bookspot

An app for avid readers who want to visit real places from fantastic fiction.

by Elizabeth Beier

UX/UI Designer

www.elizabethportfolio.com

What is Bookspot?

These days, someone traveling can find almost everything on Google Maps or Yelp — bars, night life, shopping. But for dedicated readers who enjoy getting to know places through books, there’s no app to connect places to literature.

​

Bookspot is an app for avid readers to visit real places from fictional books. The classic example is a London tourist going to Platform 9 ¾, but there are so many other wonderful books set in very real, visit-able places. Bookspot is an app for them to be curated and thoughtfully presented to users so they can delight in all these amazing literary landmarks.

​

Link to latest version of Bookspot prototype is here.

Part 1: Empathize

My initial direction for this project was simply to create a travel app for dedicated readers. To increase empathy for this potential user, I created a hypothesis proto-persona, conducted five user interviews, and then created a more informed user persona.

Proto Persona: Julia Walker (link here)

User Interview Plan

• While I wanted to keep my mind very open about what my app would do, I knew my user interviews should focus on dedicated readers with disposable income. To that end, I asked my UX class and Facebook friends who might fit the following description:
• Dedicated readers…
• Who loved to travel…
• … and might travel to destinations they fell in love with via reading.

User Interview Script (Pt 1)

My script went through a few iterations. My original draft was too leading and missed some important insights. The version I landed on went on a path from warmup questions, to reading-focused, to travel-focused, to a combination of the two. I finished on an abstract note.

Warmup Questions:

1. What do you love about reading? 
2. What do you love about traveling? 
3. What do reading and traveling have in common for you?

​

Reading Habits:

4. What genres do you most enjoy reading?
5. How do you find your next book?
6. What format do you consume books in – audio, paperback, or digital? Why?
7. How often do you currently read? Do you wish you read more?
8. What gets in the way of reading more?

​

Travel Habits:

9. How do you choose travel destinations?
10. What have been your favorite destinations in the past? Why?
11. What is your favorite way to travel? Plain, train, car, etc?
12. How often did you travel before the pandemic? Do you wish you could travel more?
13. What gets in the way of traveling more?

​

User Interview Script (Pt 2)

Combination of the Two:

14. Do you tend to read (including e-books or audiobooks) while in transit? Tell me about that…
15. What about reading while you’re at your vacation destination?
16. If you could travel to any location you’ve read about, real or fantastical, where would it be? Why?
17. If you could follow in the footsteps of any character (on one of their happy days), who would it be? Why?
18. Do you find yourself gravitating towards books set in a certain place, or written by authors in a certain place? If so, what is that place and why do you love it?
19. When you are visiting a new place, do you ever read books set in the place to get excited about the trip? How easy or difficult is it for you to find such a book?
20. Have you ever traveled to a place you fell in love with through a book?
• If so: where did you go and how did you plan that trip?
• If not: why not? Are there IRL places in books you might like to visit? What makes it difficult to plan that trip?
21. Is there a country or city you associate with great works of literature? If so, have you ever traveled there / would you like to travel there?
22. Do you have a favorite library and/or bookstore abroad? Do you generally look for such literary establishments when you travel?
23. Have you ever gone to a book reading by an author you loved? Have you ever, or would you ever, travel to see an author you loved?
24. Have you ever, or would you ever, make a pilgrimage to see a site associated with an author (for example, Oscar Wilde’s tomb?)
25. When you’re traveling, would you like to meet up with other readers? Would you make this a priority?

​

Closing on an abstract note:

26. Lastly, a more abstract question. If I asked you to imagine your favorite book coming to life around you, what would that look like to you? Feel free to take a minute and answer in any way you’d like.

​

Link to my rough, first draft interview questions

​

Link to my final interview questions

​

Interview Transcripts

Of the eight people I interviewed, five potential people stood out as being potential users with diverse responses. Here they are, with names changed, and links to the transcripts of their interviews.

Click to read Natalie’s

Interview

Click to read Brenda’s

Interview

Click to read Michelle’s

Interview

Click to read Laura’s

Interview

Click to read Nick’s

Interview

Laura, 32

Engineer

Natalie, 38

Business Owner

Michelle, 28

Teacher

Nick, 41

Game technician

Brenda, 57

Scholar & Author

• Lives in Seattle, WA w no husband & one cat

• Prefers e-books

• Reads literary fiction

• Lives in Los Angeles, CA. Single mom of two

• Prefers audiobooks

• Reads science fiction and business books

• Lives in Oakland, CA with wife, two kids

• Prefers physical books

• Reads non-fiction only

​

​

​

​

​

​

​

​

• Lives in Berkeley, CA with housemates

• Prefers audiobooks

• Reads biographies, fiction & non-fiction

• Lives in Newark, NJ with wife and cat

• Likes all book formats

• Reads Japanese comics and literature & scifi

​

​

​

​

​

​

​

​

​

​

​

​

Interview notes: Dedicated readers love to be “transported” by books and learn new things.

“I like that I can inhabit other worlds and realities. And, you know, experience the world through other people's visions and mindsets.” — Laura

The stories that we tell influence our lives and our social structure and the way that we interact with each other in the world so much.” — Natalie

“I love learning. I've always loved learning, reading is such a great way to calm the mind and the spirit and learn something new, whether that's transporting yourself into a different story, in a different experience, separate from your own or learning about a study or learning about a new skill. It's just a great opportunity to transport your mind somewhere else....” — Michelle

Reading is what differentiates humans from the rest of the life on the planet.— Natalie

“I love reading as the opportunity to experience new things. Reading stuff that I could never have imagined my own and learn...” Brenda

Affinity Diagram: Gathering Data

Affinity Diagram sorted by insights

Empathy Map

User Persona

Interview Transcripts

Of the eight people I interviewed, five potential people stood out as being potential users with diverse responses. Here they are, with names changed, and links to the transcripts of their interviews.

Click to read Natalie’s

Interview

Click to read Brenda’s

Interview

Click to read Michelle’s

Interview

Click to read Laura’s

Interview

Click to read Nick’s

Interview

Laura, 32

Engineer

Natalie, 38

Business Owner

Michelle, 28

Teacher

Nick, 41

Game technician

Brenda, 57

Scholar & Author

• Lives in Seattle, WA w no husband & one cat

• Prefers e-books

• Reads literary fiction

• Lives in Los Angeles, CA. Single mom of two

• Prefers audiobooks

• Reads science fiction and business books

• Lives in Oakland, CA with wife, two kids

• Prefers physical books

• Reads non-fiction only

​

​

​

​

​

​

​

​

• Lives in Berkeley, CA with housemates

• Prefers audiobooks

• Reads biographies, fiction & non-fiction

• Lives in Newark, NJ with wife and cat

• Likes all book formats

• Reads Japanese comics and literature & scifi

​

​

​

​

​

​

​

​

​

​

​

​

Part 2: Define

Next, I worked on defining the problem that my app would solve. This included diving deeper into potential users with user insight statements, problem statements, and user stories.

User Insight Statement

Based on my interviews, dedicated readers need books to feel happy, transported, and to experience something new in the world — and apply that same mindset to traveling. Therefore, my user insight statement is:

Julia, a dedicated reader, wants to visit her favorite book settings while traveling in order to feel transported, curious, and joyful.

User / persona

User / persona needs

Surprising Insight

Problem Statement

Avid readers love books for many reasons: they’re curious to learn, have new experiences, and escape from day-to-day stress. Many would enjoy visiting real places featured in their beloved books. But while Yelp or Google Maps make it easy to search for bars, museums, or shops, there is no way to search for fictional landmarks. Traveling bookworms miss out on the joy of literature coming to life.

Spotted! Harry Potter was here

How could we…

People who are passionate about books deserve to enjoy literary settings when they travel. But there are so many choices for where to look for places, from blogs to Yelp to Google Maps. There’s so much information everywhere, but not a place to get all the right information at once. How could we create an end-to-end app for readers visiting a new city to explore its literary spots?

Part 3: Ideate

Once my problem and potential user was better defined, I ideated solutions by free-form brainstorming, prioritization, connecting to a value proposition, defining a customer segment, building a user scenario, creating a storyboard, and making a user journey map.

Brainstorm: all potential ideas (link here)

Brainstorm Ideas: I like, I wish, What if (link here)

Brainstorm Ideas: Prioritization Matrix (link here)

Prioritization Results

I decided to focus my app on the main value add: seeing fictional places in real life when traveling to a new city. Potentially fun but less relevant ideas were cut.

PRIORITIES:

​

• Users can see what books are included in each city
• User can filter by genre
• When user gets to their destination, they can see a map view of “book spots” — the real site book scenes are set in
• Can also see a “list mode” of what makes each spot special (and click for more info)
• Clear instructions to get to each spot
• Suggested “next” spots
• Optional push notification when near spots

​

NOT PRIORITIES:

​

• In this iteration of the app, will not include bookstores and libraries because that is already Yelp-able.
• Visiting sites associated with book authors
• Recommending books to other readers
• Leaving reviews or photos of book pins and uploading to social media (users can take selfies if they choose, no need for app to prompt)
• Illustrations of every single book scene or author photo
• Author readings and events

​

​

​

​

Value Proposition Canvas (link here)

Value Proposition & Customer Segment

User Scenario

Storyboard

User Journey Map (link here)

Competitor Analysis of Audible, Libby & Goodreads Onboarding Flow

Competitor Analysis of Audible, Libby & Goodreads Onboarding Flow (continued)

Part 4: Prototype

Once I was solid in my ideation, and had done a competitor analysis, I began to create prototypes. I started with paper, then got *way* too deep into design, and finally came back to lower fidelity mockups. Once my lofi mockups were ready, I began to play with higher fidelity designs again and integrate iOS elements.

Bookspot Onboarding User Flow v1 �(scale-able link here)

Bookspot Onboarding User Flow v2 �(scale-able link here)

When I began prototyping, I started with simple sketches.

When I began prototyping, I started with simple sketches.

I got lost in the weeds of graphic design too early in the process…

… coming up with 2 interesting visual options, but not making much headway on wireframing.

After seeing more student examples in class, I finally approached the low-fi wireframing in a better way. ��link

Link to lofi clickable Figma Prototype:

https://www.figma.com/proto/AKtDVMfhE1IR8XLx6CLsGU/Bookspot_v05?page-id=0%3A1&node-id=2%3A4&viewport=241%2C48%2C0.58&scaling=scale-down&starting-point-node-id=2%3A3

​

Part 5: Test

Through Zoom interviews, chatting with peers through Slack, and tirelessly working the app backwards and forwards, I iterated and refined my ideas. I also integrated more iOS design principles.

My interview script

Good afternoon! My name is Elizabeth and I’m here to share the app Bookspot with you. Bookspot is an app for avid readers to see real places from fiction when they travel. It’s still in the prototype stage so your feedback is so appreciated. 

​

As you go through the product, please think out loud. Please know that if something is unclear, that’s the product’s fault, not yours. Feel free to express problems! This will help me build a better app.

We’ll try to keep this session to 15 minutes. Does that work for you?

​

• Task One: Go to the “London” section of the app and find step-by-step navigation to the spot in London where Mrs. Dalloway started her walk.
• Task Two: Add “the spot where Harry Potter catches his train” to your saved spots. 
• Task Three: Filter so that you only see literary fiction books by female people of color written in the twenty first century.

​

​

Zoom recording links to interviews

Interview with Haeryn Kim

LINK

Interview with Samantha Samuelli

VIDEO LINK

Transcript link

Summary of Critical Interview Feedback

Prioritization of Changes

I revised my flow based on user tests.

Link Here

1

3

2

1. Added a tutorial to the beginning of the app because testers wanted more context

2. Added a “list view” toggle for the home page because some testers wanted a longer view of spots

3. Put the requests to provide location and sign up for an account deeper within the app, after users have a chance to play and explore.

What changed?

Link Here

Improving and iterating my main screen

As I got to know Apple’s Human Interface Design rules and guidelines, my app came more and more into shape. I was able to pare back some of the clutter and intrusive elements and focus on a refined, elegant design based on large images, a sage & parchment palette, tables, and clear directions to navigate.

Borrowing�from iOS

One thing that I really took from Apple’s iOS guides is to have a consistent look and feel throughout the app. I made a grid for my app and made sure to align things along it, and also to have the same shape and size of buttons for consistent purposes.

Link Here

Revised Prototype

My revised prototype reflected these changes.

​

They also became calmer / more elegant and peaceful in appearance, to suit my ideal user.

Parting Thoughts

• The biggest mistake I made while working on this was jumping into high fidelity too soon. I will always be someone who wants to make the design beautiful, but now I understand that can come later in the process — and in fact, it will be even more lovely if well-informed by low fidelity mockups and testing.
• I have a new love for the program Figma and want to prioritize going deep into it. I will also check out Adobe XD.
• Having classmates and instructional staff be able to offer feedback and critique was incredibly valuable. I will want to keep these connections, especially with other students, after the class is over. No more designing in a vacuum until it’s “perfect!”

​

​

Credits

The app is in prototype form and for educational purposes only. It was designed by Elizabeth Beier for University of California Berkeley’s UX/ UI Bootcamp course. Elizabeth Beier does not own the images of books, places, or authors herein. All design decisions were made by Elizabeth Beier, with the help of certain guides: ��Code borrowed to create the map that features throughout the map:�https://docs.mapbox.com/help/tutorials/add-points-pt-1/��I used a Figma community pack to make my screens look like iOS / Human Interface Design screens: https://www.figma.com/community/file/984106517828363349?preview=fullscreen��Selection of icons from Flexicons Community Pack�https://www.figma.com/community/file/875335594597349600��Website used to convert Google Map into spreadsheet with latitude and longitude points:�https://www.figma.com/exit?url=https%3A%2F%2Fwww.gpsvisualizer.com%2F��Website used to create a geojson file with map coordinates from that spreadsheet:�https://www.convertcsv.com/csv-to-geojson.htm

�All other design, research, UX and UI decisions, and ideas for this app were made by Elizabeth Beier, with feedback from her class and input from several user interviews.��Thank you for visiting Bookspot!

www.artplusstory.com

310.435.1577

Elizabeth@artplusstory.com

Thanks for reading!

​

Presentation by

Elizabeth Beier