Case Study: Redesigning Jonkers’ Website
I worked with web developer Steve Kirtley, during the first half of 2022 to redesign the e-commerce website for the rare books business, Jonkers.
I was hired by Steve Kirtley, as a designer for his e-commerce client, Jonkers. My initial brief was a modernisation redesign of the current website that should be an “evolution rather than a revolution.” The client was generally happy with the structure of the website, but wanted to reduce the amount of About Us pages and bring the books into focus more. The client also wanted to keep his logo but I wasn’t obligated to use cream and burgundy, which were his brand colours.
Initial homepage design
The client was keen that the new website should have a “high-end” feel, be sleek and “classically understated.”
I took inspiration from websites like Gucci, Ralph Lauren and Kate Spade and focussed on the typography. I paired Orpheus Pro with Prenton Pro and Display. Although Orpheus Pro was designed in the 1920s, I felt using Prenton (created by a foundry established in 2005) added a modern twist on the classic pairing of a serif with a sans serif typeface.
I also removed the backgrounds from the product photographs so they didn’t distract from the physical books. This helped to create a cleaner design and increase the white space, which I felt was really important in a successful high-end design. I steered away from gradients because I thought this was the main element that dated the original website. I also added a new section showcasing the latest books and increased the spotlighted books, as the original homepage only showed two products!
Finally, I was keen for the slideshow to be more impactful; rather than stretching images the full width of the screen and the browser automatically cropping the height, I decided to introduce text as a block that sat beside uncropped images. I was ambitious and hoped Steve could code an extra field allowing for a hex colour to be added through the site editor, so the background of the text block could relate to the image selected. I knew the content editors used software to edit photographs, so I felt this was achievable from a content editing point of view.
Client Feedback
The client felt the burgundy wasn’t used enough in the first design and didn’t like white as a background because he found it stark and uninviting. He also felt the newsletter sign-up wasn’t prominent enough and didn’t like my font choices. He began to share links he liked and I soon realised a more traditional and classic feel to the typography was needed, rather than high-end and modern.
For the second version, I paired Alegreya, which I felt was quite traditional with Avenir because I thought using a sans serif for the body copy would help with readability. I introduced cream for the main background colour and added burgundy where I thought it was appropriate. I added the newsletter sign-up box after the spotlight books to break up the blocks of products.
I also realised there were over 1,000 products listed on the website and that the content editors wouldn’t be able to edit all of the backgrounds, so I added the original product photographs into the template.
Iterations
It was clear after the second version, the biggest issue was typography; the client suggested the typeface Bellefair, which interestingly I did consider for version 2 but it doesn’t have any weights or an italic or bold version, therefore difficult to create a typography system around. I sensed he wanted something extremely traditional like Times New Roman or Baskerville, so I came up with a new document of options and also found typefaces with weights to pair with Bellefair. In the end, I chose Nobel and Mrs Eaves to pair with Bellefair.
Originally, I wanted an interaction, like a background colour change or border when the user hovered over the product listing box but the client requested the book photographs were enlarged and become the hero of the page, so I removed the padding around the boxes and increased the size.
Increasing the size of the imagery created an unbalance, as the eye was more focussed on the photograph than the title and price. I needed to add a white background to each box, to reintroduce a balance between the text and imagery.
The other difficulty was the newsletter sign-up box; the client felt bringing it higher up the page might confuse users into thinking there was no content after, as usually newsletter sign-up boxes are at the footer of the page. Instead of a change in placement, I looked at different colour ways to try and achieve a distinct sign-up box.
Rounds 3 and 4
The client was happy with my preferred font pairing but decided although the burgundy was his brand colour, much like the original website, it had to be used sparingly. I revisited the softer colour palette from my first design and created a new hybrid of the previous designs.
The biggest sticking point left was the slideshow; the client wanted the option to include or exclude a description alongside the title and link and wanted white text on top of the image but this created huge readability issues, especially due to the serif headline font. I played around with different images to see if that helped, as well as black text on the images, the sans serif typeface in the system and also introducing a gradient.
I thought a simple white box was most effective and it also made sense because we were using white as a background in other parts of the site.
I mocked up my preferred solution in the context of the header, alongside the most successful client inspired solution with gradients.
I reduced the padding on certain aspects of the site, added in two extra call to actions and we finally settled on a homepage design with a happy client who approved the design!
Navigation
I started to think how the navigation would work on larger screens. I had planned to finalise the navigation drop downs and the search hover during the style guide stage, but I wanted to start thinking about the navigation on desktops before I moved to the mobile design.
I initially wanted to keep the navigation simple with only text links, as the author drop down was quite extensive, but the client wanted to add images and make the menu more visually interesting.
In the end, we found a comprise and decided on one mega menu drop down; I combined both images and text into the drop down and reduced the amount of links shown.
Mobile design
I began thinking about how the homepage would work on mobiles; I reduced the number of columns to 4 and also reduced the gutter width. I decreased the font sizes and padding and stacked the content neatly. I reduced the number of books in the spotlight area down to only show 1 and we decided to simplify the navigation and remove the links and combine the currency picker into the nav.
Templates
Whilst designing the homepage, I realised the client was quite visual and was more comfortable giving feedback after seeing a design, consequently, I created more templates than I first planned. I work in Adobe XD and it was quite easy to duplicate the header and footer across multiple artboards. I made sure that I wasn’t duplicating components over too many different templates, so I was as efficient as possible.
Designing multiple pages really helped ensure I was using consistent paddings, typeface colours and sizes and it really helped to create the beginnings of a uniformed system.
I designed two category listing pages, one for text and a description and a simpler one with images only. I also designed a product listing page for a category like Modern First Editions that included filters on the left hand side for elements like date and price. The client was keen to “promote” important books so I created a box that spanned two columns, which I had to balance against the signed books, as that also needed highlighting.
The product page improved the old website and introduced a gallery with thumbnails to show the images, as well as a contact form making it easier to enquire about a book. The about us page combined content from multiple pages, making it easier for users to find relevant information on a single page.
Subtle changes were made to the the contact us page and author pages but the biggest improvement to the individual author page was to increase the number of books listed by the author.
Generally for most of the templates it was a case of applying the new styles, but the blog page was given more consideration to try and create more of a beautiful reading experience.
I also created a basic text page, a search listing page and designed every stage of the checkout process.
I finally created another mobile design for the product page. I felt the product page was the most important page on the website and the developer Steve, needed some guidance.
Style guide
I finished the project off by designing a style guide to help Steve code the design. I covered the basics of colours, typography and showed how I had envisioned the hover and focus states, as well as showing all the states of the navigation across mobiles and desktops.
Work with me!
You can see more of my work in my portfolio on Dribbble or read other case studies here on Medium. If you think I’d be a good fit for your organisation and would like to see what I can create for your brand and/or website, please get in touch by emailing me.
