Ecommerce Ville: Landing Page UX Design Case Study

Our task was to design a landing page for a web development company whose aim was to promote WooCommerce development services to ecommerce owners. The main goal of the landing page was to attract new leads and encourage them to submit a ‘Get a Quote’ form.

Client

Chop-Chop

Objectives

  • present the offer in an understandable way
  • address the most crucial WooCommerce users’ needs
  • mobile-friendly design with Twitter Ads promotion in mind

Scope

  • user research
  • competitor analysis
  • copywriting
  • wireframing
  • custom icons, illustrations, motion design
  • responsive UI design
  • development guidelines

Color Palette and Typography

To make web development services appear less intimidating, we’ve decided on a delicate, pastel color palette: classic white background and grey body text are paired with violet — which is the main color of WooCommerce visual identity and yellow which refers to Chop-Chop official website.

Main Motif

Since we wanted the service to be immediately associated with commerce, we’ve chosen the urban landscape with shop fronts as the main motif. To differentiate the shops from the rest of the buildings, they were colored, while the rest remained to be only an outline. The custom illustrations were prepared in a responsive-friendly way.

Above the Fold Section

Our main goal in above the fold section was to appeal to the visitors with visuals and at the same time clearly indicate what the service is. We’ve created a simple and straightforward Unique Value Proposition and used part of the WooCommerce logo so that the visitor knows straight away what the landing page purpose is. As its one of the most important information from the client’s perspective, we also provided the price per hour above the fold. To make this section more visually appealing, we’ve added an animation: little moving clouds above the buildings.

Services

Research findings indicated four main groups of target clients’ needs. We decided to build the services section based on them, placing each group on a separate text sheet. Straightforward and plain description of services was strengthened with icons. Visualizing the meaning of the main headlines, the icons facilitate instant understanding of the company’s offer: PS and Sketch diamond are a clear reference to design, beetle is an instantly recognizable bug, buoy is associated with safety and speedometer with fast performance.

Pricing

The visible pricing information were identified as the feature most users are encouraged by. Being a clear competitive advantage, this section needed to stand out. We decided not only to repeat the price per hour but also to provide users with a few examples of the price estimate for the most popular services. We used here the same pattern as in the services section — white text sheets, the user has previously seen and so can identify a place for the most important information. The clock icons with the $ symbol in the center are a clear reference to the hourly pricing system — another competitive advantage that was worth emphasizing. Depending on the number of hours each service is estimated to take, the clocks indicate different time range.

Contact Form

Since submitting a Get a Quote form is the most desirable action, this section needed to be both usable and visually encouraging. We used the motif of buildings again, specifically paying attention to imitate the look of Chop-Chop’s office building. To clearly indicate that the message was sent successfully we designed a custom animation — when the send button is pressed the letter flies from the shop on the left to the mailbox near the Chop-Chop’s building. Additionally, the contact form disappears, being replaced by the pictures of communication managers who are responsible for answering the message.

Responsive Design

Because the landing page was to be promoted on Twitter, which is in around 80% accessed on mobile devices, it was crucial to make the site convenient to use on phones and tablets.