uponatimemock_edited.jpg

Upon A Time

An app that features modern popular novels while giving the option for users to purchase ebooks to read online.

App inspired by Webtoon.

UI/UX Prototype

PROBLEM

Books are known to be heavy and spacious when it comes to traveling or just simply carrying them around. Novels are also inconvenient when it comes to accessibility as they are only found in libraries or book stores where you can buy them. As society evolves with electronics, people are gradually drifting away from reading novels as a hobby. There are countless different novels enjoyed around the world which would make choosing a novel rather difficult. 

Roles

Research, Ideation, UI/UX, Visuals, Prototyping,

User Testing

Tools

Figma, Illustrator,

Photoshop

Duration

Nov - Dec 2019

4 Weeks

DESIGN CHALLENGE

How do we make novels more accessible to for book lovers while growing the amount of novel readers around the world?

SOLUTION

Upon A Time is a convenient novel app designed for teens and young adults who are into reading modern popular novels. Since it is an app, it automatically makes it extremely accessible to people who want to read without the need of going to the library or when it comes to carrying heavy books everywhere you go. Upon A Time also provides an interface that is friendly to the eye as it allows users to select an interface that would help display the typography however they like. There are also special features that help users interact with each other where they can have fan discussions, book ratings, or just comments about the novel in general. By giving the options of communication within the app this could potentially grow more users and readers.

uponatime%20white_edited.jpg

KEY FEATURES

ONBOARDING

Upon A Time offers a simple and aesthetically pleasing user experience for first-time users. The onboarding process is a smooth and friendly process for first-time users to select their preferences. This allows the app to create the best dashboard display and preferences for first-time users.

NAVIGATION

The home page features the user's books and recommendations. The navigation includes the dashboard, featured page, search, library, and settings.

READING A STORY

Users are able to select their desired novels to read. Once selected, the application will showcase novel summaries along with the chapters where users can interact to start reading. Users are able to download, share, or add novels to their libraries.

DISCUSSIONS

While Upon A Time enables users to easily communicate within the community. Discussion sections enable users to see the top and recent comments. Fan discussion are also present to allow a friendly and enjoyable experience for users.

SETTINGS

Simple and clear settings allow users to enable or disable features. Users can change the text size and display features to their comfort. User profiles can also be edited easily.

RESEARCH & DESIGN PROCESS

COMPETITIVE RESEARCH

I started off with competitive research. The top ebook apps were Amazon kindle, Nook, Google play books, Wattpad, and Goodreads. Although there were many novel apps, most of them are not geared towards a specific audience. Most of the apps would include a diversity of books, giving their users the freedom of getting their hands on any sort of book. My competitors however, do not focus on displaying and focusing on preferences when it comes to books. This leaves room for opportunities where I can focus on the fanbases and the subject of modern & popular novels that are enjoyed by many people.

PACT ANALYSIS

PEOPLE

Teens & Adults

ACTIVITIES

The purpose of this app is to help users navigate through preferences to help readers find which books they will most likely enjoy reading. This app also opens room for fan discussions, which opens opportunities to draw more people into the app.

CONTEXTS

The app is accessible anywhere, anytime. It is meant for readers to access novels conveniently without having to go to the library and carry heavy books around.

TECHNOLOGIES

The tech that will be used to run this mobile application would be phones, tablets, and ipads.

KEY INSIGHTS
  • Most competitors don't offer a specific age group

  • Most competitors don't focus on the reader's preferences

  • Most competitors don't focus on displaying popular reads

USER PERSONA
personas (new)2.png
Flow Chart.png
IDEALIZATION/FLOWCHART

After researching, I started planning the possible user interfaces and interactions to showcase a user-friendly novel app. 

WIREFRAME & PROTOTYPING

After creating the flowchart, I began mapping out the user scenarios. I used Figma to design visual prompts. I also played around with prototyping during this stage since it was my first time using Figma / Prototyping.

Screen Shot 2020-08-10 at 2.41.55 AM.png
USER TESTING RESULTS (fixed)

Fix position the finish (for browse) 

  • Users were confused about where to submit their favourite genres

  • Change the button type for browse

  • Make the buttons more clear that they are selected rather than just a dark grey as a selected feature

  • When selecting genres the box shouldn’t be darker / creates confusion

  • Rate pop up animation is too quick

Comment section 

  • Comments shouldn’t be medium sized and should be thinner to make it more distinct from the usernames

Bugs

  • Cancel button on the share link pop up wasn’t clickable

webbookslogo.png
LOGO DESIGN

The logo for Upon A Time is a book. Since the app focuses on novels I took in that the design should be magical to fit in with the fantasy genre. The colour scheme i used for the app is mainly teal and baby blue.

ICONS

These are the icons I've used for the navigation bar. I kept the green to blue gradient colour scheme throughout

the icons.

settings.png
open-book.png
hearticon.png
fire.png
magnifier.png
Colour Pallet
Main Gradients

#8ED8EC

#84FAB0

Typography

#000000

ROBOTO BOLD

ROBOTO LIGHT

App Name
Screen Shot 2020-08-10 at 6.02.32 PM.png

REFLECTION

REFLECTION

Despite this being my first case study regarding prototyping, I had a lot of fun designing an app sparked by my love for novels. I found myself falling in love with reading from time to time, yet the one thing that stopped me from reading as much would be not knowing which book I should read next. I also find myself not having enough time or motivation to visit libraries due to school and work. 

The popular app named webtoons has greatly inspired my designs and ideas for this case study. I really loved Webtoon's application due to the organization and how the user-interface showcased the popular or trending material. I also found the community and comment functions a beautiful way for book & story lovers to connect.

 

After this case study, I fell in love with user-interface design. Aside from prototyping being super fun, I found myself enjoying the research and development process as well. I hope that one day there could be a beautiful and aesthetically pleasing app for book lovers who love to read novels one day!