User research, wireframing and prototyping
This is a conceptual project I designed to give everyone access to free books.
see it here→
After the client, Supermassic, found my portfolio by chance, I was sent an email to join the Supermassiv team as a freelance designer. I was happy to work on their interesting project! The client wishes to make music NFTs accessible to people who know all about NFTs , those who have no experience with them (like myself), and anyone in between.
I was given the task to design a "drop page" which is where music artists would share a link to their followers to follow and purchase their music NFT. I was given a list of goals and objectives, as well as their prior style guide which they wanted to simplify. I made several screens for the drop page which included a: screen with a launch countdown, purchase page, page to view current collectors and responsive versions of these screens for tablet and mobile.
After my designs were approved, a developer worked on the coding using my designs on Figma. I coordinated with the client and developer on any changes needed during the development process and refined my designs based on any coding issues that were brought up. My second task with Supermassiv was to create their landing page. I sent over wireframes based on their requirements and worked on final designs when those were approved. I sourced and edited illustrations on Adobe Illustrator and was able to transform their previous style into a cleaner, simpler aesthetic that they requested.
I will continue to add more details about this project soon.
In our ever-changing digital world books have taken a new form in our lives. Ebooks are incredibly popular due to their convenience, cost, and how simple they are to buy or borrow and then read. For book lovers or anyone wanting to learn something new, books can get expensive, this makes gaining resources and information difficult for low-income people to obtain. Libraries have always been a major institution in most cities, the location we all know to have free resources and information as long as you have a library card, but these resources are not always easy for people to obtain, whether they have health issues, scheduling issues, or simply like the convenience of taking these resources on a device remotely, an app and website to allow people to borrow ebooks for free ensures that everyone has access to books.
I conducted user research through a small survey to find out any issues people may have when trying to gain access to books.
People who cannot afford books, afford high speed internet or travel to a library need a way to download free books and be able to read them without consistent internet connectivity.
I created two user personas based on the findings above, encompassing the demographics, frustrations, and goals of the survey respondents. One persona is a young teen who finds difficulty having access to affordable books due to his home life and schedule. Another persona is an elderly woman who has issues accessing books in person due to her health. These are two very different people with similar goals which would help me focus on vastly different needs.
Creating a user flow was helpful to create a very simplified path on this potential app before making too many design decisions. The entire objective on this app is to make borrowing a book as simple as possible and straightforward for the user.
.jpeg)
This app includes a responsive website for multiple devices. I created a sitemap to create a full overview of usability. It helped to brainstorm which pages led to which, and how these pages would connect to complete the user goal: to borrow a book easily for free.
The user starts off at the home page, with an option to check current loans, browse new books, look at featured or recommended books, or to check on their user profile.
.jpeg)
Through user research, creating a persona, and creating a site map, I conducted a 15 minute sketching session to quickly produce design ideas which I then translated to Figma as a digital wireframe.
Findings
I conducted a small unmoderated usability studies with five participants. Two men and three women between the ages of 26-40. I gave them several tasks to complete and vocalize any thoughts and frustrations they may have.
Research questions
The tasks
The homepage has current loans at the top, the user can scroll through their current books to quickly read them. I also added a button to toggle between light and dark mode in an easy to see location, which would help with accessibility for users who have sensitivity to light. Users can look at recommended books or browse books of different categories further down on the app. Pages such as “Home, Loans, Seach, Favorites, and Profile” are always at a bar at the bottom, so users can always access important pages while browsing books. The app would potentially sync information whenever it is connected to wifi but would allow the user to browse as many books as data would reasonably allow. Users can download their borrowed books so they can read without consistent internet connection.
The high fidelity prototype allows the user to toggle between light and dark modes and leads the user through the book lending flow.
User avatar clicks to profile
Search bar for users who know what they want
Categories for users who have some idea of the type of item they want or want to browse.
Popular items featured for users who have no prior preference for items
Bottom bar contains home, browse, favorites and cart buttons.
Scroll bar with menu categories fixed to the top
Filter button for more
specific needs
Item card with name, image, price, and a short description
Favorite button
Item description with
more detailed information.
Large add to cart button with price
Allergen information with illustrated icons
Toggle between pickup or delivery
Shortened item summary with option to add quantities
Tip option has set amounts with an additional option to remove tip or input a custom amount
Recent payment option is saved with an arrow to toggle options to change payment method
Order status changes based on stage of preparation
Timer with estimated
time order will be ready
A QR code makes it quick and easy for bakery staff to locate a customer’s order
Button to notify bakery of customer’s arrival
Points for rewards would encourage customers to order again in the future
Address with a button to link
to phone’s default map app
User avatar clicks to profile
Search bar for users
looking for a specific book
Easy-to-find toggle between dark and light modes
Recommended books
based on previous loans
Bottom bar contains frequently used pages such as: Home, Search, Loans, Favorites and Profile
Current loans front and center
Share button to send book link to others and a bookmark to read the book later
Book cover image with title and author
Tabs with book description and reviews
Buttons to borrow or preview book
Number of available loans
Tags with book categories and genre
Loan expiration timer with oldest loans at the top
Renew button to start process of extending the loan time
Return button to end loan early
Navigation bar with relevant pages
Hero image to set the tone of the overall website experience.
Large buttons with the top CTA buttons users are assumed to use.
Articles for users browsing the website.
Featured story to show adopters how
successful the shelter has been at matching
humans to animals.
Bottom bar contains home, browse,
favorites and cart buttons.
%402x.png)
Filter buttons with typical pet finding characteristics
Pet listings have an image and major characteristics such as age, size, breed and activity level.
%20%E2%80%93%202.png)
Personality traits, key information, breed details.
Detailed information with pet's
background and history
Adoption process and pricing
Similar matches
It is incredibly useful to compare existing apps and getting to the root of why they are designed a certain way. How can I improve this app? What is it missing? How can I redesign it completely? There were some things I learned that I never knew about ebook lending, for example, just because it is a digital file does not mean there are unlimited ebooks available. Because of licensing, each book is treated as a physical copy in which the library can only lend a limited number. It encouraged me to reach out to my own library’s app because they truly are a great resource. This is an app I’d enjoy continuing to improve because there are so many resources and possibilities users can potentially enjoy, for example, how would I design an audiobook option in this case study? If I were to spend more time on this project I would design the eReader interface with the problem statement in mind.
I have a passion for design and I cannot wait for my next project. You can email me directly at mcheco.tung@gmail.com or find me on one of the sites below.
