FAMILY BOOK EXCHANGE

ui, web design, coding

The Challenge

The Family Book Exchange website is a three-page website re-design project I worked on as a student. I chose a wonderful local store, the Family Book Exchange. The original website can be viewed here: familybookexchange.ca

The site’s main purpose is to promote the services offered by the Family Book Exchange — trading service details, books accepted for sell, trade and buy, and their contact details. At this time, they do not offer an online inventory of their books, or any e-commerce services.

The Solution

The Family Book Exchange website’s most prominent information was the hours and location. For that reason, I needed this information to be easily accessible for the users. Additionally, the website needed to reduce its amount of text, and to introduce an element of branding that strayed from its current themes. Not pictured is the wire-framing process. Done with paper and pen, it outlined the home page, the books accepted tab, and the contact page. I aimed to make each responsive and mobile-first.

My biggest source of inspiration for the website’s design was the word family. The Family Book Exchange’s services are fit for readers of all ages, a place for parents and children alike. While the business’ logo is a bold blue word-mark in Montserrat, I create a supporting graphic — a paper plane in flight. It symbolizes the constant flow of books that pass through the business, and suggests a child-friendly atmosphere. The additional graphics on the website revolve around paper, dashed lines, and physical brick-and-mortar textures.

As previously mentioned, I used Montserrat (simple and sans-serif) as a primary font for the website. The different font-weights offered provided a good contrast between elements. This was then accompanied by a new colour scheme: red, blue and green. Again, this colour scheme links to child-like qualities, highlighting the family-friendly aspect of the Family Book Exchange.

The Result

Three pages were designed and built — Home, Books Accepted, and Contact — in Adobe XD and Brackets. They encompass the idea of easy, family-friendly service. Each page can be viewed via the demo linked above!