Modular Responsive Website Design
Website: Joe Mathieu
The Project
A modular, responsive, WordPress website for a well known children’s books illustrator.
The Goals
1. Empower the client to create a comprehensive, yet well organized, library of his work – over 150 books alone, plus album covers and several other categories of work.
2. Give fans of the client’s work an easier way of finding and connecting with him.
3. Enable the client to offer his original art for sale using his preferred process.
4. Help convey the client’s skills and ability to his prospective clients, i.e. book editors and publishers.
The Outcome
The resulting website is so easy to update that the client has already added nearly 40 book pages on his own, solving one of his biggest frustrations with his old website. No analytics data available from the old website, but traffic on new site was up ~300% in the first six months since launch, and steadily increasing since. Website will easily accommodate social media integration and other marketing initiatives when the client is ready.
- ClientJoe Mathieu
- My roleUX design, visual design, WordPress site build
- Collaboration withThe client - provided all copy and visual content
- DeliverablesInformation architecture, page wireframes, content generation guidance, style guide, training manual, finished WordPress site
Information Architecture
I started by analyzing the existing information architecture, the client’s goals, and the existing body of work that the new architecture would need to accommodate.
The new architecture is modular and nested. It can handle unlimited numbers of work genres, with four levels of subnavigation to neatly organize the large body of existing work.
Original Sitemap Analysis
1. Home
Very limited content. Requires Flash to run, so completely mobile inaccessible.
2. About
The only SEO-friendly page of the site, but has no links to or from any other pages on the site.
3. Portfolio
- Unrelated content often placed together, making it hard to discover.
- Site structure limited how much content was possible, so only a few works shown.
- Pages consist of rows of images with no text, providing no context for users and not helping the site’s SEO.
4. Digital and Reflective Art
Pages describing work techniques mixed with pages of work because site architecture did not provide separate spaces for them.
5. Art for Sale
- Same information architecture issues as the Portfolio section.
- Pages with only titles and prices, no other text.
- Live email address provided for contact on the landing page for the section, which led to lots of spam.
- No contact information provided immediately next to the art, limiting sales even further.
New Information Architecture
1. Home
Overviews of each section of the site to give user an engaging guide to the site as a whole at a glance.
2. Work
- Replaces Portfolio to appeal to all target audiences, not just potential employers.
- Modular structure allows flexibility for easy addition of unlimited groups of content to the site.
- Text-rich layout on most pages, including organizational pass through pages, to orient the user and improve overall SEO.
3. Book Pages
- Expected to be main entry pages for organic traffic.
- Site map allows unlimited book pages in each subsection.
4. Individual Art Page
Each piece of art for sale has its own page, which allows for more content and linking to other pages.
Wireframes
There were many. Here are a few.
The wireframes helped the client visualize what content he needed to provide.
