MY ROLE
UI Designer | Visual Designer | Client Communicator | Primary Note-Taker
PROJECT TYPE
Website | Developer Handoff
CLIENT
The Arc of The DFW Area
TIMELINE
10.5 Weeks, 2024
.png)
The Problem
"I'm just not sure what to do."
The Arc of the DFW area's website suffered from low information discoverability, with users frequently contacting the organization directly for assistance. This high volume of direct inquiries created an administrative burden for the organization and often led to abandoned user tasks.
Challenges
Due to the project's tight deadline, we prioritized key phases of the UX design process, focusing on qualitative research, information architecture, wire-framing, and prototyping. While a full UX cycle typically includes more extensive research, analysis, and post-launch testing, this approach allowed us to develop a user-centered design within the given constraints.
Research
Heuristic Analysis
To further understand the user pain points, I conducted an initial heuristic analysis and site audit review of the current website, highlighting potential key areas for improvement.
Heuristic Analysis | Note-Taken observations of content on website & potential solutions
Process
Information Architecture
I helped develop and revise the new information architectures based on the feedback from our research. We created two variations based on our client's request: A story bank combined with the current information hub format or simplifying it down yet still keeping some aspects of both.
Version 1 Information Architecture | Info Hub + Story bank
Version 2 Information Architecture |
Simplified version with still aspects of both
Sketch Iterations
After finalizing the Information Architecture, each team member focused on portions of the website pages and creating low-fidelity wireframe sketches. We then cut out the wireframes physically, iterating and combining elements we found most effective.
Cut Out Workshop | Combining low fidelity wireframes
Whiteboard Workshop
For the next two days we conducted a whiteboard workshop based on the previous iterative sketches, re-drawing and ideating based off what was combined to finalize the layout.
Whiteboard Workshop | Low fidelity white board sketches of finalized screen layouts
Prototyping
Translating Wireframes to Designs and Prototypes
I developed wireframes for the "Get Involved" and "volunteer sign-up" calendar pages of the website, with my focus being on presenting the various ways individuals can engage with the organization such as through events and volunteering.
Mid-fidelity Wireframes | Get Involved and Calendar Screens
High fidelity Wireframes | Desktop Finalized screen layouts
High Fidelity Mockup | Mobile Version
UI Style Guide | Visual mood board displaying general visual system
UI Component Library (Desktop & mobile) | Assets for page headers, FAQs, Infographics and more
Reflection
Working in such a large team with other UX designers was incredibly beneficial; it not only streamlined our process but also allowed me to share my own experiences, especially concerning UI design. I specifically focused on ensuring WCAG standards were met and checking for clear color contrast. Realistically, with more time and a larger team, we could have integrated user testing directly into the design phase. Moving forward, I plan to outline a more in-depth milestone and calendar that specifically accounts for the opportunity to work with potential users.
Reflection
Working in such a large team with other UX designers was incredibly beneficial; it not only streamlined our process but also allowed me to share my own experiences, especially concerning UI design. I specifically focused on ensuring WCAG standards were met and checking for clear color contrast. Realistically, with more time and a larger team, we could have integrated user testing directly into the design phase. Moving forward, I plan to outline a more in-depth milestone and calendar that specifically accounts for the opportunity to work with potential users.
