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 brand.

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.

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, lifebuoy is associated with safety and speedometer with fast performance.

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.

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.

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.

Responsive UI design: Filip Błaszczyk

Icons, illustrations, animations: Filip Błaszczyk

Development guidelines: Filip Błaszczyk