SimplyE UX + UI overhaul
Introducing communities and enhancing e-reading experience for an end-to-end NYPL app
Role
UX Research
UX Design
UI Design
Art Direction
Prototyping
Animation
Tools
Figma
Adobe Photoshop
Miro
Duration
6 weeks
Summer 2021
Team
Anastasiia Fortune
Leah Cuker
Merav Kaikov
Oveview
SimplyE is a library e-reader app that lets patrons browse, borrow, read and listen to books from any local public library collection. During the pandemic, when their biggest partner, New York Public Library, closed its doors due to restrictions, the patrons switched to the e-library alternative, many for the first time.
Though the app offers important and valuable service to communities, its user experience is basic, dated and subpar to NYPL’s service reputation.
Challenges
01
E-reading demands using several platforms for those looking to manage reading goals, keep notes and book lists, track and share progress
02
Lack of established process for discovering new books is a deterring factor for infrequent readers
03
Unfriendly and inaccessible experience leaves user cases on the table, not accommodating parents with young children
Objectives
01
Implement a toolkit to bring convenience and streamline the reading and managing process
02
Reduce friction with an easy-to-follow and familiar process to get reliable book recommendations
03
Make e-reading more entertaining and interactive to encourage families to utilize the app
Discovery
Desk Research
Our team kicked off the project by conducting extensive research to understand the current trends in library use, audiences and their key problems.
Heuristic Evaluation
Analyzing the current app helped my team identify strong points and drawbacks in the service it provides. Overall, while the SImplyE app does let patrons borrow and reserve audio- and e-books like it promises, its functionality and usability is poor. Basic and dated UI and UX design falls short of the expectations from the second largest public library in the United States.
Target Segmentation & Empathy Interviews
To narrow down unique habits, pain points, and goals of readers, we segmented them into 3 categories (based on demographic, behavioral and psychographic factors) and conducted 13 empathy interviews.
Leah
Working class NYC parents of young children (ages 2-10) who desire affordable, convenient, and educational content for their kids.
Anastasiia
Well-educated women in their 20-30s who are book enthusiasts and read across digital and print formats for pleasure and self-improvement.
Merav
Males ages 30-49 with a college degree, who pursue professional learning activities, do career goals oriented reading and have been visiting the library at least once a year.
Affinity Map
Having a workshop to organize our data with Affinity Mapping helped us highlights commonalities in readers’ experiences.
Readers are generally interested in what their friends and network are reading.
People are busy and want the process of finding and picking a new book to be easier and quicker.
For the majority of people, there’re friction points to reading more often, like lack of motivation, encouragement and confusing digital experiences.
Aggregated Personas
We developed qualitative personas that incapsulated research findings on the target audiences we decided to focus on.
%201.png)
Journey Maps
Understanding our personas’ emotions, mindsets and actions before, during and after their interaction with the product helped us better empathize and understand the people we’re designing for.
Insight Statements
We developed Insight statements and Jobs to be Done for each of the personas to help us narrow down use cases and understand the nuances of the problems.
JTBD
Sadie: When I need to entertain my daughter, I want to find a book from a trusted source, with kid-friendly capabilities, so I can go about my business with the confidence that my child is engaged and reading content that I approve of.
Stephanie: When I am reading on my phone, I want to make notes easily without having to go from app to app, so I can see what my notes refer to in the book when I review them later.
Thomas: When I am looking for my next reading material, I want to find it based on recommendations I trust in a quick and easy way, so I can start reading my next book as soon as possible without wasting too much time finding it.
Define
HMW Questions & Ideation
To brainstorm solutions our team focused on generating How Might We questions that targeted each of the personas.
MVP
Filtering ideas we brainstormed to define MVP features we used Impact Effort Matrix to outline those that had the most potential gains for target audiences and would take least resources to implement.
App Map Overhaul
Newly proposed features combined with our heuristic evaluation findings required us to restructure the original Information Architecture of the app to be more user-friendly and streamlined.
Design
Stephanie's Task Flows
Task 1: Browse for book recommendations
Feed
Browse Catalog
You
Friends’ Recommendations
Book PDP
Stephanie scrolls through Feed and Browse page to look for library featured books and interesting books her friends are reading. She checks Recommendations tab in her profile to find a book her colleague recommended to her. She borrows the book and starts reading it.
Feed
Reading activity posts are uniformly formatted to help people focus on discovering new books, reviews and reading activity of their friends and network.
Reading activity posts show 4 statuses:
Started reading
Finished
Reviewed
Received an award
Patron’s activity visibility is offline by default and is configured in Account Settings to make sure patrons only share information they’re comfortable with.
“Everybody” tab in the top left includes randomized online public reading activity of NYPL members.
Browse Catalog
A list of book collections curated by the library helps readers navigate a broad spectrum of titles.
The top search bar informs patrons on key searching features.
Newest and seasonal collections appear as illustrated cards in a top scrolling section and lead to pages dedicated to the respective featured collections.
Books are available in two formats, e-books and audiobooks. Since readers feel strongly one way or another towards one book format, we separated the collections into two tabs to reduce user confusion between these options.
You
Top three tabs break down a long list of features into easily scannable and digestible.
Goal Progress gives an actionable overview and is always accessible.
Patron’s profile information is limited to Books read, Reviews, Followers & Following to nip social media anxiety in the bud and shift focus to reading and sharing books.
Dashboard cards include important messages about book expiration, and reader’s progress with goals and challenges.
Book Details
Soft background highlight is automatically generated based on book cover color and gives an elevated feel to the public service app.
Key book facts like Rating, Time to read the book, Duration of Availability, and the Language saves time and helps readers to make decisions.
Genres and topics icons come first in the Description tab to help readers make decisions.
Reviews section highlights reviewed left by reader’s network.
More books by the authors are suggested to increase discoverability.
Friendly and encouraging success modal message shows reader’s options and “nudges” to start reading immediately.
Task 2: Start reading & Make notes
My Books
e-Reader
Adjust Font Size
Highlight Text
Write a Note
Review Notes
Stephanie jumps to the first chapter of the book and customizes font size in appearance settings. She highlights a sentence and types in a note for herself.
My Books
Books are separated into currently borrowed books and reserved, or “Waiting for availability”. Our first round of User Testing showed that infrequent library goers are confused about “Borrowed” and “Reserved” books.
Visual progress bar combined with percentage number help readers stay on top of reading.
Intuitive tagging system uses color to notify the reader about upcoming return dates.
Reader’s book lists include 2 default “shelves”: Saved for later and Previously read.
e-Reader
e-Reader UI follows current conventions and when tapped on the screen center/top or bottom shows:
reading progress
convenient navigation to next/previous chapters
book title in the top and current chapter title in bottom navigation bars
features to search by a phrase, customize e-reader appearance, create a bookmark and see table of contents
Appearance settings are user-friendly for readers of all ages and levels. They’re broken down into three short categories: color and brightness, font size and type, and scrolling settings.
By long-pressing a text excerpt, the reader can highlight, write a note, translate text, share the selection to the feed as a quote, as well as share to external social media, or delete a previously made note.
My Notes
Reader’s notes can be viewed as a chronological list of all notes, or as a list of books. For convenience, notes can be searched by words, book titles or authors.
Highlighted text from the book shows what the written note refers to.
Recognition over Recall heuristic is applied by showing the book cover next to its title.
If the note was made in the book that is still borrowed, the reader can jump to the book page it refers to.
Testing & Iteration
After conducting the First Round of user testing with low-to-mid-fidelity prototypes our team shared and discussed insights and feedback.
A lot of confusion people faced had to do with the ambiguity of low-fidelity prototypes, which I tackled in my personal high-fidelity designs. For example, several readers were confused about logging new books for challenges they were supposedly taking part in. Most of them also felt like taking reading challenges together with friends, which is the feature we decided to add after two rounds of iteration and testing.
Some information architecture had to be restructured taking in the feedback our testers shared. For example, most readers commented they'd expect to see Notes they've made in their profile page ("You"), not in "My Books" page.
Another thing that I revised was the type of content on "Feed" page (which was also renamed from "Home" that people felt was too ambiguous and inconsistent with the content). During our testing sessions about 80% of readers commented on how overwhelming the Feed page was for them — in particular, they didn't like a large variety of post types and book suggestions from the app itself (was later moved to "You" page). To avoid information overload and streamline new book discovery process, I reduced the number of reading activity posts and simplified Suggested readers section by displaying those readers' reviewed & favorite books to give people a better idea of what they may expect.
Design System
Takeaways
This project was my first remote team work experience, and it taught me two things: 1) always over-communicate (to make sure everyone is on the same page and is ready to move on to the next stage), — and 2) trust the process (even when you're panicking about rapidly approaching deadlines and little work that's been done). I've found that when working in a team, you have to trust and believe in your teammates. It's just as important as making sure you pull your weight and deliver your bit.
With more time on this project my team wanted to conduct more user testing on iterated prototypes to collect more precise feedback and make changes where they're needed. What's more I would personally consider spending more time developing a robust visual language for NYPL, including fine tuning color scheme, typography and badging systems.
Additionally, spending time to learn about constraints and possible opportunities of merging several NYPL apps into one all-inclusive service would be instrumental.
Overall, this project was a great challenge for me to wear several hats and to see the project through from initial desk research stages all the way to final high-fidelity designs and user testing workshops.
