Where
Remote
What
Website Design
Why
Website Revamp
Role
Webflow Developer,
Web Designer, Visual Designer
Category
Landing Pages, Website
When
March 2022 - November 2022
Trackingplan is an easy-to-install tool that automatically detects and documents all customer data, traffic and schemas that flow between sites and third party integrations. A useful tool that offers data observability to make sure your tracking is happening as you planned.
The goal is to redesign a user-friendly, mobile-first website that would communicate the company's core product, as well as create content and managing social media, and deploying a lead generation strategy to drive quality leads and increase revenue.
I had the opportunity of working with an amazing digital marketing team called The Grit Agency. We were a team of 4, including me as the designer/developer, a project manager, a content writer and an SEO specialist. My main role in the project was to redesign, develop and manage the company website. This would include creating different layouts, wireframes and visual designs and developing the website through Webflow. I also assist digital marketing materials whenever needed.
As a rule of thumb, every website should be assessed and updated for at least 2 to 3 years. In the case for Trackingplan, while the goal was to generate more leads and increase revenue, it was due for an update, and part of that update was to revamp the website. This would provide an opportunity to improve the site's overall user experience, optimize web pages and build new content strategy.
To get a better view of why a website revamp with a well structured content strategy and good user experience is crucial for a business, I did a quick look and saw some interesting numbers with regards to how this affects the company's overall growth.
Source: UX planet 2020 and User Zoom
At the start of the process, we presented a design document questionnaire to the client. This helps the team determine project goals, expectations and answer questions that are crucial for each member of the team. This would also eliminate asking random questions, since most of the important information are readily available and planned out from the start.
We were given a list of competitors that provided nearly similar services to the company. Our goal was to understand their approach and figure out what practices are best for the new website revamp.
Competitor 1
Competitor 2
Both website look professional and simple which is what should be expected in a good business website. Our team came up with different ideas and suggestions on how our approach should be for the website revamp.
I created a mood board document and invited the team in. We did a creative collaboration by posting any images, texts or any design materials that we feel that the website revamp should be inspired to. This shared document will help me determine what style and color I should use when making the designs.
Above screenshot is the trimmed down and final version of the mood board.
I created a design guideline document. This document will serve as a cheatsheet for the company's branding. It can also benefit everyone who's directly involved in making digital marketing materials as it contains information about what font or color palettes to use. If there are changes with the styling, this document will be updated.
A website structure is another part of the process where I create a simple diagram that shows the hierarchy of the site's pages. Even though these information are already available in the design checklist, It is still essential to show a visual representation and add it to the site's documentation. This can also serve as a reference and would be a great help for anyone in the team when planning ahead with the tasks.
Once I had my initial processes done, I started creating the low-fidelity screens. My goal here was to make sure the layout and structure of all the main pages are finalized and approved before making the actual designs. This part involves a lot of collaboration with the content writer as we had to make sure the content does not overflow with the concept layout.
With low-fidelity screens ready, It is time to make the actual website design. The process involves a lot of collaboration with the team and the client's product developers since we had to make sure that correct product user interface were used in the designs.
Color Palette
Primary, secondary, tertiary, background
Font
ES Peak - Regular, Medium, Bold
Look and feel
The style of the design was achieved by incorporating some solid and linear vector designs with some assets from the actual product's user interface.
Webflow is such a flexible in-browser design tool which allows designers to seamlessly design, build and launch responsive websites. However, for This includes a few mobile responsive designs and some special sections from the website. I also made sure to create separate page in the design tool (Figma) dedicated for icons and other assets used in the design for easier reference and access for the dev team.
With loads of free amazing icon libraries to choose from, the process of designing interfaces is much easier and efficient. However, there are cases where we need to customize or create an icon to be consistent with the planned concept. When I started making the high-fidelity designs for Starloop Mobile, there were sections of the content where I had to customize some icons to match up with what was required in the content.
To have a consistent layout, I made sure to use strict alignments by using the grid layout feature in the design tool (Figma) and applied correct measurements to each section of the design. I had my designs set at 12-count column with a width of 80px and a gutter of 24px.
To have a consistent layout, I made sure to use strict alignments by using the grid layout feature in the design tool (Figma) and applied correct measurements to each section of the design. I had my designs set at 12-count column with a width of 80px and a gutter of 24px.
Sample animation 1
Sample animation 2
When it comes to designing websites, It's always important to make it mobile friendly. In Starloop Mobile, most of the low and high-fidelity screens I designed were presented in desktop version. With mobile and tablet screens, since the website is content based, I only did the designs with pages and sections that require attention. Most of the process for responsive designs were with collaboration with the dev team for quality checks.
Now that the website done and ready, It is time to do some performance optimizations. This process requires collaboration with the dev team and the SEO specialist. My task was to make sure that the images are well optimized and website ready. We were also continuously doing some A/B testing for landing pages, making sure the website is in optimal performance in generating leads and getting conversions.
Hompage screenshot (old)
Homepage screenshot (new)
Now that the website done and ready, It is time to do some performance optimizations. This process requires collaboration with the dev team and the SEO specialist. My task was to make sure that the images are well optimized and website ready. We were also continuously doing some A/B testing for landing pages, making sure the website is in optimal performance in generating leads and getting conversions.
Starloop and Magic Media's goal is to provide quality results not just for gamers but for publishers, developers and world class brands. That's why it's really important for me to make sure that the website is well-structured and well-designed as this would help make a good impression for future and existing clients.
Designing Starloop Mobile was both fun and challenging at the same time. I would like to thank the management for the continued trust and allowing me to be creative, the marketing and dev team for the new learnings and to the whole Starloop Studios team for the smooth and seamless collaboration.
- Sophia