Drawingwriting.com
Redesigning an authors' 15 year old website.
Drawingwriting.com
Redesigning an authors' 15 year old website.
Drawingwriting.com is a website owned by an author, educator, and doctor in education whose lifes' work is centered around improving literacy.
Drawingwriting.com details teaching philosophies and resources (workshops, books and other publications) to students and parents to improve their literacy skills.
I was brought on to redesign her website, which was largely left untouched for 15 years on an outdated web platform.
UX Designer and Developer
UX Designer and Developer
Designed new information architecture, responsive web pages and built an entirely new site using Squarespace.
ii. Web Migration Specialist
Moved website content from outdated platform and transferred site domains.
Collaborated with client each step of the way to present developments, answer questions and address clients' concerns.
My client is a talented author, that has 3 published books and multiple scholarly publications related to their doctorate in education.
For over 15 years, their life's work was on a website hosted with Weebly and was not maintained. Therefore, it did not appeal to the current visitors or drive traffic to their works.
Aside from modernization needed—boosting SEO, checking for updated links and messaging— the website needed an updated look and design.
A lot of the content on the website was valuable and didn't need to be completely abandoned. I went through each page with my client, verified what was important to keep on to the new website and organized the content in a way that is easily navigable for their audience.
My approach was to audit the current site to look for redundancies and areas of improvement, and then reimagined what an experience that focuses on the end user's goals would be like.
Description: Screenshot of the old drawingwriting.com's landing page.
Description: Screenshot of the old drawingwriting.com's landing page.
Description: Screenshot of the old drawingwriting.com's landing page.
Centering our User
Throughout the project, it was imperative to consider the users of this website. I met with my client early to hear their perspective on the intended users of their website and what their goals are.
Since my client's work revolves around improving the literacy of humans through drawing and writing, many of the users of this website want to learn about Susan Rich Sheridan, Ed. D's teachings, workshops and books and what her tools and resources can do for their child, or for themselves.
Although every user is unique, the main purpose of the website is to help them easily access information that is relevant to their needs. With the new website, that means providing multiple paths for users to: view my clients' Books; get in contact with her; and learn about her credentials and methods.
Based on this insight, I started hypothesing what areas can be improved upon to help users achieve their goal.
Description: page on old website, heavy with text
Description: page on old website, heavy with text.
Text Heavy Website
Each page contains long blocks of text. Although the content is valuable, the redundancies across the site make it hard for users, especially those less strong in literacy, to obtain this important information and follow along efficiently.
Plain Outdated Webpages
The old site featured images/graphics that were out of date, and did not reflect my clients' brand! The website needed to reflect my clients' brand which is about writing and scribbling.
Description: page on old website, with outdated graphic and layout
Description: page on old website, with outdated graphic and layout
Description: page on old website, with outdated graphic and layout
Description: "Terms and Definitions" page on old website, takes you to information about the author.
Description: "Terms and Definitions" page on old website, takes you to information about the author.
Unclear Titles
Navigation across the website is confusing and inconsistent. Titles in the menu do not clearly indicate the content on the page. For example, the "Terms, and Definition" tab takes you to view my client’s CV and awards.
Description: menu structure of the old website
Description: menu structure of the old website
Disorganized Informational Structure
The informational structure of the website was difficult to navigate to a new user.
For example, the "What, Why, How" page has nothing on it.
The informational structure of the website was difficult to navigate to a new user. For example, the "What, Why, How" page has nothing on it.
The informational structure of the website was difficult to navigate to a new user. For example, the "What, Why, How" page has nothing on it.
Description: menu structure of the old website
Description: menu structure of the old website
Updating the Information Architecture
Updating the Information Architecture
Updating the Information Architecture
Before executing design, I brainstormed ways to simplify the menu structure of the website.
The Baseline informational hierarchy had unclear titles of pages, and submenus that were dense and redundant.
The Baseline informational hierarchy had unclear titles of pages, and submenus that were dense and redundant.
The New informational hierarchy, consists of updated and familiar menu titles, and simplified and more evenly spread submenus.
The New informational hierarchy, consists of updated and familiar menu titles, and simplified and more evenly spread submenus.
Workshops→ is better represented as a “Blog”
Terms, Definitions→ is better represented as “About the Author"
Press and Reviews can fit as a submenu item under"About"
Workshops→ is better represented as a “Blog”
Terms, Definitions→ is better represented as “About the Author"
Press and Reviews can fit as a submenu item under"About"
Workshops→ is better represented as a “Blog”
Terms, Definitions→ is better represented as “About the Author"
Press and Reviews can fit as a submenu item under"About"
To fully understand the intended user's ideal journey, I sought out successful competitors' websites for inspiration, and established a visual style guide before jumping into design.
To fully understand the intended user's ideal journey, I sought out successful competitors' websites for inspiration, and established a visual style guide before jumping into design.
Auditing Competitors
I reviewed indirect competitors, ie. other authors that have academic, professional material to get inspiration for ways to highlight works and organize content.
Roxanne Gay, writer of both books and other publications simply lists her publications to help users easily find what they may be specifically looking for or browse.
Roxanne Gay, writer of both books and other publications simply lists her publications to help users easily find what they may be specifically looking for or browse.
Ann Handley's website is very content heavy, but is broken up in ways that engage the user, like in this example shown.
Color and Design Guide
We wanted to incorporate their books' color scheme and images into the theme and design of the new website.
Drawing inspiration from this book cover, I started establishing a design system for the new website. I established the color scheme from the book cover, typography, and button elements for the website.
Drawing inspiration from this book cover, I started establishing a design system for the new website. I established the color scheme from the book cover, typography, and button elements for the website.
Initial Mockups
I mocked up a few page layouts for the new website on Figma to give my client an idea of the look and feel of the new website. I also gained feedback early and often before and while designing the pages.
The original page (left), has a lot of valuable text, but has outdated imagery, and long blocks of text that would be difficult for users to read. The first mockup (right) sections out the text with headers, lists, and a cover of the book, while also linking to the book where users can directly make a purchase on Amazon!
The final designs is an intuitive interface that enhances user experience through streamlined navigation and visually appealing aesthetics, resulting in a more cohesive and branded website.
The final designs is an intuitive interface that enhances user experience through streamlined navigation and visually appealing aesthetics, resulting in a more cohesive and branded website.
"As a website designer, Meaghan Smith was superb to work with. My website needed re-invigorating and modernizing, and Meaghan Smith proved just the person to do this.
She had excellent ideas for updating the site, as well as a wealth of knowledge about how to do this, including moving my entire website to another web platform.
Meaghan keeps scrupulous records of each meeting, including what topics we covered and what changes we made together or need to make later. She communicates quickly and clearly. Her organization skills are topnotch.
My website is greatly improved in terms of visuals and accessibility. Meaghan has given me confidence that my life’s work will live on.
Meaghan Smith is a dream to work with. She listens, reflects, suggests, and stays completely in tune and in touch with her client’s needs. The suggestions and solutions she then provides are on target, effective, and, in fact, invaluable. I would highly recommend her to anyone who wants to launch a website or to improve an existing website."
"As a website designer, Meaghan Smith was superb to work with. My website needed re-invigorating and modernizing, and Meaghan Smith proved just the person to do this.
She had excellent ideas for updating the site, as well as a wealth of knowledge about how to do this, including moving my entire website to another web platform.
Meaghan keeps scrupulous records of each meeting, including what topics we covered and what changes we made together or need to make later. She communicates quickly and clearly. Her organization skills are topnotch.
My website is greatly improved in terms of visuals and accessibility. Meaghan has given me confidence that my life’s work will live on.
Meaghan Smith is a dream to work with. She listens, reflects, suggests, and stays completely in tune and in touch with her client’s needs. The suggestions and solutions she then provides are on target, effective, and, in fact, invaluable. I would highly recommend her to anyone who wants to launch a website or to improve an existing website."
Susan Rich Sheridan, Ed. D
