Services
UX Design
Responsive website coding
Accessibility
Industry
Therapy, Local Business
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.
The Ask
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.
The Challenge
Previous website
-
![]()
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.
Responsive website serving 2 types of audiences: individuals or groups seeking therapy, and people wanting to purchase Hani’s books. The overall look and feel is warm and inviting, while at the same time trustworthy and clean.
Final Designs
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.
-
All text has 4.5:1 contrast ratio with the background
-
The website is fully accessible by keyboard and includes a “skip navigation” link.
-
No loss of content or functionality occurs, and horizontal scrolling is avoided when content is presented at a width of 320 pixels.
-
Semantic elements are used throughout the site, as well as correct header order.
