Case Study: Orbit App

The Problem:

Taken from a prompt I found while looking for design exercises, this one stood out to me because of my love for books. Just as the prompt points out, audiobooks are on the rise, which is disheartening for a person who loves the physicality, feel, and personalization of books.

Exercise Prompt:

Audiobooks and podcasting are the fastest growing audio segments on mobile. Users who listen to audiobooks don’t enjoy the benefits of dog-earing pages, highlighting excerpts or leaving notes on their favorite pages… they also lose the nostalgic aspects of owning a book and watching it age. This leaves a lot to be desired from the audio experience on mobile.

Design an Audiobook or Podcasting mobile app that is highly personal, highly interactive and with the ability to bring even more utility to the user than a book ever could.

Constraint: All suggested technologies need to exist, or have the ability to realistically exist within the next 6 months.

https://blog.prototypr.io/product-design-exercises-we-use-at-wework-interviews-2ee1f5a57319

 

The Solution:

The Orbit App is a way to keep the best of both worlds by keeping with the trend of rising technology, multi-tasking while listening and doing other things such as drawing or cooking, and having the ability to personalize each book with highlights and note-taking.

I chose the name Orbit because, as readers and listeners, we are transported to a different world (planet) and discover (orbit) new adventures and characters with each word.

The User:

The user would be any avid reader and lover of books that are new to experiencing audiobooks or old who need a more personalized audiobook app.

Taking inspiration from other audiobook apps from the app store, Dribbble, and Product Hunt, I focused on a clean and clear utilization for the app. Other apps lacked the personalization aspect of reading a book such as writing notes on the margin or highlighting favorite quotes, so I chose to include this in the app as well.

The Goals:

  • Highly Personalized
  • Highly Interactive
  • More Utility than an Book

I have included image of my preliminary notes when starting the project. I had to state the problem, solution, user, and the thoughts behind the user experience design in order to understand the constraints and focus on the efficiency of the app. I wanted to create as few screens as possible for easy use without compromising the important needs of the user. I proceeded to sketch out the wireframes and ideas behind the UX to organize my thoughts. Using Sketch, I created the wireframes in grayscale to ensure the usability of the app. From the wireframes, I was able to map out the flow of the app as well.

The UI Design:

For all users, the goal of the UI was to promote confidence, trust, and discovery. The color “blue” is used as a primary color throughout the app in order to convey the welcome of trust and communication between the audiobook and the user. The color also matches well with all other colors, which is an important aspect since all books have different colors and images as the cover. Therefore, I did not use a secondary color. I chose Raleway as the font for this app as it shows professionalism and literacy with a more modern look. Allowing each book to stand out on the shelf, white was used for the background for minimal distraction. The bookmark symbol lets the user know which books and where they are currently in the audiobook. The carousel layout of the books let the user view several books under different categories similar to Netflix or Spotify.

The UX Design:

The UX experience is what makes the app important and enjoyable to use. Creating wireframes was the best way for me to test out the flow and usability of the app design. I made some tweaks here and there to accommodate for the UI design decisions while also making sure that the necessary functions were still there. Fitt’s Law is an incredibly important concept to me as it accentuates the user’s comfort in thumb placement on the phone. That is why the play button is in the most accessible area of the screen. The highlighting and note-taking buttons are also in the area of easy accessibility to encourage the user to interact with the audiobook. The highlighting button is a “press to highlight” function that allows the highlighted quote to show up on the profile page of the user. The colors corresponding to each button (yellow and purple) are shown as lines on the audiotrack to indicate where a highlight or note is. The back button is in the most unaccessible area according to Fitt’s Law because I wish to implement a “swipe back”  or “swipe down” function for easy access. An important feature is the “play in background” feature that lets the user use other apps on the phone while the audio is still playing for better multitasking.

Screens:

These screens are the Splash Page and the Discover Page for the Orbit app. For the importance of branding, I chose to place the logo of the app as the main focus for the splash page with the distinct color of the app. The Discover page acts as the home page where books are categorized into Recommended, Best Sellers, New, and more. In this way, the user can browse all types of books and be exposed to new adventures through the audiobook.

The Library screen shows the Currently Listening, Books to Start, and Finished Books for the user. This is a great and intuitive way to keep track of books and be encouraged to start new ones. The profile page is to promote a sense of accomplishment for the user as displayed by the number of books finished and hours listened. This is similar to people seeing all the books that they have read on a book shelf. Every time a user highlights a quote, it will be shown on their profile page for easy access and inspiration. The quotes also have a “share” function to send through text messages, emails, or social media.

These last three screens are of an individual book. As a huge Harry Potter fan, I chose the fifth book in the series. The first screen shows details of the book such as the title, author, lector, genre, rating, and summary. The summary can be tapped to be expanded. The “Add to Library” function adds the book to the “Books to Start” category in the Library screen. It also recommends similar books for the user. The Chapters screen shows the chapters as well as the completion of each chapter. The user can also click on a chapter to start it. The Listening Now screen includes the play button, rewind and fast forward 15 seconds buttons, speed button, and timer button. It also includes a transcript of the text that allows easy “press to highlight” function so that the user can anticipate when to press the button. In the case of an unfamiliar word or phrase, the user can double tap on the word or phrase in the transcript to look up the meaning and definition.

Were the goals met?

  • Highly Personalized: From highlighting favorite quotes to adding individual notes along with a Profile screen to view your audiobook accomplishments and recommended audiobooks, this goal is met.
  • Highly Interactive: By allowing the above mentioned functions as well as directly looking up definitions and the multiple varieties of books, this goal is met.
  • More Utility than an Book: This is shown in the ability to look up a definition in the app, multitasking friendly UX, and the ability to store hundreds of books just in the pocket of your pants. Therefore, this goal is met.

Thank you for reading this case study. I can’t wait to share more with you!