Project Overview
The Challenge
The National Council of Urban Indian Health (NCUIH) is a national organization connecting Native Americans in urban areas to health resources. They collaborate on policy, training, and educational resources that come together to increase the wellbeing of Native peoples living in the United States.
I joined the communications team, and was tasked with bringing the old website into the modern era. The former website was non-mobile responsive, and lacked access to CSS/PHP/JavaScript files for editing layouts and templates. Information was organized poorly, as the organization had grown immensely with a website that could not keep up.
With a vital mission concerning the health of an excluded group in mainstream healthcare, it was essential to rebuild a website that better served the Native community.
The Solution
The main reason I was hired on at NCUIH was due to my background with WordPress website development and visual design. I proposed preparing for and building out a WordPress website. Key solutions involved redesigning the site’s information architecture, redesigning the Knowledge Resource Center (KRC), and creating template wireframes based on user research.
Additionally, I helped source a development team for the design and production phase of the project to better support the internal team at NCUIH with this massive undertaking.
Knowledge Resource Center (KRC)
User Research
When auditing the website for design opportunities, the first experience to catch my attention was the KRC. Based on Google Analytics, this was the webpage with (by a long shot) the most visitors and time spent on by users. It is the first searchable resource center holding information specific to Native health in the United States.
When we surveyed users, most stated being satisfied that there even was a resource center for them to begin with. When interviewing NCUIH staff internally, we got deeper with our questions. The KRC’s search function no longer worked, and there were way too many categories to sort through to find information. Users would have to scroll through over a thousand documents to find one that was relevant.
Ideation
We decided that to solve these pain points, we needed an easy-to-use, quick loading document library solution that empowers the people NCUIH seeks to serve with access to a wealth of organized information. This solution needed to work on a WordPress website, and be easy to update internally at the Communications department.
My proposed solution was to use the Barn2 Posts Table Pro Plugin. With a low upfront cost (ranging from $69 to $249 annually, or $209 to $749 for lifetime use), this would allow NCUIH to sort all of their resources using categories, tags, IDs, post types, authors, or other custom field values.
A live demo of a searchable document library can be found here. It supports many documents types (PDF, PPT, Excel, music, videos, and more), which made it an excellent solution for the KRC. Because it could be dropped into a WordPress page using a shortcode, this required no development of the library itself, and accessible for NCUIH team members to update.
Wireframing Page Layouts and User Flows
User Research
The greatest piece of feedback from user surveys and interviews was the difficulty of navigating the former website. On a desktop, users would have to locate the small hamburger menu icon and only then could they access the navigation menu. On mobile screens, many clickable elements were very small for touch and even hard to see for many users.
Based on Google Analytics, there was a high bounce rate from the home page alone, because users didn’t know where to go from there. When they did click around the website, they often returned to the homepage because they couldn’t navigate easily from subpages to other parts of the website.
Ideation and Initial Wireframes
From an accessibility standpoint, as well as a design best practice perspective, I brainstormed layouts with much bigger buttons, text, and clickable elements. I used the old brand style color palette to create higher contrast text color choices for more visual accessibility.
I designed a navigation bar with the pages that users mentioned wanting easier access to. This accompanies an improved footer navigation as well, so that users always have a guide for where they should head next. I ensured there were clear CTAs and information throughout each page layout as well.
Internal User Testing and Research
We showcased these wireframes to several teams internally at NCUIH to receive some more feedback on the direction of the website redesign. The communications team loved the clean layout and visuals, as they were more pleasing to the eye. The research team loved seeing links to KRC and resource pages get more visible. VPs at the organization could begin to see the opportunities to better serve beneficiaries through improved design.
Following presenting these initial wireframes, we presented them to a web development agency to better communicate the look and feel and problems we were trying to solve for our users.
Information Architecture
User Research
We surveyed users to learn more about the pages they visit most and opinions on reorganizing the website. There was positive feedback, but these user responses were long time partner organizations already familiar with the website. If I were to go back and do something differently, I would have preferred a card sorting research approach, to better understand how users would organize information.
To gather more information, we interviewed NCUIH employees, who frequently use the website for compiling and sharing resources for users. We leaned on group and one on one interviews, which revealed more information and deeper insights.
Our sitemapping tool, Rarchy, provided excellent insight as well. With a crawl feature, Rarchy can automatically map out your current website. The result was a home page with about 1000 pages under it, all at the same level. The lack of hierarchy gave us the information we needed to design an improved site architecture.
Sitemapping Phase
Rarchy allowed us to build new sitemap possibilities. Compiling the information we gathered in the user research phase, we set out to design a sitemap with a hierarchy, and organized in a way that made sense to users.
The parent pages ended up representing each department internally, with the various resources available to users nested under each tab. When presenting sitemaps internally, we made edits, shifting subpages under different parent pages to better organize the information.
End Result
As the UX designer on this project, I focused on research, ideation, and design. I sourced a web development agency for the production phase of the website, and collaborated with them to continuously improve on designs. Through this partnership, the website launched after several months.
Now, NCUIH can better serve their beneficiaries with a website that is modern and visually appealing. Users can easily find the resources they are looking for, leading to increase time spent on the page and less web traffic drop-offs. The Communications team can easily update the WordPress website without having to code every update themselves, making for a website that can grow with the organization and communities they serve.