Growing an active community of users for a luxury retail startup.
Information architecture • User research • Interaction design • Prototyping + testing
Wilderooms.com was a London-based retail startup offering a new way to shop for clothes. Users can select any item online, and have it sent to a luxury changing room for them to try on at their convenience. With the first Wilde Room opening in a few months, our client needed to grow their user base ready for launch. They didn’t just want signups; they asked us to help create an active community of users creating collections of clothes ready to try on.
A redesigned WildeRooms.com home page, that explained the new retail concept in ways that appealed to many users, whether short on time or looking for in depth information. A new product tour showed users how to WildeRoom before they signed up, and a smooth journey from registration to installation helped them get started with the service.
2 1/2 weeks
Julia Shaer, Yann Schaub, Emily O'Byrne
Current site review and content audit, competitive analysis, survey design and distribution, task analysis and user flows, sketching, wireframing and annotations, site map and navigation schema, usability testing, pitch writing, specification document.
InVision prototype http://invis.io/R82Z0NECS
Wilderooms.com offers a new way of shopping that brings together the best of the online and in-store experience. Using the Wilde Rooms browser button, people can choose clothes from any online store and have them sent to a Wilde Room to try on in comfort and privacy. Wilde Rooms take care of all the ordering, delivery and returns. The first Wilde Room is set to launch in autumn 2015.
Wilde Rooms asked us to create a new onboarding experience, to help people understand this new approach to shopping and get them started using the Wilde Rooms button. We began with a review of Wilderooms.com, testing out the current onboarding experience. This helped us get to know the service, and highlighted several areas for improvement.
The explanations were difficult to follow and the sign up flow sent new users away from the site as soon as they registered. The Wilde Rooms button was hard to install, especially on tablets and smartphones, and there was no way to try it out before signing up. There was also no mention that a Wilde Room wasn’t yet available, leading to disappointment at the end of an arduous set up process.
To create a better experience for users, we needed to get to know our target market. We distributed a survey via social media and to people in our own networks who fitted the affluent but time-poor profile of the Wilde Rooms customer. The survey, plus follow up interviews, helped us to identify potential selling points based on what was important to different users, such as concerns over quality and fit, avoiding delivery and returns, and being able to shop in store at a convenient time and without the crowds.
Based on the research, we developed three personas, to represent different user groups:
We also researched potential competitors, focusing on services that offered an alternative to the traditional retail experience. This uncovered a number of patterns in the market, including in-store personal styling and shopping, online stylists, and trunk clubs (where clothes are selected for you and sent on approval). We found during later testing that users tended to apply these existing patterns when interpreting the WildeRooms offering, leading to misunderstandings.
Design and testing
We used all three personas during a Design Studio with the WildeRooms team, to help us generate many different ways to explain the concept and encourage users to sign up. Taking the output of this session we created a paper prototype and began testing, focusing on two questions:
Do people get it? Do they understand what the service is and do they want to sign up?
Can people do it? Do they understand how to install and use the WildeRooms button?
Our first version, based on ideas from the Design Studio, was simple and elegant. We explained how WildeRooms works and mentioned some benefits. This didn’t perform well. People saw a familiar pattern of online shopping, but they were disconcerted by elements that didn’t fit: “Is this online Or in store?…What is this button that keeps being mentioned?…I’m not comfortable joining without finding out more.”
Most of our screens stayed as hand drawn wireframes for a few more iterations. This included the development of a product tour, that allowed users to try out the WildeRooms service before sign up and without installing the button. This illustrated the ‘shop anywhere online’ concept, and helped to explain where the button fitted into the service, paving the way for installing the button later.
Testing copy with digital wireframes
We realised we would need to pay close attention to the home page copy as we evolved the design, which was difficult to do in sketches. We decided to use digital wireframes for the home page almost immediately as it helped us iterate much faster and create legible prototypes for testing.
An HTML prototype
The WildeRooms button is implemented as a browser bookmarklet. Wilde Rooms advised us that this couldn’t be changed for many months, so we needed to make installation as easy as possible.
On a tablet or phone, the browser behaviour is a big factor in the installation process. To test the combination of our content and browser behaviour, we created a simple HTML prototype using JSFiddle.net. This allowed us to test with users on an actual device.
During testing, we realised that simply turning the tablet into landscape mode made the whole process much easier, as it kept the instructions in view throughout. This dealt with the basic issue of cognitive load - users simply couldn’t remember all the steps needed to set up the bookmarklet.
This solution has no effect on a phone, unfortunately. A different approach will be needed here in the long term. Initially this was a relatively low priority for Wilde Rooms, but after we showed videos of users trying to install the button on a phone, they decided to bring forward the quest for a mobile solution.
Building the interactive prototype
As we got closer to a design that worked, we pulled all these features into a single Sketch mockup, using InVision to create a clickable prototype. We continued testing to refine details, like the positioning of the cues in the interactive tour.
We also added images, colours and typography to evoke the stylish yet welcoming feel of the WildeRooms brand. By the end of the project we had a design that explained the concept quickly via a brief overview. Curious users can experience the service via a tour, or read about it in depth.
At every stage, users are offered the chance to sign up, or find out more. The launch date for the first WildeRoom is clearly signposted, to avoid disappointment, and in the meantime users see suggestions for how they can use the service today. The registration flow keeps the user on site all the way through to installing the button, which now uto detects the user’s device and browser for a much shorter installation. The journey continues with a suggestion that they continue by trying the button out on their favourite online stores.
Continuing the journey
In this short project we focused on growing the registered user base, and on getting them started with the WildeRooms button. Other areas of the site could be woven into the signup experience: finding and contacting a stylist, sharing collections with friends and followers, or getting inspiration from WildeRooms editorial. WildeRooms are also considering how to keep users active right up to launch, through email and social media marketing. They are also rethinking their mobile strategy, following the testing videos that we shared with them.
View the prototype on InVision http://invis.io/R82Z0NECS