Doxim Website

I led the website redesign, focusing on accessibility, responsiveness, and user engagement. We prioritized a mobile-first approach, starting with mobile wireframes, and gathered insights through surveys distributed to our internal teams.

Role

UX Designer

Team

Digital Marketing Manager
Director - Marketing Program
Full Stack Web Developer

Duration

September 2022 to February 2023

Tools

Figma, Adobe Photoshop, Adobe Illustrator, Framer, Typeform

Responsibilities

As a UX designer for Doxim, I lead in shaping an exceptional user experience. My process begins with in-depth user research, guiding the design to meet specific audience needs. I prioritize web accessibility, ensuring the site is usable for all. Through strategic interactions and rigorous user testing, I refine the user journey. My work involves creating visually compelling designs, structuring the site with wireframes, and detailing designs through mockups. These evolve into interactive prototypes, allowing for thorough testing and iteration before finalizing the user-centric Doxim website.

Project Goals

In 2022, the team made the definitive choice to embark on another website redesign. I was entrusted with leading the website refresh project, collaborating with a skilled developer, to ensure that the company's website adhered to Accessibility standards and successfully passed all required accessibility checks. This time, our objective was not only to enhance the site's responsiveness but also to refine the navigation categories and ensure that the call-to-action buttons remained consistently accessible to foster user engagement and encourage conversions. In this instance, I chose to adopt a mobile-first approach, where I began by designing the mobile wireframe before moving on to the desktop version. Prior to delving into wireframes, conducting user research on the current website is an essential step. The team made the decision to distribute a survey among the Sales, BDR, and marketing teams, with the aim of gathering insights from our internal users.

Heading

Customers

Where can I locate the webinar? Where should I look for the eBook or whitepaper relevant to my industry?

Internal Employees

Sometimes I struggle to locate the resources I need; the website feels outdated, reminiscent of the 1980s.

Research and Understanding the Problems

According to the user survey, the majority of users visit the website at least once or twice a week. Some users access it daily and have expressed confusion regarding the extensive items within the mega menu. On the content side, users encountered challenges in locating documents and information, largely due to the existing content categorization, which proved to be user-unfriendly. Furthermore, the website was not particularly welcoming to prospects, with an excessive number of sign-up forms and call-to-action buttons. From a visual perspective, the website design appears outdated and lacks a modern look and feel. The presence of a horizontal scroll further complicates the navigation experience.

Addressing these pain points is crucial in designing a user-friendly website that caters to a broad audience, enhances user satisfaction, and ultimately drives engagement and conversions.

  • Information Structure: Users frequently experience confusion due to poorly organized content, making it hard to find specific information quickly.
  • Navigation Categorization: Users struggle with over-complicated or illogically grouped categories, impeding their ability to intuitively browse through the website.
  • Difficult to Navigate: Users often feel lost within the website due to a lack of clear signposting or breadcrumbs, making it difficult to track their journey or return to a previous point.
  • Outdated Design: Older designs may not adapt well to modern devices and screen sizes, causing display issues and a frustrating user experience.
  • Excessive Number of Forms and CTA Buttons: Users may feel pressured or frustrated by an aggressive sales approach, leading to higher bounce rates and lower conversion rates.
  • Website Does Not Meet Accessibility Standards: Users with disabilities may find the website unusable, leading to a discriminatory user experience and potential legal repercussions for the website owner.
  • Not Mobile Friendly: Users encounter difficulty and frustration when the website does not adapt well to mobile devices, leading to poor readability, inaccessible menus, and unresponsive design elements.

The website's complex structure, inconsistent navigation, and outdated design hinder user engagement and accessibility. The overwhelming number of forms and CTA buttons, coupled with non-compliance with accessibility standards, further alienate users, especially on mobile devices. These issues collectively compromise the user experience, potentially affecting the brand's credibility and conversion rates. Addressing these pain points is crucial for creating an inclusive, user-friendly, and efficient online presence.

User Journey Map

The next phase I implement is creating a user journey map for the website, as it helps me understand users' needs and address pain points, allowing me to design an intuitive and user-friendly experience.

Information Architecture

Following creating a user journey map, the next crucial step is to develop the information architecture with the team. This is a vital process that enables me to enhance the current website navigation. Establishing a coherent information hierarchy simplifies how users perceive the relationships between various pages and sections of the company's site. Furthermore, for this project, I've chosen to adopt a mobile-first approach. The information architecture proves instrumental in crafting a mobile-friendly design, guaranteeing a responsive and accessible user experience across various screen sizes.​​​​​​​

Design Decisions

Mobile-First Design

Adopt a responsive, mobile-first design approach. Ensure the website is fully functional and aesthetically pleasing on various devices, especially smartphones and tablets, with touch-friendly menus and readable content.

