Mockup Design Demo Tool

My Role: Design, Development, Strategy

Internal Tool for Presentating of Static Mockups to Clients

Problem: Clunky method for reviewing mockups

At iMarket, each new design gets 4 static mockups: homepage, subpage, fixed header, hover states. We present each mockup in their own URL as a background image, so they open in the browser. That means, for clients to review their design, they would get 4 separate links that open in 4 separate browser tabs. We were missing an opportunity to show our professionalism.

Solution: A package of mockups with an interface

I consolidated the mockups so every project would have 1 main link as a home-base and added footer navigation to give clients more control to review their designs.

Problem: Repeated talking points

A classic case of cutting repetition, I noticed that the Project Manager was re-explaining certain points for every client, such as;

Solution: Link explanations

I added the broad phrases to an intro page and added a description on each mockup styled as a tool-tip.

Problem: Giving design feedback is hard

Clients are put into a place where they might not know how to best express themselves. This might be their first situation having to discuss design. The better we understand their vision, the the better we can design it. We’re shooting for hand-holding here, not pulling teeth.

Solution: Tips for effective feedback

I added suggestions for offering design feedback to the intro page. As part of the mockup’s home-base, the user will see these tips as soon as the mockup loads.

This was fairly small project on my end, but the result was phenomenal. We received almost immediate positive feedback from the project managers and the clients.

See codepen of sample