BackgroundAndy Dunmire is designer who needed an online portfolio that represented the depth and breadth of his 20+ years of experience. His prior site provided good overall narrative to build upon, but during usability testing, the site failed to give users an accurate first impression.
|
Goals
|
Initial Wireframes
I started wireframing by initially blocking out specific sections to tell a logical narrative through a single scrollable page. Instead of building a narrative of myself the person, I wanted to visually show the depth and breadth of my design work on a single page, and without requiring a single click.
|
Because projects ranged from UI pattern libraries to TV-based Hotel systems, I knew I needed to provide clear context for each set of project images. So I explored grouping them as project-specific bands down the page. Each would essentially be a teaser for that work and link to a corresponding case study, which includes; a project overview and goals, artifacts like post-it notes or whiteboard sketches, mockups, research findings, and of course final designs.
|
As I refined the overall outline, I wanted to give the page more energy to make it more engaging as you scroll. I wanted to lead the page with a catchy headline with a bold background photo that provided some depiction about my craft. I wanted that photo to blend into a white background where a series of mockups would seamlessly lead the users eye from one project to another.
|
Once I established the page structure, I explored new visual patterns to best represent all the various aspects of my work. In some cases, projects had dozens of complex screens while others had a few basic screenshots. But regardless of the project, I wanted the work to appear in context as the final user would see it.
|