Enhance Navigation

Redesign the navigation menu to be consistent and user-friendly. Include breadcrumb trails and clear category labels, ensuring users always know their location on the site and can navigate back easily.

Minimize Form and CTA Overload

Streamline the number of forms and CTAs, focusing on the most critical actions you want users to take. Ensure each CTA is clear and compelling, guiding users naturally through the conversion funnel.

Ensure Web Accessibility

Comply with web accessibility standards (AODA, ADA and WCAG) to make the site usable for everyone. Include features like alt text for images, keyboard navigation, and screen reader compatibility.

Modernize Visual Design

Update the visual design to be more contemporary and align with modern web standards. Use clean, appealing aesthetics that reflect the brand's identity and enhance user engagement.

Iterative User Testing

Implement a cycle of user testing and feedback to continually refine the user interface and experience. Use the insights gained to make informed adjustments, ensuring the website meets the users' needs and expectations effectively.

Wireframes

In a short period, I developed the mobile wireframe, laying the groundwork for our new mobile site while anticipating further enhancements. This project was a significant endeavor; alongside a developer, I balanced this initiative with demands from sales and marketing, tackling an expanded role that included branding, presentations, video production, statement redesigns, and tradeshow materials. Regular meetings with our managers and the Vice President allowed us to align on progress and insights. Ultimately, the decision was made to forgo a traditional prototype, opting instead to construct the site directly in the staging environment. This approach streamlined the process, allowing us to move efficiently from staging approval to launching the site live, marking a shift in our typical development workflow.

Usability Study

I conducted two rounds of usability studies, a valuable practice that offered crucial insights to refine my wireframe design and enhance the overall user experience.

Round 1

  • Due to the extensive amount of information, navigating to the CTA button on the mobile site might be challenging
  • Navigating back to the top of the page can become cumbersome after extensive scrolling through the site

Round 2

  • Interaction elements are a bit confusing, users are not sure which item is clickable and which is not

Design Refinements

Based on the insights from the usability studies, I promptly tackled the issues and made necessary adjustments to my design. This involved ensuring that the menu and CTA buttons remained consistently visible on the mobile screen, making it easier for users to access the CTA. I also implemented a "back-to-top" functionality, enabling users to quickly return to the top of the page, both on mobile and desktop versions.

Additionally, I chose to enhance the desktop site's interaction elements by establishing clear standardization and categorization, distinguishing between clickable and non-clickable elements. To facilitate the developer's workflow, I also provided all visual elements, including images and icons, for easy export and seamless integration into the website.

Please check out the live site at https://www.doxim.com/ (The site may undergo alterations to meet the company's evolving needs after my departure.)

Accessibility Consideration

We prioritize accessibility in our digital environment to create an inclusive space for all users, including those with disabilities. Our efforts include optimizing web content and applications for compatibility with screen readers, featuring descriptive alt text for images, and structuring content for screen reader accessibility. Our website design also adheres to our branding guidelines, incorporating high-contrast color schemes to improve readability. We are meticulous in crafting user interactions, ensuring button text and links are descriptive and clear, and providing meaningful alt text for images to cater to users with visual or hearing impairments. Additionally, our design maintains a consistent layout and style throughout the site, aiding users with cognitive or learning disabilities in navigating and engaging with our content effortlessly.

Takeaways

Impact

The website undergoes a significant transformation with a central focus on establishing a clear and user-friendly information hierarchy, ensuring content is effortlessly accessible. Navigation elements are thoughtfully reevaluated and enhanced to simplify user comprehension and streamline the browsing experience. A contemporary and appealing redesign in harmony with current design trends and user expectations enhances both aesthetics and usability. Additionally, a critical review results in the reduction of forms and call-to-action buttons, eliminating clutter and fostering a more user-centric interface. Most importantly, the website commits to full compliance with accessibility standards (AODA, ADA, WCAG), ensuring inclusivity and accessibility for all users, including those with disabilities.

What I learned

This journey has underscored the critical importance of digital accessibility, particularly for individuals with disabilities, emphasizing adherence to standards like AODA, ADA, and WCAG for inclusivity. A well-organized information hierarchy and simplified, user-friendly navigation are key to enhancing the user experience. Balancing contemporary design with functionality remains vital, ensuring an aesthetically pleasing yet practical interface. Streamlining forms and CTAs further declutters the space, prioritizing user-centric interactions. Recognizing the need for continuous evolution, regularly updating design and accessibility practices is essential to maintain a relevant and accessible digital space. Overall, this experience highlights the significance of accessibility, user-centered design, and constant refinement in creating a comprehensive and welcoming digital environment.