It only takes 1/10 of a second for people to make a snap judgment, according to a research and experiments by Princeton researchers. Which means, with just 50 milliseconds (ms), a potential customer or user will form an opinion about your product, no matter it is an mobile app or a website or a physical product, and that judgement determines whether they’ll stay or move away.
There is another research shows, that people form their first impression within 7 seconds. Their brains make quick computations during the first seven seconds, and based on that they decide whether the subject is likable, trustworthy, and competent.
Which means, it is mostly about visual communication; and this communication has a stop watch which is clicking. It is a racing of time. As a designer, we have to catch audience’s eyes within the 0.05 second, and then communicate our product value to the customers within the first 7 seconds. It is a racing gaming, a battle of psychology and visual communication, yet many company actually have failed.
When I started to work on the Neato Robotics company website, I started from evaluating our existing site, checking our web analytics data and discussing marketing strategies with the marketing team. With millions of dollars of advertisement spent, our official website has attracted about 5000 daily visitors, mostly are new potential customers, which is not a bad number. However, our conversion rate was so embarrassing low that only 0.48% visitors made a purchase. Our own website actually is a very important sales channel. Any product company nowadays would agree, e-commerce platforms like Amazon are charging too much of product sales cut, which make all the product companies are living in very small margin and are hurting the company financial situation. That is why every product company is trying their best to attract customers to make purchase at their own website. So, our end goal for this project, is to increase conversion rate, get more sales. In simple words, make more money. In order to achieve that goal, I also defined this website strategy will be: Product focused; visual enhanced, and data driven.
1. Product focused
Our marketing lead think the most important thing is branding. Yes, it is, but how do people form your brand image? People perceive brand value through your product. When Apple launched its own clothing line back in 1986 and was selling T-shirts, sweatshirts and sweatpants, jackets and rugby shirts… What brand images did customers perceive at that time? It was only after Jobs returned and released the iPod, the Apple brand was re-built and even upgraded to a new level. Customers got attracted by the ads we placed at different channel, and come to our website, what are they looking for? What are we trying to sell?
2. Visual enhanced
As we explained at the beginning, it is a racing game and we have to catch people’s eyes at the first glance, so visual will be the quickest way to catching visitors’ eyes and communicate our product values. Good visual would have already deliver the message to the customer that our product is good quality, and gain trust in the brand; properly organized visual would have already quickly told people what we are offering, what make us better.
3. Data driven
The best way to convince people is data. Data does not lie, data makes people feel more trustworthy. Show the data in a quick and simple way, instead of procrastinated, and long-winded marketing words. That shall give people confidence to make purchase.
With these strategies in mind, I decided my execution plan, which is Attract, Aware, Accept, and Action.
1. The first of the first
The first step is to draw visitor’s attention at their first glance, so we can keep them stay with us for next. Which also means, the first screen of the homepage is the most important thing. Neato’s existing website, there was a short video at the first screen of homepage. There were too many elements in it. Family members plus a dog in a nice kitchen. However, barely anyone can notice, a vacuum robot is cleaning under the shadow of the table, which, actually, should have been our main character. There were also many other unnecessary elements keep floating on the screen, which is extremely annoying, especially for the mobile version of the website. E.g. the accessibility icon and the help icon, and the pop up window asking people to allow cookies…
Attract: In my design, the first screen will also be a short video, but it is a big robot on the screen, very nice rendered, showing the details of product quality, the fine craft, material, and surface finishing, all showing the quality of this product.
Aware: The brush is spinning, with floor moves and all types of dusts, dog hair, etc. come towards, be perfectly sucked into the robots, which tells the audience the vacuum function of the product; when cable cords, socks moves towards the robots, they will be perfectly moved around the robot; which also tells the audience the newest technology our robot has been equipped which is object recognition and avoidance.
The floor and the whole background will be white with reflections, which also subconsciously delivers the message of “clean” to the visitors.
Accept: On top of these, there are some data numbers showing: >99.97% allergens capturing; 0.3 microns fine dust particles filtering; 2700 square feet one charge coverage; 300 minutes one charge run. With these data, tells the customers the capabilities and the factors they cares about, as well as what differences Neato from other competitors. Number brings more trust, further push customers to accept this product from their heart.
Action: Simplified those many buttons into one action button, to quickly urge people to take action. Too many action buttons at existing website may distract people away, a simple one button in the right center, will urge people even more likely to click it and finish purchase.
2. Enhance the message
With customers past the first 1/10 second and 7 seconds racing, now they have already gain the initial impression, then it is time we can continue enhance the message, to deliver more information about the product. Especially for those rational customers, instead of emotional customers, it is time to tell them more detailed info, but yet, we still need to keep it simple, and right at the key points; we still need to keep communicating the key tone we have already set, to provide consistent experience.
When users keep scrolling down at the homepage, every scroll will automatically anchor to the next full screen, instead of stuck in the middle, which give better impression. User will be seeing our product lines in the market, great quality product images, simple line and key points of product selling points, simple action button.
When users continue scrolling, they will see a visualized product feature comparison chart, for users to compare and make decision. After that, a screen of mobile app features and our services and warrantees to further enhance customers’ confidence in making the purchase.
3. Keep telling the story, visually
For the product page, instead of boring product sales, I designed a visual story board, a customer start from setting up the robot, robot departure from the base, start scanning the floor, start vacuuming, picking up the dusts. Using the animation showing the robot mechanism work in process; while cleaning, the fragrance pot carried will emit good aromas and brings good smells; after the cleaning job is done, the robot return to the base and start self-extraction the dust from robot bin to the cleaning center tank; users will only need to empty the clean center dust bag once a month, and say goodbye to allergens.
Visual is a more efficient way to communicate, so for these pages, I will save my words, and just posting images as below.
4. Add a small pitch
Why Neato page give us a chance a chance to further pitch to our customers and tells our selling points, what differentiate us and what make our product premium.
Again, strong visual, simple wording with key bullet points.
5. Simplified shop page and upgrade sales
The shop page has also be simplified, especially if you compare to existing version, which was too much useless yet empty wording (which no one will actually read), use visual languages, use metaphors, with simplified check out process, to make users’ purchase more smoothly.
Continue using visual stories to tell the accessories features and their unique points, e.g. the differences among different brushes.
If user choose a robot, there will also be cross sales for them to pick accessory supplies or bundle sales; if user choose a lower model, there will be a upgrade sales to advise them pick an advance model.
6. Personalization and future engagement
I designed a garage page, which, after user login, we will visually showing their accessories’ usages, automatically suggest replacement or subscription model. Using a product explosion view, users will be easily to identify each parts, components, and related product life cycle.
I further proposed a community, so Neato users can share DIY knowledge, provide product feedback and innovative ideas. It will enhance our customer loyalty, collect more product complains and innovative ideas, which will also reduce our customer service workload, and benefit the product development team.
It is a big project, and a long story, but here, I just keep it short, and leave more visual presentations. The company has an outside agency working on the product animation and visual mock up, so I just provided all the web strategy, planning, product design and wireframes. Not like other designers, I seldom use placeholders, I will also define the actual content through my wireframes. Because content itself is also an important part of communication and user experience.