Personelle Landing Page
Project Overview
In the summer of 2023, I interned with Complyright as a UI/UX designer for their product, Personelle, a HR application that helps with managing a company’s workforce. My task was to design a landing page to market this product by designing graphics, heroes, and footers for the interface. I also focused on designing responsive interfaces so all users could easily view the website.
​
Problem Statement
Our product, Personelle, needs to be marketed so users can discover and use our application.
Solution
Design a landing page that provides an overview of the product.
My Role
UX/UI Designer​
​
Tools
Figma​
​
​
Key Points
Research
Branding
Graphic Design
Responsiveness
User Research
Landing Page
I conducted research by doing an in-depth competitive analysis. Dozens of screenshots of landing pages were taken to analyze how other companies marketed their product. I focused on the content being advertised, the graphic designs, and the language used to convey their message to their users.
Heroes
After researching what content a landing page includes, I focused on designing the Hero for our landing page. After looking at various different hero designs, I established that I wanted a graphic element that included a lifestyle image to feel more relatable to users, and an interface component to introduce the users to the product.
Steps
Since our product offered different plans and features, we wanted to exhibit these through steps. By analyzing different designs for these steps, I decided to have a small icon or illustration to catch the users’ eye with a small description to go along with it. It was important for me to ensure that the design was simple and clean for users to easily follow along and understand our product better.
Banners
The purpose of having banners was to redirect the users to other pages of our landing page without leaving the website. After researching how competitors design their banners, we wanted to show a components of our interface along with a lifestyle image for the user to feel more connected to our product when seeing another person.
Footers
Similar to our navigation bar at the top of the screen, I wanted to ensure that the user could navigate to other pages once scrolling through each page.
Branding
​
In order to be consistent with our product, I ensured that the landing page design followed our branding guidelines. Illustrations mostly used our primary color and our secondary colors were used as accent colors. The typeface used in our product also remained the same on the landing page. By doing this, our product branding and message are reinforced to our users and maintains consistency between the product and marketing.
​
​
Logo Branding
Our logo was designed as a purple P with a fold in the corner. In order to emphasize our branding and identity, I reinforced the unique fold throughout the landing page by incorporating it into other illustrations.
Fold
Fold
Fold
Graphic Design
After looking at hundreds of different graphic illustrations on dozens of landing pages, I wanted the overall design of our graphics to be clean and simple.
After several iterations of design, I realized that smaller components of the interface looked better than showcasing the entire mockup. Similar to the banner and hero, we wanted to occasionally insert lifestyle images of people into our illustrations to humanize our product, create an emotional connection with our users, and gain their trust by showing a human face. An additional graphical element we used to tie together every illustration were dotted lines and circles, which were part of our style guide.
Lifestyle images
Tablet mockup
Interface component
Dotted line and circles
Responsiveness
With the landing page finalized, it was important to me that all users could access our website anywhere and wherever. I designed responsive interfaces so users could view our website on desktop, laptop, tablet, and mobile.
Reflection
-
Design hundreds of graphics for the best illustration
-
Pay attention to how other websites design graphics
-
Analyze competitors to understand what makes them successful
-
Keep responsiveness in mind
​