The Old Home Page
About this Project
Almost every month, I've been asked to create new graphics with different combinations of promotional panels as content above the fold. The requests were always like: "show a lifestyle picture that demonstrate the family with utilities and kids", "show as many as our products in group", "add multiple panels to emphasize specific promotions"... Purpose of these requirements comes from sales generating standpoint, however, the solutions with simply adding things on and on couldn't tell the full story of the company in a convincing way. At the end of 2016, I proposed the idea that we need to reframe the iSmartAlarm home page in order to give consumer a better understanding on our value proposition and what they can get if purchase our product. After evaluating the resource, we decided to start from redesigning the content above the fold as our first step.
The New Structure
The Problems
As we all know the content above the fold is the most important section for a home page since it gives people a quick knowledge of the brand and what they serve, along with the sense of reliability, branding, trend, etc. As we can see below, our website was trying to use colors, pictures, exciting new product or sale announcement as well as product group to give people those knowledge and sense. However, the fact is after we take a look at the content above the fold, even the whole home page, users still get confused by what we actually do and why they need to buy our products. In this case, the bounce rate has been increased. The problem of the current design could be summarized into several points:
Unclear Product Information
Our executive team always require us put the products picture on top of everything, to tell people what we are selling. However, simply display the product in group is too challenging for people to recognize what that is, for we are not selling the product as obvious as phone or TV, which could be easily recognized with common sense, thus, the way we demonstrated our products was unclear and meaningless. After taking look at our home page, people still don't get what we sell and how our product works, let alone which product they should choose.
Bad at Story Telling
We kept using different stock lifestyle images to demonstrate the use case of monitoring home, protecting kids, keeping an eye on the pets, etc. We tried to evoke empathy to the potential customers and relate them into same situation where the home security product is a must buy. However, people nowadays are so used to the fake images and simply using a lifestyle images is too vague to be convincing. More persuasive demonstration is needed in this case.
We have our ads running all the times, and there is no doubt we want to influence the audience make a purchase. The problem was we always want to make all the ads as prominent as possible. We overlapped the ads on the hero image, we made it bold and we used bright colors, as the result, everything merged together in a clutter. People saw the pictures and ads everywhere but they didn't even know which one to click on. Also, the layout was not mobile friendly. A consistent style and a clear flow with separated information is needed as a guidance to potential customers to understand our advantages step by step.
Inconsistent and Cluttered Ads
Weak Value Proposition
Since we kept putting ads with unclear product information and low quality of lifestyle images, it led a negative impact on our branding when people started to get lost in structure. Without a strong branding, people will doubt if we are a regulated company and they may not trust us as a company that provide high quality product. Thus, a stronger way to demonstrate our branding is necessary to build up trust between us and our customers.
Reframe the Content Structure
I set up the design principles to be Consistency, Empathy and Educational. Start from that, I restructured the content above the fold. After research on the popular e-commerce websites. I came up with the mobile friendly structure below:
Value Proposition and Branding
The major section should be something that quickly educate people who we are, what we serve, and make them willing to explore more about our values. In this section we can use any medias, like video or image. This section can also be used to promote our most important and featured products, with a demonstration of its highlighting feature applies to real use cases.
Ads and Promotions
We always run ads and feature announcement on our home page, so why not create a consistent place for them? The section marked in green can
be used dynamically for current promotion campaign, with a link direct people to the sales page. In the case we can just change the image shown in the box without modifying other sections.
Product Categories
Our products varies from sensors to cameras, as well as other smart accessories like plugs or keypad. Unlike the common electronics, people are hard to tell how these products works. To make things easier to understand, I categorized our products into three segments, and planned to use lifestyle images of these products to make them self explanatory.
Coupon and Announcements
I planned to make the entire style simple and clean without too many colors applied. We used to have a nano bar that stays on the whole website to remind people the sale and its coupon. After talking to our sales team, we decided to keep it, but minimize the style with concise text and coupon code.
I was the lead of the project, with responsibility for proposing the design concept, providing and presenting design solutions, deliver the assets, design test and QA, and communication among marketing, sales and engineer team. The design was finished and confirmed in 2 weeks, and right now it is live. We are still working on optimizing the UI with tweaks of the code for responsiveness.
My Role
By following the structure, I created the UI with simple and clean style, and minimized the color to only use our brand color as highlights. For the major section, I decided to use a self-looping video with clips extracted from our newest product introduction video. In the video background, people can see the scenes of women and kid, leaving home, a burglar coming in, camera monitoring burglar's movement, as well as what pet 's doing when owner's not home. Those clips give the audience a feeling of mysterious, but they are all things that happen, or could happen daily to their life. By clicking Learn More, people will be able to view the full video with a clear story of how our products can work to protect the home, and what its value is comparing to our competitors.
The design provides flexibility. For the product categories sections, we can always adjust the order of the tiles to emphasize the more important one at the moment, which will affect the display on mobile. Every time we want to make a promotion, we can always change the first tile without affection other sections.
The design was live at the end of January, and we are still working on tweaking some minor stuff. So far the sales has been good and we will keep monitoring the bounce rate to for future change.
The Redesign
