Accessible and Responsive Website Redesign
Responsive
Small Business
Accessibility
Coding
Overview
Hani wanted her website to reflect her personal brand and be more inviting to the wide variety of individuals she serves.
Another goal was to make the site work better with all types of devices such as mobile and large screens.
Status: Released December 2023
The Challenge
The previous site was outdated, not optimized for mobile devices, and did not provide an easy checkout experience for her books. Hani did not want to use a standard e-commerce site because she already had a functioning database and check-out.
My challenge was to work with the existing PHP and JQuery code, adding functionality such as order summary and automatically collecting state sales tax.
Existing Website Audit
About Hani
Long lines of text, overlayed over Hani’s image made it hard to read the content.
Appointments
The old-style table with cells colored to make a frame was not responsive and was too small for modern-day screens.
Information Page
This was an extra page in the purchasing flow, and its content was moved in the new site.
Book Page
The icons were overpowering the information and visitors did not have a clear, quick way to purchase the book.
Purchase Form
A mix of center and left justified layout, together with small fields and a button that were too close together contributed to a cluttered page and increased cognitive load.
Mood Board
Hani wanted the new site to be cheerful, optimistic, and warm. We worked out a color palette built around the mood board that passes accessibiity contrast ratios.
Final Designs
Responsive website serving 2 types of audiences: individuals or groups seeking therapy, and researchers and therapists wanting to purchase Hani’s books. The overall look and feel is warm and inviting, while at the same time trustworthy and clean.
Users can learn about the books without navigating back and forth to multiple pages, and order faster, on any device.
Usability Improvements
Users can learn about the books without navigating back and forth to multiple pages;
Streamlined ordering with automatic MD sales tax applied;
Preview of total order amount before passing to PayPal for payment;
Content is accessible and easy to read on large and small devices.
Accessibility Unlocked
Making the website accessible means that more people can interact with and navigate the information, and at the same time improves usability for everyone.
Contrast Ratio
All text has 4.5:1 contrast ratio with the background. All graphical elements have 3: contrast with the surrounding background.
Keyboard Navigation
The website is fully accessible by keyboard and includes a hidden “skip navigation” link.
Reflow
No loss of content or functionality occurs, and horizontal scrolling is avoided when content is presented at a width of 320 pixels.
Semantics
Semantic elements are used throughout the site, as well as correct header order.
