Tippy Top

The tippy top banner was a small banner above the navigation on LivingDirect.com. The Tippy Top showed LivingDirect’s network of brands and some of the features they offer, like free shipping and loyalty programs.

The original tippy top banner experience had a few issues. The banner functioned as a pop up which covered the content of the page. Also, the banner only featured a list of features without any links or calls to action.

Tasked with creating a more robust and personal experience, I mocked up 3 solutions in Adobe Illustrator. When creating mockups I tend to sketch a few broad ideas and then take those ideas into Photoshop to add detail. This allows me to understand the experience as a user as soon as possible.

The first alternative uses a pop-up as well, but utilizes slides instead. This creates more visual space and room for explanation for each feature, but allows the user to take in the information one piece at a time.

The second solution is similar to the first, but it utilizes tabs instead of a slide show, allowing the user to select which feature they want to learn more about. 

The third solution keeps the tabs from the second, but the entire experience is moved to the top of the page and expands so that no content is covered, and the user can open or close it as they please. 

After meeting with my team, we decided to implement the third solution, as it solved every problem that the original had. We made some tweaks, and I took those and created an interactive mockup of the experience in InVision.

After that was approved, I passed my work off to a developer who then worked with me and my design to make sure that the final result was what I had intended. In addition to the design, we worked together to make sure it had the ability to adapt to other brands. This was my first real-world application of user experience design and I really enjoyed the problem solving aspect of this project.