Litly

• iOS Application
• Logo Design & Branding

• UX/UI Designer

• 4 weeks

• Sketch
• Concepts
• Airtable
• Miro
• InVision
• Affinity Designer

OBJECTIVE

Litly has started collecting data on popular books. Inspired by goodreads.com, Litly wants to give a more user-centric approach to their app, adding features and flows that make it delightful for people to use.

They want to use the full potential that a mobile app has, such as utilizing the camera to register books in a more automated way via optical character recognition (OCR), sending notifications to users to keep them engaged, tracking their progress on reads (potential gamification).

This is a speculative project.

Empathize

Goal: Understand the user’s needs and frustrations when using social cataloguing apps
Process: Market Research | Competitive Analysis | User Interviews

Market Research

I have been familiar with GoodReads, a competitor to Litly, and one of the biggest social media sites for book lovers on the internet, for several years now. Starting research, I only really knew about GoodReads, not any of the myriad of competitors that it has. This phase helped me learn about social cataloguing sites, or site that let you track things you’ve owned, watched, or otherwise consumed. I also learned about libraries, books, and the publishing industry, and how the digital age has changed them.

This research will give me a strong base for the rest of the project; since I understand the industry, I can design a better product for its users.

library 2.0

• Modernized library service that focuses on user-centered change & content creation & community
• Includes sites like GoodReads
• Increased flow of information from user to library
• OPAC, or Online Public Access Catalog are retooled library catalogues
• Use keywords, encourage recommendations

publishing

• From AAP (Association of American Publishers) $14.8 billion in sales in 2019, up from 14.5 billion in 2018 (1.8%
  increase)
• Total net revenue $25.82 billion
• In December 2019 - 10.4% were ebooks, 72.1% were physical books, 7.3% were audio books
• 657 million unit sales in the US
• 1.68 million books were self-published in 2018

digital publishing

