UX design of site for stakeholders and members
Design Summary
We collaborated with Belmont Icehouse on a project to design a site for Tarrant County Public Health’s Infant Health network. Our role was to bring our UX expertise by designing the site flows, site map and wireframes for the website. Following visual branding by Belmont, we developed the site in WordPress.
Design Process
Discovery
My work on this project began with a discovery phase coordinated by our marketing partner. With the client based in Fort Worth, we hosted a Zoom meeting to introduce our team, review the project, and uncover what content needed to be included.
The client had a basic site on Weebly and wanted the new site to be a center for health information for women, men, and future parents. It also needed a password protected section for stakeholders to access. The final site would be built using WordPress as a CMS, and our goal was to allow the client the ability to add content easily after launch.
We were working on a tight timeline, and the site had to be completed within two months from start to finish.
User Flows
Once we had a clear idea of the requirements and constraints on the project, we began designing the user task flows for the site. There were three primary audiences. To understand these needs, our team conducted third-party research on demographics in Tarrant County. We weren’t able to talk directly to patients due to budget constraints, so this research gave us a clearer idea of the people who would use the site without making assumptions. As a team, we whiteboarded our idea for the task flows, then digitized the asset for client review.
Information Architecture
All of the content would be provided by the client, and we wanted to make sure it would be organized in a way that could not only be found by the end user, but also managed by the stakeholder. I decided that primary content — health articles for men, women, and parents — should be built as WordPress posts and organized using categories and tags. Evergreen content, including information about the organization and stakeholders would be pages.
I notated that the site would also be directly translated into Spanish in my architecture.
Team Ideation
Before designing, I scheduled an ideation session with the rest of my team, both designers and developers, to talk through my initial ideas. We sketched out ideas on a whiteboard and worked through how layouts would translate into the needed WordPress templates.
UX Wireframes
Now that I had a clear idea of the templates and how best to handle the layouts, I digitized my wireframe concepts in Balsamiq mockups. Our budget was limited to 5 wireframe designs, of which 3 mockups would be designed by our partner as well as a component library. I designed a landing page template, post, post archive, page, and a mobile version of each.
IHN wireframes
Client Iteration
Following feedback from the client, I revised the wireframes. Client feedback was minimal. I found I had to explain how the WordPress CMS would be used to organize posts for display.
Then I redlined the wireframes so they could be delivered to both the developer and the visual designer. My instructions had to be clear so everyone could work quickly. The developer started building the layouts before the visual design was completed in order to stay on schedule. I made sure to stay in contact with the developer throughout to answer questions.
