New home page for a Publishing House, view above the fold
- Custom Website Design: update menu navigation system, modernized home page for better quick reviews , maintain a clear naviation of the website. Address painpoints within the orginal design.
Process
- Kick-off: To start this project I spent some time analysising the original home page before meeting to discuss project goals and current pain points with the stakeholders.
During this time we identified these key areas of focus:
- 1. Space needed to be made within the existing navigation for a secondary menu bar to indicate various projects under the publishing house.
2. The hero as is was taking up a lot of valuable real estate without saying much. We need to make space here for a "special announcements bar/section" which could be toggled on and off.
3. Featured booked needed to be above the fold and the design for this section needed to allow for 5 books to be on one line.
4. Develop about section to include both publishers and more about Mosaica Press.
5. Emphasis newletter subscription section for more sign ups.
Original home page, above the fold view. Red indications areas marked as items of focus.
Original featured books section below the hero, and quick view.
Original about section and newsletter sign up sheet. Stakeholders wanted the sign up to be in its own section further up the page. We played with a few ways of doing this before ultimately deciding to keep it subtle and as part of the footer.
- First round of wireframing: Starting with paper before moving to Figma, I developed a wireframe based on the goals we had outlined above. Here I got inspiration from Amazon books for a responsive design that would open to show a quick view, while moving content down rather than covering it.
Low-Fidelity Wireframes
- Hi-Fi Wireframes & Prototyping: Once the initial designs were signed off by the key stakeholders, I moved on to high fidelity wireframing and prototyping. Feedback was very positive, although we did go through a few rounds of changes to the "about us" section and the newsletter sign up.
Prototype for the quickview iteraction.
Hi-Fidelity Wireframe