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;
- “Nothing can be clicked yet”
- “The mockup is in a web browser….. but it will not resize yet”
- “The Fixed Header mockup shows that as you scroll, the header simplifies and sticks to the top of the page.”
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