UI/UX Design - Interaction Design - Full Stack Development
SEE HI-FI PROTOTYPEOver time, it’s easy for readers to get stuck in a bubble and feel fatigued at a lack of new exciting books. People want a simple way to explore new books and have a community to discuss them with.
Create an intuitive, easily understandable app prototype that resonates well thematically with the visual motifs and iconography of books.
So far, I have created this project entirely independently with some advice from professors and mentors. My work consisted of user research, design through Figma, and prototype implementation through Swift for iOS.
Paper Matche is an app that presents a feed of books based on user preferences. Users can swipe right to add the book to their collection where they can track their page progress, buy the book online, read reviews, and see discussion posts about the book.
1. Analyze current software associated with books and popular platforms such as GoodReads along with other “swiping feed” UIs such as Tinder or Hinge.
2. Conduct interviews to see what functionality is important to readers for a book-related app.
3. Use this information to create an appealing app prototype that thematically fits with the book theme.
Through my analysis, I found that other competitors did offer book recommendations; however, it was usually as a secondary or tertiary feature to their main purpose. Paper Matche could stand out by making book recommendations for users its priority and focusing the UI with that goal. Additionally, it lends itself well to direct community engagement through group chats instead of the broad forum-based communication of GoodReads.
The User Persona reveals that the app benefits most when it engages with the user's passion. Readers like Elaine long to be connected with the world of books without being overwhelmed. On other platforms, it can be easy to struggle with information overload, so this app can capitalize on its format by only showing necessary information and allowing the user to look further for the rest if they are interested.
Strong theming can also make the app feel like a unique platform targeted specifically towards their hobby. If the app resembles apps for other platforms that they use for tasks such as school readings or planning, they might feel burdened instead of excited.
Books is such a wide topic that it felt that the logo could go any number of directions. To solve this issue, I broke the project down into 3 main iconographic ideas.
- The book, represented through a physical book or a bookmark
- The heart or check mark, representing the idea of “liking” a book.
- Paper Mache, tying into the play on words in the name and being represented through textures or shapes.
I focused on two different paths for my initial two sketches: The motion of the swipe, and the multiplicity of the books. Upon analysis, I felt that depicting multiple books would lend itself too easily to a cluttered, distracting logo. In my next iteration, I decided to focus on simplifying the swipe motion logo to something more adaptable.
Those developments led me to a sketch of a heart with a bookmark on it, allowing the idea of a book being liked to be conveyed. However, the rounded shapes of the heart felt a bit out of place, and Paper Mache still was not incorporated.
When I brought the idea to illustrator, I had the idea to instead use straight, rigid lines, creating the feeling of folded paper. This design was inobtrusive while still feeling in place with the theming of the app.
Finally, various versions of the logo were created to aid in the ease of its implementation
To plan my feature implementation, I mapped out the core pages of the app and where they would be making key decisions. From the map, we can see that their 2 biggest regularly reoccurring decisions are to like or dislike a book and to edit their profile or leave it as is. Additionally, the different views have been grouped into hierarchies, making it easy to divide them into neat tabs. The book swiping feed, book collection, and profile pages can all be accessible through tabs at the bottom of the screen. They can then lead to their necessary child views. The settings and preferences pages, on the other hand, can be accessed from anywhere in the app past the login through a hamburger menu.
Freeman was chosen as a heading font due to its readability and resemblance to the strong and somewhat condensed fonts often used in literature and Poetry. Garamond was chosen as a tribute to its common usage as the font of choice in countless books. Books tend to use fonts with serifs for their body, so it felt right thematically for the app. Book pages tend to be a light brown/ cream color instead of pure white, which influenced the light brown background color selected. The dark brown would then serve as a nice compliment to that, with the bonus of many classical books using dark brown for their covers. The dark blue color was chosen to add a subtle pop to the text due to its contrast with the warm tones.
To start, I referenced apps like Hinge and Tinder to see what successful layouts in this design concept look like. Based on the User Research, I knew people would value a level of simplicity that allows the book to be the primary focus. I also knew that users would want an experience that immerses them in the world of books and still manages to feel unique despite its simplicity. In my early sketches, I imagined an app that takes on a layout similar to that of a book, with small headers and body paragraphs that feel like mini chapters.
Carrying on with the wireframe ideas, I decided to start with the feed page, which is ultimately the core of the app. To make it feel inviting, like a real book, I minimized the amount of unnecessary lines and clutter on the page. The book’s cover would be displayed, followed by its title and author, followed by “mini chapters” of the genre(s), description, and an about the author section. I followed this up by creating the book collection page. In here, the user's liked books are displayed with the user being able to scroll though and click on books in their collection. The books are then displayed with their image, their title, their author, a page progress tracker, and buttons to buy the book or see chat groups, discussion posts, or reviews. A simple bottom navbar was created, using icons I created along with one from a figma plugin.
Users responded well to the design and the simplicity; however, some issues were revealed in the testing. - Users did not know which way to swipe in order to like without me telling them.- Users felt that it was also important to be able to see the reviews of a book that was displayed on the feed.- It was unclear to some users what happened after they liked the book.
To fix these issues, I added to the graphics to clarify what was happening and make the app more intuitive.
- When the book feed is first opened, the like and dislike icons appeared on the right and left of the screen for a few seconds before fading away, allowing them to see which direction leads to which outcome.
- A review button was added to the bottom of the book page. This allows the user to still get an initial impression of the book free from reviews but still ultimately check the reviews if they choose to.
- When the user likes a book, an animation was added showing the book going down into their collection additionally, a red circle was added to the bookmark icon to show that there was something new.
Following the core page, the additionally necessary functionality was added:
- Profile and Edit Profile:
• In the interest of building community, users can share things about themself on their profile, including their favorite genres, a short description, the book they’re currently reading, an their favorite books.
• An edit page is easily accessed through a tab at the top of the screen where the user can input their information.
- Hamburger Overlay:
• An overlay was created so the user can access 3 important options: Settings, Preferences, and Sign Out
• These options were put in a hamburger to avoid additional clutter in the navbar while still allowing these pages to be accessible from most places in the app.
- Settings:
• Here, the user can change settings standard for apps like these such as their account information, the app’s theme, and Notification Settings.
• Clicking on a tab would lead them to a page with specific settings for that group.
- Preferences:
• Here, the user can update their preferences on what books should be shown to them. The factors for use based on user feedback at the moment are Genres, Release year, Page Count, and Languages.
- Search:
• It made sense to add a search feature as well, this way users who found a book through something outside of the app can still add it to their library for the sake of tracking their page progress, posting/ reading reviews or discussion posts, and displaying it on their profile.
• The search is accessible through an icon on the top left of the screen on the feed page.
I created an initial, functionality/ back-end focused prototype to demonstrate an idea of the implementation of this app. This first version prioritized the coding of the features, with plans for the future versions to refine the design to match the figma prototypes. The app prototype was made for iOS phones, the tools used are as follows:
- Programming Language: Swift by Apple. The views are a mix of primarily SwiftUI with some UIkit.
- Google Books API: In order to display book information, I used Google Books API to fetch an array of books as JSON objects based on query terms. I then converted these objects into Swift objects for use in my views.
- FirebaseAuth: The app has fully functional authentication where users can sign up with their email and password and have their data saved on the cloud based on their Auth Key.
- FirebaseFirestore: This is the database where I store the user’s info and also all of the books that are held in user’s collections.
- FirebaseStorage: Used to store important assets such as User Profiles.
- Apple Frameworks: Frameworks such as Apple Photos and Apple messages were used to create Views where users could upload photos from their device as profile pictures or share books with their contacts.
- The feedback on the Figma prototype has been very positive; testers find it intuitive and easy to understand along with having excitement for the idea.
- The feature implementation proved that the app's main functionality is viable and implementable. Which is a great sign for its future.
- As for development, pathways to completion are currently being explored.
Clarify Clarify Clarify!
- As the designer of a product, it can be easy to take features for granted as easy to understand. This issue comes from a mix of both our personal experience that informed us to make the decisions we did along with the fact that we made those decisions, so we know the thought process behind them. However, with apps like this one, it is usually better to make things overly clear than the alternative.
Subtlety is all the difference!
- A large part of what made this project so enjoyable to work on was the theme. The layout was designed to be simple and still fall in linewith what users typically tendd to expect from a modern mobile app, but the small, subtle changes I made added a world of difference to the concept. This app was a good example of how small changes in the right places are just as valid in building unique UIs.