UI/UX Design - Interaction Design - Full Stack Development
Timeline: 5 months (September - January)
Figma - Figjam - Procreate - Swift
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.
I started this project with a small team consisting of a product strategist and some help from a programmer. 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 in page details 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.
I made these Lo-Fi prototypes to plot out the design of the core navigation pages in the app. These would be the starting pages for each of the three main user flows. The focus was simplicity in allowing the user to get the necessary info while still having a hierarchy that emphasizes the important aspects without overwhelming them. The bottom bar is a nav bar to switch to the different core tabs of the app. The Book Feed, the Collection, and the Profile page.
Carrying on with the wireframe ideas, I decided to start with the feed page, which is ultimately the core of the app. I made a simple mock up where I could test the design of the like and dislike animations. 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. It was important that the animation felt snappy and fairly quick so users didn't get bored waiting for the next book. The Navbar, search icon, and hamburger for settings and preferences were also added.
Next, I fleshed out 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. Users can also access their profile through the navbar, where they can add a profile pic, About section, and some of the books they're currently reading among other things.
Now that I had some good first drafts, it was time to do some tests to get a better understanding of what was working and what wasn't. I surveyed about 8 people on this first round and identified a few major pain points.
The most glaring issue was a quite straightforward one: users couldn't tell which direction to swipe on the book feed to like a book vs. dislike it. In addition to that issue, there were a couple others:
- Users felt that it was also important to be able to see the reviews of a book that was displayed on the feed.
- Users appreciated the simplicity, but felt the app might start to look repetitive without more varied components.
To fix the swiping issue, I added an animation to show the like and dislike icons on the corresponding side of the page. This would play when the user first opens the book feed. It was very successful, resulting in only one person being unsure of which way to swipe compared to over half previously.
Furthering these improvements, I improved the visual contrast by creating a button component for individual genres with a blue background. These buttons made it clear that the user would be able to click on them to see more books of that genre while also creating more nuanced visuals. The genres could also now be put in horizontal scroll frames meaning books with many genres can still fit well into the template. Headers were given an underline to add more stability to the pages.
The last major pages I added were the chat group pages, where the user can talk to other readers about books they're reading. The user can access this page through books in their collection. The features me and the product strategist felt to be most important here were seeing how many active groups a book had and a simple system for joining chats. I also came up with the idea for an Auto Pair feature, which would match users to a group based on their preferences. I referenced existing messaging apps for the design so it would feel intuitive to pick up.
And as a fun little final touch, I created a startup animation to seamlessly flow into the login screen!
The image above shows most of the finished pages that I created in this project. In addition to what has been shown already, you can also see the start page, the settings and preferences pages, and the edit profile page. If you're interested in seeing the full scrollable pages, please click the button below to check out the prototype!
SEE HI-FI PROTOTYPEThe final designs saw an 18% increase in visual ratings along with a significant decrease in confusion among users who participated in tests. Users spent less time asking questions about how to operate the app and more time exploring all the features and pages. It took an average of about 6 seconds less for users to like or dislike their first book.
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 initial prototype work for this product is complete. Pathways to full development are being explored by the team. If I were to add to this design I would take these next steps:
- Create a sign up flow that guides the user on how to get started with features such as updating their profile, inputting their preferences, and liking their first book.
- Implement the pages for user reviews and forum posts.
- Add a favorites feature for the chat groups so users can quickly access favorited chats through a chat tab on the navbar. In this version, the time it takes to access a specific books chat group might make them not want to engage with it.
- Implement a mockup for users to change their preferences for books in the book feed.
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 line with what users typically tend 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.