G-Verse
The basic way of game management.
Where
What
Why
Saitama, Japan
Landing Page
Porfolio Project
Role
Category
When
Designer, Researcher
SaaS, Management
March 2023 – May 2023
My reason for this project
I’m fascinated with marketing campaigns. Since I’m also interested in games, I thought about making some kind of a landing page somehow related to games while using decorations of games.
Market Research
The good
Businesses with more landing pages have a higher increase in conversion for customers and leads. It has been concluded that businesses with more than 40 landing pages have an astonishing increase of conversion rates as high as 500%. As shown in the chart, companies also can see a 55% increase in leads when increasing their number of landing pages from 10 to 15.
Any concerns?
Even if landing pages are made, it doesn’t guarantee any conversions. Things like lack of trust, slow loading times, and no clear CTAs can result in poor conversion rates.
Competitive analysis
I’ve started with analyzing some of the currently best landing pages. I looked through their landing pages to find strengths that they use and try to apply them to my own. I was also looking for patterns if possible.
DoorDash
Strengths
Looking through their landing page, they have an emphasis on autonomy. It really highlights it. It also highlights the potential earnings that you would receive.
Wise
Strengths
Wise really highlights important features such as safety that would help to ease any hesitancy a potential customer might have. There is also emphasis on Wise’s value and service that it’s less expensive than its competitors.
AirBnB
Strengths
Having looked through theirs, there seems to be a strong CTA that makes it really easy to convert on the spot. It’s also personalized from the beginning. It shows you what you could start to earn based on your location. It also helps new hosts decide what to charge.
My thoughts about these strengths
User Survey
Through social media, I had conducted a quick and simple survey in regards to landing pages.
What is more likely to result in a conversion from a landing page?
10 participants
Notable comments
What the research says
There is a growing need for electronics that are well-made, good quality with the price being not overpriced for the quality that you are receiving.
Personas
For this landing page, I created two personas. I based them on two types of users. The first one being a local gaming company. The second one is client of theirs.
Time to design!
After I looked through all my research data, it was then time to begin designing. I started with sketching out my ideas with the first flows and the initial low-fidelity wireframes.
Lo-Fidelity Wireframes
Firstly, I began with the creation of the low fidelity wireframes of the basic flow of the landing page.
High-Fidelity UI Design
Once I have finished the flow and lo-wireframes, I decided to begin creating a couple of the main screens of this landing page. Before that, I went on to decide the colors and fonts.
Font
Plus Jakarta Sans
Regular, Medium, Bold
AaBbCcDdEeFfGgHh
Color palette
Accent 1, Accent 2, Primary,
Secondary, Tertiary, Background
Simple, yet a modern feel
I created this style by making the icons and all the basic buttons in a simple way. The use of decorative JPGs/PNGs were chosen based on the games or section-related ideas.
Alignment and grid
For this project, I chose an 8-point grid. I decided to have my margins within groups to be at 16, 24, and 32. The margins between groups were at 40, 48, 56, 64, 72, 80, and 88.
12 high-fidelity screens were made
Also including two different footers (a dark green version and a white version) that could be explored and experimented for an A/B testing in later design stages of the landing page.
High-fidelity prototype
I have linked my high fidelity designs into a clickable prototype. This will let me do a simple round of testing on a first group of users of this landing page. It’s basically can they navigate to different sections.
Prototype validation
My prototype was validated by 4 users for this landing page. Each of the users were given this simple version of the main flow prototype design. It’s just dedicated in being able to successfully navigate between the screens throughout the landing page. I wanted the make it easy enough to use for anyone.
I had this tested out in-person and I introduced to the users the landing page and asked them questions about it. I asked some questions about whether if they could find the features sections, pricing section, etc., easy enough to successfully understand the service.
Study results
25% of users (1 out of 4) were comfortable just simply scrolling through the landing page. The other 75% of users were desiring to have an easier way to go to the different “features” of the landing page. They could go straight to the first feature, but not a specific feature. It was a 25% success rate.
prototype update concept
I didn’t do a second round of the usability study on my updated prototype because of the time constraints. However, what I did was add a dropdown menu for hovering over the “features” category and now they can go to any specific feature they want.
Accessibility check
This app has been evaluated to have the contrast in order to match the AA standards of WCAG. In some cases, I found that the contrast could be improved.
One example was the main CTA button I designed at first. I wanted to differentiate this button from all others while keeping one of the main colors of the Logo. The orange was good, but it wasn’t proven to be accessible. I adjusted the contrast on the final version of the background color.
Project summary
During this project, I had to spend a while evaluating landing pages to see how my landing page can measure up with others. Throughout my research I found out what makes great landing pages. It was interesting and a bit exciting.
I also made some quick user surveys on X, did an in-person (short) usability test, created some lo-fidelity wireframes (digitally), created high-fidelity designs, and a simple prototype flow. On top of all that, I finished it off with a QA audit in order to double check my accessibility with consistency and color contrast.
