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