Gabriela Sanders
Gabriela Sanders
serial_cover-photo.png

Serial Box

serial_cover-photo.png

Serial Box


Spring 2017 | Class Project

Rebrand, redesign, & graphic mockups.

Illustrator

 
 
serial_img_create-account.png

Bringing the physical experience of a book to the digital platform.

In this project for a Typography II class, I was tasked with rebranding and redesigning the existing application interface for Serial Box. 

The existing interface for Serial Box possesses condensed fonts and uses high contrast colors excessively, which is distracting and also at odds with what is so appealing about books for many avid readers. Book lovers are often drawn to the elegance and sophistication a book exudes in its physical presence. I chose to redirect from the disjointed emphasis on modern visuals, and instead drew on nostalgia with the use of depth and typefaces typically found in print.

 

REBRAND

 
serial_img_branding.png
 
 

REDESIGN

serial_img_all-serials.png

Creating a more user friendly experience.

When evaluating the user experience of the application, I chose to make numerous changes so that the interface better fits one of the main goals of Serial Box; convenience. Many of the interface features were unintuitive and made the user do more work than necessary.

I chose to keep the top navigation consistently visible at the top of each screen to provide a familiar feature and give the user more control over their navigation. I also changed the “menu” icon to a traditional hamburger menu symbol as the prior use of the Serial Box logo as a menu icon was somewhat confusing and breaks with familiarity which forces users to feel unsure and uncomfortable.

 

 
serial_img_episode-screens.png
 
serial_img_all-serials-list.png

A Serial Box that finally lets you read with ease.

I added the titles of the serials to the grid view in both “My Library” and “All Serials” to enable user recognition. I also chose to make the main screen of “All Serials” a list view to allow the user to browse the serials with ease and compare different options.

I still gave the user an option to view the serial larger in order to consider the option more carefully and to access options for further action with that serial. I also chose to make the “My Library” default screen the grid view instead of list view as the user would likely know what the serial is about if it is in their library and would not require the clutter of details to make a selection.