Yeowon Lee

Zap Workflows Landing Page 2021

Programs used

Overview

Project date/duration - 3 weeks, Dec 2020-Jan 2021

Zap Workflows is a start-up business looking to help small and medium businesses to automate managing existing and new employees. Their core services would be to provide an online platform to set up and manage the businesses’ positions, securely store training and onboarding documents and create custom workflows to legally compliant their hiring process. While they had a strong goal, the directions given for design were often challenging to understand. It was easy to see the CEO had minimal experience with design processes. So, I had to help him set the team’s first MVP goals and structure while creating the design. This case study will explore my design process for Zap Workflows’ landing page design.

My Role

As a contractor designer, I was asked to work on primary branding elements such as logo, colour palette and typeface. Working closely with the CEO, who was a former colleague, and his dev team, I worked on both the platform and website UI UX.

The Challenge

To design a landing page that correctly covers all service areas, I asked for Zap’s current platform screenshots and some headlines to get started. However, even though the backend work was complete, the frontend work was yet to be done. None of the core pages was ready for screenshots. Although I initially designed this platform three months ago, the CEO informed that Zap’s service areas have changed throughout the development process, and naturally, the UI UX had also changed so I could not use any of my design mockups for the landing page. Not only that, because this was the CEO’s first project, he struggled to simplify Zap’s services and its purpose. He was new to copywriting, and they did not have a content writer on the team. Without knowing how to proceed, with a tight deadline to have this site published by the first week of January 2021, he asked me for help in structuring the landing page’s information flow. This was a big challenge for me because creating branding was an area of my expertise; however, setting up business goals and purpose was unfamiliar.

The Goals

  • Create content that explains Zap Workflows’ core services
  • Create a short landing page for Zap Workflows
  • Create digital illustrations for Zap Workflows’ landing page

The Process

Analysing core services and business direction

To better understand Zap’s business direction and better assist in analysing core services to structure information flow, I sat down with the CEO and started listing all of Zap’s services.

For the first MVP:

  • New applicant screening and hiring
  • Creating and managing different job positions
  • Adding training and onboarding documents for employees and sub-contractors
  • Adding custom hiring, training and certifying workflows to be assigned to specific positions
  • Provide a real-time update on all workflow progress to both applicants or employees and business owners
From this list, I asked the CEO if Zap Workflows was to be an HR platform; however, his answer was no as Zap has no plan to have an accounting or rostering feature. While it was within his goals to enable Zap Workflows to integrate with popular accounting apps such as Xero, he did not want Zap to be an HR platform as there were too many competitors in the field already. Instead, he wanted Zap to become a business process and professional profile management system. This became clearer when he explained his future MVPs (Disclosed information). With a better understanding of Zap’s goals and business direction, we could conclude a sentence describing Zap’s services – Workforce management system.

Core-service listing notes

Structuring information flow

Using the notes from analysing core services, I drew a quick layout for the landing page then annotated content requirements for each section. Through a brief discussion, we decided to remove the validation section for now as there was no feedback for the platform yet and to add a pricing table instead. With the skeleton of the information flow set, I needed the real content to finalise the layout. So, I asked the CEO to write out some copies for each section. He went away to write contents and returned after a few days with some dot points:

Proposed layout of information flow
Hero

  • Zap
  • Workforce management
  • Maximize efficiency, manage legal obligations, engage the workforce

Sections

Automate, manage, and communicate business tasks through workflows Use our workflow builder to map out and customise your unique business processes.

  • Automatically assign and complete tasks?
  • Have a central place to store and manage documents?
  • Keep everyone on the same page with real time status on progression?

Workflow

Visual illustration of a flow design

Example use cases

  • Hiring
  • Onboarding
  • Training

Pricing

  • Subscription – $100/month
  • Pricing model subject to change

Those points were not a bad starting point; however, were not the final copy I could use for landing page design. At this point, they only had three days left until the landing page needed to be live. To speed things up, I used the bullet points to derive headings to build a more detailed landing page wireframe as below.

Now that we had a real working wireframe, rest was about filling in the void. Using a reasonably finished platform page to produce screenshots for both desktop and mobile, I created a mockup image for the hero section. Then, after all the headings were edited and confirmed by Zap Workflows team, I used digital illustration to liven up the page. My first preference for images would always be platform screenshots; however, this was not available, so I had to make do with flat illustrations instead.

Outcome

The design finalised and was approved two days before this site needed to go live (launch date scheduled for 7th Jan 2021). It is too soon to access any outcomes for this project just yet. Designing a single landing page has always been a straightforward task for me. But as I have continuously worked with a copywriter or had the content given to me before design, not having a finished platform and no useful content to design from posed a big challenge for me. Although this project was a confronting project, I believe this was a great learning experience.

All rights reserved 2024 Copyright©
Made in Plasmic