UX Designer | Human Computer Interaction
Kramerbooks Visual Design & Animation Project
Shannon Cates UX Portfolio
Master's Student | Human Computer Interaction
CURRENT KRAMERBOOKS LANDING PAGE
Project Background
We were given an open ended class project to design for multiple devices and use animation techniques. I chose to redesign the website and create a branded ereader app for Kramerbooks.
Kramerbooks is a local bookstore in Washington DC. They are known for being a part of DC history and for their cafe/bar.
I began by reading their mission statement and looking at their site to try to understand what their brand wants to portray and how they are currently lacking.
Scope
-
Understand the organization’s Mission Statement
-
Develop a Design Strategy based on the Mission Statement.
-
Translate the Design Strategy into a working Design Language
-
Create a Mood Board
-
Apply the aesthetic from Mood Board to the Deliverables
Software
Sketch
-
Wireframes
-
Design layouts
-
Initial prototyping
Photoshop
Principle
-
Neon effects
-
Device mockups
-
Book images
-
Animation
-
Prototyping
Deliverables
Digital Executions
-
8+ Screens of a Digital Product or Service
Non-Digital Executions
-
(1) high-fidelity mockup of digital design
Presentation​
-
On-screen demo
-
Oral critique
DESIGN PROCESS
Planning
Intial Design
Iteration
Critique
Animation
Presentation
Developing a Visual Strategy
MOODBOARD
Based on Kramerbooks mission statement and web presence, I isolated three key phrases to guide my visual strategy:
Rebellion
Transformation/Day to Night
Books & People
From this, I created a mood board to represent the new aesthetic.
I wanted to bring in print elements and a serif font to conjure the idea of books. I also wanted to use a more retro font, Poppins, and a retro color palette to emphasize Kramerbooks history.
I pulled elements from their iconic neon sign as well.
Design Phase
I chose 6 webpage screens and 4 ereader screens to design and sketched various layout options. After a round of critique with my professor and classmates, I settled on appropriate layouts and began to work on visual design.
To start, I looked for inspiration from existing websites to inspire my animation. I wanted to think about animation throughout, so that it would feel cohesive at the end of the project.
I knew I wanted to use print elements and use animation to bring those to life.
PRELOADER & LANDING PAGE
I knew that I wanted a preloader that referenced Kramerbooks' neon sign. This screen would act as a portal, allowing users to choose either the Cafe website or the bookstore website. I felt this was needed because the current page is rather confusing and doesn't drive users in either direction.
On the landing page, I aimed to show Kramerbooks' personality and story as well as surface the most relevant elements that users might be searching for.
PRELOADER & LANDING PAGE
PRELOADER
LANDING PAGE
OTHER WEBSITE SCREENS
ABOUT US
About Us
I wanted the about page to draw on print layouts and I kept it very neutral so that the information would be easy to parse.
I broke the grid with large, artistic letter-shaped photos.
Using Photoshop, I masked the black-and-white images while still allowing certain details to slip through, creating a 3-dimensional effect.
FEATURES BOOKS
In the spirit of the project, I wanted to push the visual design as far as possible. I imagined a world where Kramerbooks would design their own covers and created a page that would feature this collection.
I created a grid but then used elements from print layouts to break it, attempting to create a dynamic page that drew influence from the covers themselves. Again, I used layering to make the covers feel tangible. I also used glyphs as icons where I could.
Featured Books
BROWSE BY GENRE
I included several browsing methods for users to choose from, but chose to mock up a browse by genre option for this project.
I continued the book spine theme and use layered images to create texture while keeping an organized grid for easy browsing.
I also used this page to feature Kramerbooks events and the new ereader.
Browse by Genre Page
PRODUCT DETAIL PAGE
The PDP was one of the most important pages, and I decided to give it a gradient background to make it feel more immersive.
I featured a flat layout of the book's front and back cover with the most relevant information like title and price above the fold.
I then used a cognitive walkthrough to imagine what a potential buyer would want to see. This lead me to include a large visual of the different formats available as well as the book's blurb.
Again, I used elements from the books's cover throughout to bring movement and life to the page.
Product Detail Page
E-READER PAGES
HOME SCREEN
Users can browse books & navigate to importan
BOOK COVER SCREEN
Each book will have a unique cover screen
LOADING
Animated loading calls back to About Us page
CAFE MENU
Cafe menu available for convenience
Animation Phase
Before the animation phase, I'd mocked up basic prototype movements in Sketch and inVision to get a sense for the overall user journey I wanted to portray. I had also searched for animation inspiration online to inform my design. I wanted to use animation to bring life to the print elements I'd included as well as to keep the user engaged. My intention was for the animation to enhance the design, not distract from the information at hand.
Walkthrough of Website Animation
Walkthrough of E-Reader Animation
Final Thoughts & Next Steps
I love how the eclectic visual design brings out Kramerbooks' fun side. I feel the animation does a lot to bring the site to life and add fun to the experience.
In the future, I would work to edit the design, eliminating or changing certain elements that might not be cohesive--like the About page. I would focus on items, like the events section, that look interesting but aren't as functional for the user.
Through this project, I learned to integrate elements of visual design to bring out certain aspects of a brand. I learned to think about a user's journey and apply that to animation of a prototype. I feel I expanded my visual design repertoire as well as my user-centered thinking.
​