AndyDunmire.com

Online Portfolio Redesign

Background

Andy 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

• Establish 5-second results as a top designer
• Align with rebranded fonts, colors, and patterns while brightening up the overall aesthetics
• Provide details about my decision making through artifacts like post-it notes, research findings, and sketches
  
• Introduce more engaging imagery such as mockups with devices ​

Original Website

This version of the website focused more on myself as a person than a designer. In fact my design project were halfway down the page and weren't recognizable as links for more details.

Sample of the variety of projects and artifacts to represent

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. 

Final Execution

Product mockups with a variety of devices

Full project details, including artifacts

Added dimension, movement and perspective