Part One: Complete
Conducting a heuristic evaluation of A Mighty Oak coaching website using the NN/g 10 Usability Heuristics.
Part Two: In-Progress
Making the edits to the Squarespace website and publishing it live.
.gif)
.gif)
.gif)
I referred to the N/Ng 10 Usability Heuristics as a foundational rubric to identify key usability issues in the website for A Mighty Oak.
See All Usability Heuristics
A Mighty Oak is a career and systemic teams coaching company based in Vancouver, BC.
Client booking is primarily done through the website, as well as marketing of serfice offerings.
With an entire website to update, I chose a single user story to begin the redesign process. This way I would be able to ensure that each page was relevant to the user's purpose for visiting.
I chose this user story because career changers are the most typical client booking the company's services through the online portal. Team Coaching clients only visit the website to check for validity. Therefore, a poor user experience for career coaching clients would likely be the most costly as well.
I set up a quick task flow to identify which pages users would see along a single journey. This way the flow would be consistent.
Efficient design comes from a logical strategy.
I created a graph with 2 axes: the Y axis being "User Value" and the axis being "Difficulty".
I prioritized the usability issues to resolve by ranking each issue along the design matrix.
The numbers on the matrix correspond to the annotated frames below.
Theses frames are screenshots of the original website for A Mighty Oak. They are in the order of appearance, based on the task flow, and annotated for the usability issues.
The original navigation used a hamburger menu on desktop as well as other screen sizes. This created an extra step for users and was not an obvious menu.
This open navigation allows the user to immediately interact with elements at any time to reach their desired destination by having everything in view at all times.
The long chunk of text show poor information hierarchy so users are unable to find the core information. On average, users use 7-10 seconds to skim a page for key information but this page is difficult to skim.
Unseen design changes include adding official heading tags number 1 to 4 on page headings and changing the hero section text to a text heading instead of a jpeg of text script.
The original page doubles as a contact page and may be confusing for users when they first open it. There are no instructions for next steps and the user is expected to intuitively move forward and find their own way.
The new design offers instructions to the user. It also gives an overview of what to expect so the user understand what the next steps will be and how to continue moving forward.
The limitations of design customization were reached at the point that the actual purchasing process begins. These screens are custom designed by the website builder and minimal changes could be made - none that would alter the essential structure of the pages.
.gif)
Part One:
I have presented my evaluation to the business owner, and my suggestions have been accepted.
Part Two:
I am now in the process of implementing live updates on the website.
The design process is never truly finished - there will always be room for improvement. With this in mind, utilizing a design matrix to prioritize updates helps with developing a tangible and actionable plan for updates.
A priortization matrix also visually identifies opportunities for growth in an accessible, easy to understand format for all key stakeholders.
Information architecture (IA) requires a logical flow of information that pairs perfectly with building in SEO friendly elements from headers to alt-text.
SEO and good IA come hand-in-hand. Both make it easier for humans and machines to process, identify, and access key information on any webpage. Humans rely on machines to locate to the information we need and many humans even require machines to read through the data once it's located.
A human-centric approach requires optimizing for the tools that humans use as well.
