Creating an engaging setup guide for new online store owners: Camp Kong.
MY ROLE: PROTOTYPING, UX & UI DESIGN, TEAM LEADER
Kong is an eCommerce platform that allows you to create a professional, easy to use online store for free. It has powerful features like accurate shipping profiles, customisable themes and advanced personal support.
To educate new Kong users on the basics of setting up their store, in a fun and engaging format, that can be treated as a standalone brand piece with it’s own visual style. We had a couple of previous versions of set up guides and aimed to take our knowledge from them and implement new strategies of introducing concepts to users. The guide needed to increase engagement and ‘stickiness’ of the product, so a measuring point needed to be identified also.
Interaction design played the largest role in communicating user states and was a challenge we hadn't mastered before.
We wanted to involve gamification in the guide, knowing that it increases user engagement and encourages a sense of achievement and investment in the product. By creating something users would be proud to share socially, we aimed to, in turn, increase awareness of Kong. We knew we wanted to have ‘badges’ that store owners ‘collected’ as they made their way through the tasks. As we knew from previous experience that not all users have all their products or information ready right away, we decided not to restrict the steps to a linear order; they could be navigated to or from and completed when ready. To entice users to complete the entire guide, we created a ‘locked’ final level that revealed access to a “Launch My Store” button on their Dashboard.
One of the major issues we’d had previously was store owners ‘opening’ their stores without a genuine payment gateway, which meant their customers could place an order, believing it had been legitimate, whilst the store actually had no method to accept payment, due to the system structure. A review of the payment settings area revealed some backend development needed to be tweaked before we could implement the payment task of the guide, meaning users wouldn’t find themselves taking orders without taking payment.
Visually, the guide required it’s own style, based on Kong’s newly extended colour palette, which accommodated a broader range of tones. To consolidate the piece together we introduced the theme of a Field Guide – an adventure of learning, identifying and achievement at Camp Kong. As the guide wasn’t a compulsory, it shouldn’t intrude on the user’s interaction, so we used an overlaid ‘pull tab’ design that could be expanded or minimized over any page when needed.
By creating something users would be proud to share socially, we aimed to, in turn, increase awareness of Kong.
Interaction design played the largest role in communicating user states and was a challenge we hadn’t tackled much before. Animation was responsible for implying navigation movement, success messages or states and the ability to show or hide the tab layout. I briefed the developer on the desired movement, based on my knowledge of CSS transformations. The outcome was a set of simple, yet delightful animations for each completed task. It enhanced the UI design by reinforcing the action of each element.
The overall aesthetics of the Field Guide has pushed the brand’s style forward, which was needed after over a year of similar graphics, whilst still feeling aligned to the existing design.