Enjoy Wishlist

tags: interaction,  identity/illustration,  information

 

 

I have worked on a variety of web & information design projects for Wishlist. Wishlist’s main business is to provide companies a way to reward their employees with meaningful gifts of experiences (although individuals can also purchase gifts for each other). This could be anything from a weekend getaway, skydiving lessons, to wine-tasting, to a yoga class. They are based in Boulder, Colorado.

 

More Examples

wishlist_final

Wishlist had a strong brand identity created from another designer, but they had some issues with their landing page that they asked me to improve. For instance, they had a high bounce rate, found that it was was not informative enough, and wanted to make it more user-friendly. They liked the special transitions on their website (pages flow horizontally through buttons clicks), but wanted to find a middle ground between functional and novel. For this project I only re-designed the landing page, they wanted use the same internal structure.

First, I had them describe the problems they saw and discuss what they wanted to see and why (I was already familiar with their brand & company).  Then, gave them my assessment of where I felt like the landing page fell short in terms of usability or conveying Wishlist’s message. I ended up completing two designs for AB testing: the first was a more structured web page that was directed from the client’s desires. The second was one that I  visually directed based on enforcing their aesthetic through user experience.

My major concern their old landing page didn’t communication enough about Wishlist and their service. It had a confusing image of a Denver landmark as is main photo and didn’t give viewers a sense of what Wishlist does. Finding information about Wishlist was not as intuitive as I thought it could be. For example, the menu items were hidden on page load, only accessible by clicking a button at the bottom of the screen. I believed that having the menu items visible on landing would give users a better sense of the company more quickly (and a scope of the website’s content).

wishlist_oldwebsite

Initial wireframes with the new content we wanted to include:

wishlist_initialwireframes

1. Menu items on screen load, an addition to the bottom menu that can be accessed at all times.
2. More descriptive text that still maintained the company’s voice
3. A clear description on the process, emphasizing how easy it is
4. A sneak peak at the kinds of Wishlists there are to choose from
5. An alternative concept that worked more with their horizontal navigation

 

We first developed the more structured version:

wishlist_midwireframes

This went through several rounds of iterations until we finally created the one to use during the AB testing:

wishlist_alt

 

I am very fortunate enough to have a strong relationship with Wishlist and was able to voice my own opinion that, while functional and understandable, I didn’t think the design of this webpage reflected Wishlist’s voice. Wade & Andreas were kind enough to let me experiment with my own idea. My final design played off of the whimsy of their asymmetric image from before (the Denver landmark) combined with a play off of their geometric logo for a more interesting composition and enjoyable navigation for users as they learn about Wishlist.

wishlist_finalshover

In the last, red triangle, different Wishlists would be displayed at page load.

They were extremely please it personally and it was well received good feedback from their users and clients.

wellnessgif

Wishlist created a very successful wellness program (called “Wellness by Wishlist”) that grew from an add-on to a major part of their business. So successful,  in fact, that it has it’s own logo and different (though complimentary) branding (which I helped develop). After acquiring a very large client, it became urgent that they have a way for new participants to learn about the program in more detail. We are in the process of creating a new website specifically to talk about this program.

Their major concerns were:

  • Having a web solution that could edit & update themselves
  • They need a simple website now, but one that is scaleable for future growth
  • They had an extremely tight timeline! (Don’t they all?)

 

I advised them to use WordPress, a content management system that I’m very familiar with. I believe it’s extremely versatile and easy to maintain. In the interest of their time and budget, I found a template that they could customize to their needs. When looking for a template, I’m very particular about how it functions since making visual changes is easier than structural changes. For example, I am always concerned with navigation, flexibility of content options, and user support (especial for clients).

After finding a theme I wanted to use, I created a framework for them to customize it themselves so that it would be cohesive with their main brand.

In-progress Design:

Cover:

wellnesshomepage

Pages (single-page scroll):

wellnessweb

Note: This website is not live (yet) as it is in the process of being built. Logos used are for placement only and are not Wishlist clients.

My earliest work with Wishlist was created information pieces for them when they needed to translate the digital design of their website into other materials. How would their brand look in print? During this process I was able to help them create a toolbox of imagery and structures to draw from as a companyThis work has included the creation of new images, communication planning, information design, and copywriting.

‘One-pager’: Quick information on Wishlist to give to potential clients about who they are, what they do, and why it’s important:

Wishlist-Intro_v3

Wellness by Wishlist media kit: Multi-page digital document/presentation that provides detailed information for business about the Wellness program.

This was a very fun project for me. I enjoyed organizing the flow of the information and story.

wl_0003_mediakit_1

wl_0004_mediakit_2

wl_0002_mediakit_4

wl_0005_mediakit_3

wl_0001_mediakit_5

 

wl_0000_mediakit_6

← BACK