←
Back to home
Making Ziba’s website more accessible, useful, and engaging
Client
Ziba Design
Role
Lead Designer
What Happened
Launched an improved version of ziba.com by working with internal stakeholders and a developer to design, test, validate, and deploy
What I Did
Project planning & resourcing, UX & accessibility auditing, information architecture, SEO, UX design, web design, usability testing, research synthesis, created and maintained a UX backlog, created a Figma component system & style guide, organized and led internal meetings and review sessions, reported findings & designs to stakeholders
Background
Ziba Design is an innovation and design consultancy based in Portland, OR. Ziba has existed for over 40 years, and has provided hundreds of clients with game-changing product, digital, and strategy solutions. Ziba’s website, ziba.com, intends to attract and inform prospective clients about what we do and who we are. Last year, I led an internal effort to revamp and improve the user experience of the website.
Problem
We began receiving feedback from new and existing clients that they were confused when navigating the website. Specifically, clients weren’t sure where to go to find out more about our services and capabilities. Additionally, some potential clients experienced frustrating bugs that stopped them from exploring the site. These issues catalyzed us to take a closer look at the website and conduct an audit.
🧭
Confusing navigation
The initial version of ziba.com did not feature a “Services” or “Capabilities” page in its primary navigation. Instead, it was buried in a complicated user flow within the “About” page. This led to confusion and frustration when clients wanted to find out more about what we do.
Challenges
Gaining stakeholder alignment and buy-in is always challenging to a degree. In this project, gaining that alignment necessitated weekly reviews that had to be maintained alongside packed schedules and in between client responsibilities. I had to prepare thoroughly to make sure that each review session was worth our time and actionable.
User testing also caused some challenges. The stakeholder group decided to minimize time and resources put towards user testing, which meant that I would have to be smart and scrappy about how I designed the sessions. I utilized existing client connections to recruit a small but targeted group of representative users to test our prototype with.
Solution
An audit of the website revealed accessibility issues, low SEO metrics, conflicting brand statements, and more. I translated these findings into a backlog, so each item could be prioritized, categorized, and tracked. This level of organization helped bring structure to the effort and created a living document that any other team member could pick up later.
💡
Audit-based backlog
An initial audit of the website revealed several issues related to UX, UI, and backend development. I catalogued all of these issues and translated them into a backlog of problem-solving actions. I also used Notion to tag each backlog item as a way to prioritize and categorize each line item.
I designed and facilitated five user testing sessions with past Ziba clients to gather qualitative and quantitative feedback on the old version of the website and an improved prototype. Setting up a scenario, providing tasks to track completion rates, and asking questions about usability throughout the test allowed me to identify common issues among the participants. Those issues were fed directly into the backlog of action items and informed prioritization of redesigns and backend improvements.
📝
Virtual usability testing
I conducted virtual user testing to assess the usability of the old website and validate the usability of an improved prototype. Here’s me, in my element.
I started by shoring up problems that were negatively impacting site health. I worked with our developer to implement accessibility improvements to ensure WCAG compliance. I redesigned key user flows and restructured the architecture of the website to improve the user experience and boost SEO metrics.
⛔️
The heading placed over the hero image on our case studies was leading to legibility issues across many of the case study pages.
✅
A simple fix to this issue was to add a darkening gradient to the left side of the image to ensure that the white text is always legible, regardless of the content of the image.
⛔️
The old “Work” page featured a large heading and an exposed filter list that completely hid our actual work below the fold.
✅
I updated the layout of the page to ensure that our work was visible above the fold, while maintaining access to the filter list. I also worked with a copywriter to update the heading to be less about brand and more generally about the work we do.
⛔️
The old footer didn’t establish a clear hierarchy. It also didn’t allow easy access for potential clients to provide their information for a new project or subscribe to our newsletter.
✅
I reorganized the footer content and redesigned some of the elements to improve its readability. We also implemented an exposed input form to drive subscription conversions.
⛔️
The old “Contact” page had little visual hierarchy, thus making it unclear to the user where they should start their journey of getting in touch with us.
✅
I reorganized the layout and visually prioritized “New Business Inquiries” to increase new client traffic, which would hopefully add to our pipeline.
In tandem with a new marketing strategy, these updates led to a dramatic increase in overall web traffic in the first quarter after launch. We hope to see more success as we continue to push updates and publish new content.
Check out ziba.com to see some of these changes live.
Learnings
- Small improvements can have a big positive impact on a user’s experience.
- Starting with small updates can help gain momentum towards making big changes.
- Building good digital user experiences starts and ends with accessibility. Designing for the minority = designing for the majority.
Other Work
Contact