ABOUT
DESIGN
PLAYGROUND


Converse Brand Book
Strike Magazine
Don’t Say Gay Bill Book
Korean Frog Illustrations
Come Out to Philly App
Allergy Interaction Design
Zenker Suite Redesign
Shelf Help Website
Doctrine of Signatures















EMAIL
LINKEDIN
INSTAGRAM










Shelf Help Website


UI/UX, Web DesignFall 2023

Project
Website
6 weeks

Course
Visual Principles for the Screen
Advised by Rachel Silverberg

Software
Figma

Skills
Research
UI/UX Design
Wireframing
User Testing




The Shelf Help website gathers the most popular and relevant self-help books and sells them to consumers online. The site targets those who are seeking tips to better themselves or move past stressful events/emotions occurring in their lives. The website is organized into the categories of guidance consumers would be looking for, including success, relationships, spirituality, emotions, and creativity.





Road to the Final Product

ResearchI first conducted a field research, looking through three websites that I felt had a solid grasp on the organization of a book-centered database: Barnes & Noble, Goodreads, and Target. I noted the typical placement of their logo and navigational systems, filtering, hierarchy and levels of information included, rating system, and hover states. I wanted to emanate a typical book site, taking the elements that a viewer would be familiar with, but putting my own twist on it.

I then gathered around 25 self-help books, recording the title, author, price point, rating, and summary, as well as the front and back cover images of each book. Based on the basic overview of each book, I categorized each into one of five basic themes: Success, Relationships, Spirituality, Emotions, and Creativity.
Low-Fidelity Wireframes (With and Without Grids)
Color, Image, & Type Exploration

I wanted to foster a friendly, modern environment, one where my audience would feel safe and guided. I chose lighter pastel colors and used rounded edges across my website to accomplish this. I chose a more formal serif typeface, as I wanted to make clear that my site is catered toward adults.

High-Fidelity Wireframe Exploration

Experimenting with the format and placement of one of my internal pages, I ended up settling on an option that leans toward the bookshelf aspect of my website. The book therefore sits on a shelf, incorporating the color scheme that is repeated across the site

Final Product

My final product consists of one home page and two internal pages. The website is equipped with a working price range filter, as well as the catalog for both the ‘success’ and ‘relationships’ categories. The home page has clickable hover states that highlight the selected books, and can direct you to a specific book’s internal page. Finally, the website is equipped with an internal book page for Atomic Habits, showcasing the book’s key information, related books, and a review section.  



 Zenker Suite RedesignDoctrine of Signatures