Triangle UX Professionals Association: Content Archive
Role: UI Designer
Research (stakeholder interviews and usability testing)
Design (site UI, writing, and branding kit)
Prototyping (basic flow and interactions)
Team: Robin Gao, Kaitlyn Underwood, Mason Ward, Elly Yu
Timeline: March - June 2024 (4 months)
Discovery and Planning
In 2024, the board of the Triangle UX Professionals Association offered a multipronged design project to organization members. Instead of designing for external clients as organization members normally do, this time, the client was the organization itself — we needed a website revamp.
The board approached my team with the challenge to conceptualize a feature for users to easily organize and access older content, connect with other UX professionals, and ultimately promote TriUXPA membership.
To begin the ideation process, we had to glean insights from not only the board but also organization members and those of similar UX organizations. Our diversified stakeholder interview list (as well as inspiration collage) helped expose us to the wants and needs of audiences with varying levels of membership and UX experience — just like the makeup of our organization overall.
Here are a few highlights from our initial stakeholder interviews:
TriUXPA board member: Advocates for differentiated access levels (e.g., members vs. board members).
TriUXPA volunteer: Recommends highlighting events and providing asynchronous access.
UXPA International board member: Discusses diversified content (e.g., member highlights, corporate testimonials, etc.) to help communicate organization's value
Brainstorming and Defining
We were ready to synthesize our research into user artifacts, including two key personas: Student Eleanor Smith and Board Member William Blanc. These two users embody the heart of the solution we wish to create — a content library that engages prospective members and UX beginners while also communicating the organization's business value.
This is also when we built a concrete game plan for our low fidelity designs by setting our guiding How-Might-We questions and answering with We-Can-By statements.
How might we…
Cater content for diverse interests and users?
Organize different types of visual files on the site?
Convey the value of joining or supporting TriUXPA?
We can by…
Designating different "genres" of content through tags.
Establishing strong visual hierarchy to separate content.
Offering content preview for prospective members.
Iterating and Raising Fidelity
We had to strategically converge our four separate designs as we approached higher fidelity. To do so, we developed a list of unique design components across our wireframes and voted on which to keep, using insights from our initial stakeholder interviews.
The result? A concise and well-blended list of MVPs to guide our next iteration:
Filter tool
Sharing tool
Content tags
Preview feature for non-members to view member content
Mid fidelity version no. 1 in hand, we reconvened with our stakeholders for their feedback. We learned that while we were on the right track, there were areas we could simplify or redo for visual clarity, like using view-all buttons vs. continuous loading and content teaser icons.
The insights gathered from this touch point and our North Star MVP list helped us prepare mid fidelity version no. 2 — the subject of our usability tests.
Usability Testing
We tested with users beyond our usual stakeholders contact list, as these users would be experiencing the content library design for the first time and provide new lenses for our creative process.
We also included a stakeholder who has been involved in our previous interviews but does not participate in TriUXPA directly for their outsider perspective.
What did we find from our tests?
Users LOVED using the tags and relied on them to navigate the content-heavy archive. However, we needed to make the tags easier to use and filter through, so they work as intended.
Moreover, users were also interested in the upload process as an opportunity to participate as organization members.
Reiterating and Prepping for Hand-Off
With these new guidelines, we were ready to make final modifications to our prototype and prepare for hand-off. The end of this 15-week, 5-sprint design challenge was fast approaching.
To tie things off nicely on this design, we put together a branding and UI kit for the board to enjoy. This color palette, typeface, and set of UI elements were compiled to augment existing branding and align with color contrast accessibility standards.
And behold… our final high fidelity prototype. Click here to play around on Figma.
This version features not only the streamlined content archive, but also a refreshed content upload process and new tags designated for members, prospective members, and UX beginners or students. Many thanks to our stakeholders for their continuous support!
Retrospective
As young designers, we gained much valuable experience moving from start to finish on this sprint. Most importantly, our team learned how to better communicate our work to clients and stakeholders throughout our Agile design process. This strengthened an essential ability as UX professionals to demonstrate the “what” as well as the “why” in our decision-making.
Of course, developing the content archive system from scratch was also a nice addition to my growing portfolio, and I'm happy to have met awesome, creative colleagues during this design challenge. After all — if the insights gleaned from this project didn't make it clear enough — that's what this organization is about!