Component library, prototype, and plan for translating rqipartners.com into the languages of 18 different regions
RQI Partners faced two major usability issues with its website that were causing both its customers and its employees to pursue time-consuming workarounds to accomplish their goals.
The information architecture of rqipartners.com was causing existing customers to use the lead generation forms to contact customer support. The sales team would then forward the messages to the customer support team, causing time to be spent unnecessarily on both teams to redirect the messages.
Also, the navigation to each of the key pages in the sales funnel and the layout of the pages themselves were confusing potential customers. The marketing department had created a workaround: building customized landing pages for each prospective customer. But this workaround itself led to each of these landing pages being detached from the rest of the website.
I created the UX strategy, component library, and prototype to solve these issues, and I made a plan for translating rqipartners.com into the languages of RQI Partners’ 18 different regions.
Role: UX lead
Tools: FigJam, Figma, Zoom, Otter.ai
Impact
Solved the problem of customers mistakenly contacting sales instead of support
Developed a new information architecture, content strategy, and design system for the site’s highest-converting pages so that the sales team could draw on one consistent component library rather than creating one-off sales pages
Created a scalable plan for content development and internationalization
Deep dive
Discover
UX and SEO audit
To quickly establish some knowledge of the current state of the website and user goals, I conducted a UX audit (also known as a heuristic evaluation) and keyword research. I discovered many users were searching for “login” and “support”-related keywords, which further supported my suspicion that customers were having trouble navigating the site. I also noticed that users were searching for terms like “CPR training” or “NRP training” but not specifically for any of RQI’s product offerings.
Success criteria
Define
Customer journey map
Taking the users’ Jobs to be Done from the success criteria workshop as my starting point, I mapped out the customer journey maps for customer support and product consideration.
Sitemap
These user flows provided the insights I needed to propose a new sitemap, namely a new customer support flow, solutions pages, case study pages, and homepage.
Wireframes
With the sitemap established, I had a clear inventory of key screens I needed to design. So I started by creating some loose wireframe sketches to demonstrate the overall UX strategy and proposed information architecture.
Iterate
Prototype
The early work to build a component library and arrange components into the key pages using Figma’s auto-layout feature allowed me to make quick work of building out a clickable prototype to present to the client.
Visual design direction
I collaborated with our Lead Art Director to establish a visual design direction, adjusting my grayscale prototype to match a general look and feel of the full-color mockups while still maintaining separate conversations with the client about UX strategy and UI design. Presenting them separately allowed me to keep our client focused on providing the product team with high-level feedback.
Next steps
Content development and internationalization
By the end of our design process, it was clear to me that the website required deep content edits and, in some cases, freshly written content for a successful relaunch. Using Google Analytics, SEMrush, and Airtable, I identified 100 key pages that would require updated content. I then put together a bid by incorporating estimates from a copywriting firm and a translation firm.
Design validation
The goal of this project was unique in that it included UX strategy only so that RQI could determine the scope of its investment in a full relaunch. I advocated that future phases should include usability research and cardsorting with the site’s target users to validate/iterate on the designs.