Lead Agency: Revel
Role: UX/UI Direction – Art Direction
Apps: Sketch, Photoshop, Illustrator, Indesign
Funko, the makers of pop culture merchandise such as POP! figures, needed to migrate their e-commerce platform from the limitations of Shopify to solution that works better with their goals of having a platform that perform as a complete site and work well with their shipping/distribution technology. I also needed to develop a plan for how the products were going to be displayed in the site on the new platform. They also needed to bring their brand identity with them along the way. Their criteria was pretty simple, make a better experience.
The Customers:
The target audience was reflective of a few groups, avid collectors and a growing single purchaser group. Over half of the purchasers (55%) were female and that group was growing. Additonally, 80% of the traffic of the site comes from mobile. A customer who purchased something on the site was also 4x more likely to return and spend an increase of 75% more on their next purchase than their first by buying more POP!, bigger items or collections. Yep, they are that addictive.
The traits of the avid collector were pretty interesting. By working with a UX researcher and gathering info through interviews, forum surfing and visits to sites like ECCC (Emerald City Comic Con) and various retailers through out the region, patterns were emerging about their traits. Collectors where fanatical about details, order and presentation of their POP! collections. Many times, the figurings would never leave the box. In homes, they are always displayed on shelves or horizontal stacks with great care for keeping collections together. Unboxing videos also showed a lot of insight into personality traits, measured pleasure came from pulling the POP! from the box. Likely, that’s the only time it would ever come out of them.
Here’s an example of a collection from the internet:
The second group, the single purchaser, would probably pick up a POP! for something they like that follows a theme, like a specific Disney, Marvel or Star Wars character. Because of the increase with availability with major retailers like Toys ‘R Us and Hot Topic, this was becoming more common. They were more likely to follow impulse shopping traits which made it more important to follow the mores of sites that they were already shopping on. What is important for this customer is the ability to filter out the things they do not want and go directly to things that they do, so searching for key phrases was really important.
Given the goals and this was going to be part of a larger platform migration, it was a good time for a little affinity mapping to get a wholistic picture of the future site and features that might play a part in each section. This was done a few times to hone the larger ideas.
I took all of this information and began a series of wires to explore the display and types of information that needed to be shown. I’m showing desktop layouts to demonstrate the content on the page. Mobile versions were also created for all of these.
| Concept 1: A great place to get the business goals aligned. This was presented company-wide and opened the door to alignment of offerings and the limitations of the current tracking/distribution technology. It was a great conversation! | Concept 2: Great ideas for consolidating the current offerings of the store into an architecture that can grow. Also, with deeper research into the customer’s mindset, more marginal space around the product enables better focus. | Concept 3: The last concept that pays homage to the shop and collector experience. The products are displayed using the entire screen width and continuing off the viewport. I also included real products in the space to test for image size and product titles. These would also need to be optimized for mobile. |
 |  |  |
Before going any further, There needed to be a plan for the output of assets. The new store was going to require being live on both desktop and mobile. The display of the products is very important. The current shop had images of both the box and the product inside it. They had odd shapes to accommodate the variety of product shapes and quantities available in the box. I did a test to develop a good system that would work on both platforms. Finally, I settled on a square with a generous margin and single images of parts of a product set.
Next was the product category landing page, product display pages, and search. For a lot of customers, these will act as the repository of all information about the product such as run, where it was released (limited edition Comic Con version), and even the mold number.
Now lets look at this in the larger perspective. There are a lot of pages/views to which a customer will visit these pages. Sometimes shared, sometimes searched, sometimes from a promotion. This needed to be expanded out to the product section and a plan of hierarchy created for it. I did a quick architecture for this to get started and use it as a tool to explain the page layouts. These pages are taken from the presentation.
The new platform was going to provide a space to make an entirely new site. These products needed to be accessed at a lot of pages and ultimately drive to a product detail page and collect metrics on sessions. The way that I do that is by developing a content hierarchy that allows tracking from a point of entry to where they either convert or fall off. To do that, I take the purchase experience across all of the pages and have content reflect where they are in the purchase process.
Content is displayed on the pages with the intent to follow the funnel vertically down the page. Throughout the page, there are CTAs that take you deeper into the site. The page that they go to will have content that weighs heavily on the position they are in the funnel.
These pages weigh heavily on content that supports research and familiarity with products.
These pages are created with intention to move to a final PDP page or themed section in the shop.
Finally, here’s some fun with some design examples for these pages.
Category Landing Page
Shop Landing Page
A couple of versions of the Home Page. BTW, I created the background for the Star Wars header in Illustrator.
Home Page 1
Home Page 2
And I made there marketing dept a nice styleguide.
