This phase of the project requires two parts. One understand the needs of the client, and how they are currently meeting those needs, or where they are falling short. This results in a multipage creative brief with a list of technical and strategic requirements.
Step 2 // Information architecture
With an existing site map & a long list of new feature requests, I went thru the process of affinity mapping to build a navigation tree & page structure that included everything. EVERY. THING. Then reviewed this structure internally and then with client group.
Step 3 // Wireframes
We were building this site out in WordPress. As such, one of the technical requirements was to find opportunities to templatize similar types of data. After the basic templates and one-off pages were mocked up. We reviewed them internally and with the client as well.
Step 4 // High Fidelity Mockups
One of the the most important parts of our strategy was to demonstrate the vibrant nature and beauty of our community and location in Salt Lake County. The art needed to be functional & balance the needs of the community & the convenience of the new donation workflow we were building. We showed a single high fidelity mock to the client for approval. They only had one question. “when can we have it?”
The project was a success, the clients thrilled, and reports of happy users made their way back to us during volunteer events.
There is definitely room for better user centered practice. We were fortunate that we had a large group of people to test with internally. We were more fortunate that the client had several volunteers & donors sponsoring the project to test with. But there was a level of ambiguity and associated stress around rolling this project out without testing it with users first. We found ourselves asking permission based on the relationship of trust we had built with the client. They trusted us to be experts, but we really didn’t have any evidence to demonstrate the designs validity had they questioned our proposed designs.
We pushed the art direction to a very vibrant but legible place. One of the benefits of working the usability out in wireframes, is that it frees you up to be a little more creative.