view the project live | view the code on github
About
Goodreads is website that lets users track and rate books and network with other readers. This project is a redesign and code prototype of the user bookshelf or "my books" section of the the Goodreads site.
Vision/Goal:
To create a clean, easy-to-use, inspirational and fun site that booklovers can use as a bookshelf for tracking, rating, book clubs and all their reading needs. This site will be fully responsive on desktop, tablet and mobile and will be prototyped in code.
Technology / Tools
HTML5, CSS3, Sass, Javascript, jQuery, Sketch, Illustrator
Design Process Examples
Design Process
1. User testing of the existing Goodreads bookshelf page.
2. Research, brainstorming and design discussions - wordlist, SWOT analysis, competitive market study, website analysis.
3. Wireframes in pen and paper
4. Logo design - brainstormed on logo design ideas in Illustrator.
5. Branding - picked a unique theme, color pallette, type, inspirational patterns and images
6. Mockups using Photoshop
7. Code prototype using HTML5, CSS3, JS and jQuery.
8. Prototype completely responsive across all devices.
9. User testing of the new boolshelf site.
Challenges
The main challenge I faced was making the website feel modern and fun while still being functinally simple and user friendly. I achieved this through a simple layout, bold colors and a clean interface.
Selected Screenshots