Poverty Solutions

Project Background

Poverty Solutions, entering its fifth year, is building on the successes of the past, adding additional programming and accompanying marketing materials. Recognizing the initiative’s evolution and growth, and that the resources and information presented should be easy to access by a broad audience, Poverty Solutions needed to refresh their website to evolve the communication of its mission.

The initiative wanted a site that streamlined and branded Poverty Solutions’ communication tools and resources, communicate the value of Poverty Solutions’ outcomes, tell the story of how Poverty Solutions is contributing to the prevention and alleviation of poverty, and drive awareness of Poverty Solutions and its mission.

Beginning the design process

Prior to this point in the process there have been content inventories, initial content strategy planning, and a new site map created. Eventually the concepts were informed by the research, user and audience input, stakeholder discovery, and strategy. Discovery meetings are when I ask questions about their competitors and design preferences/likes. Additionally during this phase, the entire team was heavily engaged to ensure the designs support the goals and take advantage of best practices in usability, design, and accessibility.

Paper

I still start with paper. Notes, sketches, doodles, everthing goes in a notebook. It begins with notes from my questions in the discovery meetings. Design ideas start to pop in. Based on the meetings, a bit a research or following up on sites they may have shared. More notes, more ideas.

Wireframes

Before I get too deep in the design process, there's the matter of what elements go where to best execute their goals. This process is highly collaborative with both the internal team and the stakeholders. I like to use Invision's Freehand tool for this. It allows for realtime collaboration and creation. And for client to move around elements on their own should they be so inspired. What I love about this stage is that the very beginnings of a design system and component library start to emerge. Optimization for mobile is also worked out.

Initial designs

During the wireframing process, I usually start to think that I have a pretty good idea what a version will look like. I start with type studies. For me, it all begins with the typography. I'll try to use actual headlines and copy from the existing site to get a sense of the tone. I'll roughly work out some of hierarchy and type scale at this point as well. Then it's on to reviewing existing assets (photos, infographic, etc.) and moodboarding the overall expression of the imagery. I'm also thinking about contrasting choices for a second version during this portion. Since this is a U-M property, the color palette is set. I do have to think about how strongly it should be applied, what accents should I focus on, and what are the most accessible combinations.

Once I'm satisfied that the typography and imagery have some rules and a look, I start layouts. The wireframes help inform the order in which elements should appear and their importance. The challenge I try to give myself is creating an experience that gives seemless flow from one element to another. I've played music since I was eight years old, so I tend think about design and layouts as having rhythm in a sense. There are beats, stops, parts that speed up or slow down. Does the rhythm makes sense on all screens? If not, how do I optimize or change the design across screens? I'm also checking the design's accessibility.

So, based on all the research, IA, wireframes, and interal feedback I've come to a couple of designs ready to present. The client picks a direction and we move on to refining it and adding more layouts, components, and other visuals.

Refining, additions, and prototyping

This phase, for me, is the most critical part. We're not only fleshing out the rest of the wires, we're thinking about interactions, transitions, and animations. In addition to incorporating feedback, I'm prototyping for mobile and desktop, gathering feedback from the client and the developers.

Throughout the process, I'm advocating for the very best accessible and empathic user experience and design. Accessibility and empathy benefit all.