• Some have a subscription model (Oyster/Scribd)
• More cost effective
• Smaller publishers are able to be more competitive
• Able to respond to changing market demand
• Increased range of books available
• $22.05 billion revenue (books, magazines & newspapers
• 100 million users

social cataloguing

• Web applications designed to catalog things owned or of interest to them
• Share catalogs & interact
• Enrich catalogues with cooperation/data analysis
• Other book related ones: GoodReads, Bookish, LibraryThing, ReedGeek, Litsy
• Sites include: IMDb, Letterboxd, MyAnimeList, BoardGameGeek, Last.fm, etc

goodreads

• Founded in December 2006, launched January 2007
• After 1 year had 650,000 members & 10,000,000 books added
• Acquired by Amazon in 2013
• 20 million readers July 2013
• Book discovery, content access (quizzes, trivia, previews), user interaction with authors & friends, reading challenges
• Integrated with Kindle
• Book data seeded with imports from publishers, ingram, amazon, worldcat and library of congress
• Librarians improve book information on the website

Competitive Analysis

After learning more about the market, I needed to learn more about the competitors, and what features their apps had. What makes them unique? What could make my product unique? What features were they missing, and could Litly fill any of those gaps?

The biggest competitors to Litly are GoodReads, LibraryThing and ReadGeek. These apps and websites are designed to be holistic social cataloguing sites for books. Bookly is an app that helps you read more, by gamifying reading and reminding you to read to your goal every day. Litsy is a social media site, more like instagram, where book lovers can post quotes and pictures, and share with their friends.

Provisional personas

After completing my secondary research, I made some provisional personas. Not only are they going to help me think about users, it lets me check my research when I move into the primary research phase. I can check these provisional personas against my notes from user testing, and see how accurate they were. This gives me a better idea of how well I understand my research, and what assumptions I may have to be aware of.

User interviews

When I was interviewing, I didn’t necessarily want people who had used GoodReads or another social cataloging service. I was more focused on learning about readers, their habits, and how they found new books to read. I wanted to know these experiences for people, regardless of how much they used an app.

I wanted to learn more about what people would want from an app, and what would convince them they needed an app. I was also curious to know if people were reading physical copies or using an eReader.

Number of Participants: 6
Gender Breakdown: 3 women, 1 man, 2 non-binary people
Ages: 20-32

Define

Goal: To define the user’s needs, goals, motivations and frustrations based on research findings
Process: Empathy Map | Persona

Empathy map

The empathy map collects data from the user research phase. I used Miro, a digital whiteboard, to create sticky notes and group them freely based on connections I saw between them. The empathy map ensures that my insights and needs for my persona are grounded in research from real people.

insights

• Users primarily get book recommendations from people they know or follow
• Existing apps cause frustration for users as they try to complete basic tasks
• Most people use GR for tracking what they and their friends are reading
• Users organize and group books in a variety of ways

NEEDS

• A place to easily learn people they trust’s opinions on certain books
• A social cataloguing app for books with a simple UX for most common tasks
• An easy way to stay on top of what everyone is reading
• A flexible organization system that allows for users to customize categories

PERSONA

After I came up with my insights and needs, focusing on the groupings with the largest number of different people, it was time to build the persona. This helps build my empathy as a designer, and gives me someone to design for. The persona is for the primary user of the app, and her goals and needs are paramount when coming up with solutions.

I created Elyise, a mid 20s HR rep who likes reading with her friends. She even started a book club so she would have people to read books with. The primary benefit she gets out of reading is quality time with her friends.

Ideate

Goal: Develop a logical information architecture and seamless user flows based on insights from research
Process: POV & HMW Questions | Brainstorming | Sitemap | Task Flow | User Flow

pov & Hmw questions

The POV and How Might We questions help frame the insights and needs to make more effective brainstorming. They focus the insights back onto the persona and build empathy. They helped create prompts that were used during the brainstorming phase.

I used the insights and needs from the affinity map, and turned them into point of view statements, reflecting Elyise's emotional life. Then, I was able to frame them into How Might We questions, giving me a starting point for brainstorming.

Brainstorming

After creating the framework for brainstorming, I needed to generate ideas. I wanted to try something different, so I used mindmaps in Miro to think about the relationships between different solutions. I started with the HMW question in the center, and branched various solutions off those central questions. I did two sprints of five minutes each per question to create the mind maps.

After creating the framework for brainstorming, I needed to generate ideas. I wanted to try something different, so I used mindmaps in Miro to think about the relationships between different solutions. I started with the HMW question in the center, and branched various solutions off those central questions. I did two sprints of five minutes each per question to create the mind maps.

Site map

Once I had finished brainstorming, I needed to start narrowing down the ideas to create a manageable app. I wanted to keep the focus social, while still offering a solid social cataloguing experience.

The sitemap shows how the information in the app will be laid out. I did this in terms of major features, instead of deep-diving into the full information architecture. I started with the screens that would be in the tab bar, first. The activity feed, library, adding books, search, and user profile. These were the core features of the app.

Task flow

The most important task for a social cataloging app is adding something to your library. I decided to focus on this task throughout the project. If I ensured that adding a book would be delightful and well thought out, it follows that people would be more likely to use the app, and share their books and experiences with friends.

Creating a task flow lets me think about the task in smaller steps and let me come up with a logical flow for users to go through as they completed the tasks. It also helps me think about the screens and actions users would need to follow, so I could be sure they had that ability when using the app.

User flow

The user flow takes one task and expanded it out into the numerous potential decision points a user could potentially make. I focused on adding a book to the library, and all of the different ways that could change, depending on the different factors.

Thinking about the decision points that needed to be made helps me design a more robust app that gives the user freedom. Of course, I can't perfectly predict how any given user might interact with the app, but this is an exercise in ensuring that multiple flows and paths are considered throughout the design process..

Click the image to view the full user flow.

Design

Goal: Implement solutions to user frustrations and pain points
Process: Product Road Map | Sketches | Mid-Fidelity Wireframes

product road map

The product roadmap takes all of the potential features and ranks them based on priority. This helps prevent feature creep and focuses the product design phase onto the most important features first.

The features in the "Must Have" section will be used to create the MVP, or minimum viable product, that will be showcased to stakeholders. The rest create a roadmap for the rest of the product's development.

sketches

The sketches were the first chance I had to really visualize how the implementation of my solutions would look. I used Concepts to sketch out rough layouts for major screens in the app.

I used Mobbin.com to look at existing iOS apps and get an idea of how other apps designed their screens. I used them as inspiration, as well as pulling from my past experience designing an additional feature for Apple Music, to design an app that fit with Apple's Human Resource guidelines.

I focused on sketching the screens I needed for my task flows, like the home screen, the add a book screen and the book scanning screen. I put a search bar on the top of most of the screens, because I wanted users to be able to search for a book from whatever screen they were on, without needing to tap. I made the Add Book button on the tab bar bigger, both to encourage people to add books, and. I also added some rough sketches for

Click the image below to see all of the sketches.

mid fidelity wireframes

These wireframes were built using Sketch. I used Apple’s UI Library as a base, to ensure my symbols were consistent with Apple’s Human Interface guidelines. It was the first time I was designing an iOS app from scratch, and not just copying Apple’s existing framework, so I wanted to set myself up for success.

For the most part, I stuck with simple screens and simple shapes for my wireframes, so I could focus on the visual hierarchy of the app and how the screens linked together. Using an existing library for most assets made designing these wireframes quick and simple.

Prototype & TEST

Goal: Bring the design into an interactive state  to get feedback from users and improve the design.
Process: High-Fidelity Wireframes | Invision Prototype

mid fidelity prototype

The mid fidelity prototype was designed using InVision. I linked the screens I had designed together to create a working prototype that would be used for testing. I wanted to see how users would interact with the app

Because this was an app I was designing from scratch, I planned on testing the mid fidelity wireframes, so I wouldn't get too stuck in the design and feel unable to make changes. It also would make any changes easier to make, because there were less things to adjust.

The mid fidelity prototype may be viewed here.

user testing

Because of social distancing guidelines when I was creating this project, I did all my User Testing digitally.

I used maze.design to create an easily shareable prototype that would record information about the users clicks and behaviors, and did remote user testing with some friends from online communities. I had them share their screen with me over a voice call as I took notes and conducted a Think Aloud test. It was a little different, but let me still get user testing completed.

Number of Participants: 5 participants
Gender Breakdown: 2 non-binary people, 3 women
Ages: 22-25

task 1

Use scanner to search for a book

• Completion Rate: 100%
• Error Rate: 100%

task 2

Add the book to your library

• Completion Rate: 100%
• Error Rate: 33%

task 3

Add additional information to the entry

• Completion Rate: 100%
• Error Rate: 80%

affinity map

The affinity map is pretty much the same as the empathy map, just with user testing. I followed the same procedure of transferring my notes to post-its and grouping them based on similarities. This allowed me to draw further insights and come up with design recommendations based on the errors users were making and the frustrations they had.

I was surprised at how many people were unable to find the book scanning feature at first. Then, I realized my wording for the question was a bit leading--”search for a book” meant that people were going to think about searching, and try to use the search feature. While that was a failure on my part, I did think it was a good idea to let people search for a book using the barcode, so I allowed that feature as well.

insights

• Most people were unsure where the notification settings were
• Most users were unsure where to find the settings menu

design recommendations

• Make notifications more obvious by changing the language of the setting screen
• Give another path to edit playlist settings, perhaps during playlist creation

Mood Board

The mood board starts to collect visual examples. I wanted to create a design that was very fresh and modern, fitting with the top design trends right now. I focused on sans-serif fonts, cool color palettes, and a rounded, simple logo with bold shapes, perfect for an app icon.

I chose to bring in various product images to ensure that the general stylings of the app worked with a variety of book covers.

Style tile

The style tile helped me think about all the design elements that were going into the project. This was the start of the decision making process. I started by designing my logo, focusing on the image of an open book. I used shadows and gradients to give it a subtle depth.

I chose to go with black and white for the base colors, as that was common with many of the iOS apps that I was seeing online. I chose a strong, bright indigo for the brand color. I wanted something that was more unique, while still pulling the cool and modern vibes from blue images.

I wanted a clean look for the typography, so I chose to pick one versatile font for the whole project. I used Gilroy, a modern sans-serif, that has geometric elements. Not only is it a popular font, but I felt it had a very reliable look to it, while still having a more unique vibe than other sans serifs, thanks to the rounded bowls.

I loved adding a visual element to this project, after so long in black and white. The app really started to come to life during this phase.

Click the image below to view the full style tile.

Prototype Revisions

For the revisions, I took my design suggestions that I created with the affinity map and used them to make adjustments to the design. I added an arrow to the “Add to Library” button to make it more clear that there were additional options for the user. These small tweaks should make those actions more clear to users when they're in the app.

High Fidelity Wireframes

Once the revisions were complete, I created high fidelity wireframes. Essentially, I took the style tile and used those decisions to update my mid-fidelity wireframes. I changed the fonts to Gilroy and adjusted the sizing.

Adding color, images, and more information really transformed the app into something that felt real and polished.

high fidelity prototype

All of the high fidelity prototype screens came together in a high fidelity prototype, featuring the task flows that I had planned. This created an MVP for the product that could be shown to stakeholders and investors.

The high fidelity prototype was simple to link together, because I didn't focus too much on microinteractions or animations when I was designing, and I had already linked screens together once. This prototype was mostly to get a visual of the finalized app in a partially workable state.

The final high fidelity prototype may be viewed here.

UI KIT

The UI Kit coordinated all of the individual elements from my prototype into one document. This includes typography, symbols, buttons, states, list items and headings. This document acts as a source of truth for the project, so other designers and developers know what each element is meant to look like.

I used the symbols and text styles that I had made in my Sketch document as the base for this document, labelling each clearly.

Click the image to view the full UI kit.

CONCLUSION

REFLECTION

I had done end-to-end website design, but this was the first time working with an app from start to finish. I had a little bit of difficulty at first transitioning over my language from pages to screens, clicks to taps, but I got the hang of it. It was a different experience thinking about mobile decisions first, how the user would use the application on their phone, instead of on the computer. I made use of sites like Mobbin and Apple Human Interface guidelines to ensure I was staying within established iOS patterns.

The most difficult part of this project for me was the user testing. I didn’t know how to word some of the questions in a way that wasn’t leading. It showed in my data, but also revealed a flaw in my design. Learning from my own mistakes and shortcomings, and recognizing how that impacted the data I was collecting was very eye opening for me, because I hadn’t had many issues with user testing previously

It was also interesting getting a taste for remote work from home, considering I was under stay-at-home orders for most of this project. It helped me be more flexible and responsive in my approaches to solving problems.

NEXT STEPS

With this finished prototype, the next steps would be returning to task and user flows, to continue to build out features of the app, like editing bookshelves, user profiles, and other social features. I then would prototype and build them out much like this first step, slowly building out the app to have complete functionality.