Supertalent.com

This project involves the redesign of the company website (www.supertalent.com). When I joined the company, I noticed that the website had an outdated appearance and a poorly designed user interface and navigation system. Since there was no graphic designer on the team before me, I took the initiative to create a brand-new website layout from the ground up.

Role: Web Design, UX/ UI Design

Tools: Photoshop, Adobe XD

responsive-mock-ups

The problem and it's going to solve

At the time, the company’s website looked old-fashioned and needed improvement. To fix it, I focused on making the brand image better and keeping it consistent with the company’s colors.

I worked on creating a website that looks good and had all the elements like banners, headers, footers, product images, and the menu system. This made the whole website look attractive and unified.

design Process

As the web designer for the company, I followed these steps in my design process: Find out company business goals and thinking about brand image, Market research, Gathering all the product photos and datasheet, Sitemap, Mock-Ups (wireframing), got feedback from marketing team and PM. Designed all pages layout(Hi-Fidelity Mockups), work with the webmaster and update a final layout. Also, I designed a mobile layout and a responsive website.

This process allowed me to transform the outdated website into a visually appealing, user-friendly, and responsive platform that aligns with the company’s goals and brand image.

wireframes

color system

I have created a design system for the company. This design system is a guidelines that make sure all parts of the website look and work together. It includes rules and specifications for things like fonts, colors, buttons, and other design elements. The main goal of this design system is to make the design process easier, keep a consistent look and feel across the website, and make sure users have a great experience when using it.

color and font

HIGH FIDELITY MOCK UP

I used visual elements like typography, colors, graphics, and UI components at this stage.

Making a detailed mock up that looks very similar to the final product. Additionally, I presented various versions of the mock up. It’s helpful to get input from others to make the design better and fix any issues.

STT blue

Product Pages

I designed every page of our website, showing my commitment to the project. I worked closely with both the Marketing team and web developers to ensure our vision came to life smoothly.

I also collaborated directly with engineers to gather detailed information about our company’s product specifications. Using this knowledge, I came up with some of USB products that performed exceptionally well in terms of sales.

Furthermore, I took charge of managing web content updates, requests from project managers. To make sure information was easily accessible, I efficiently used a Content Management System (CMS) to regularly update engineer datasheets.

pages

Responsive website

I worked closely with web developers to understand their project requirements. By maintaining open and effective communication, we collaborated harmoniously to successfully deliver both desktop and mobile versions of the websites.

IPad_black-vertical
desktop screen_2

WHAT IS THE BUSINESS IMPACT?

The previous website used to look outdated and needed a makeover. I focused on improving the brand image to match our company’s colors to enhance the layout. I designed all the important elements like banners, headers, footers, product images, and a user-friendly menu. This created a cohesive and appealing website.

My work on the website had a direct impact on our business. By creating a design that’s easy for users and aligns with our goals, we saw more people engaging with our site and making purchases. Visitors spent more time on the site, leading to more potential customers and better conversion rates. I believe my efforts in designing an attractive website and improving our brand image played a role in moving the company forward.