www.malabs.com

Transforming Company Website: Designing Engaging Web Experiences for Modern Businesses

malabs-computer-1

company website re-design

I led the design of our new corporate website, working closely with web developers and marketing teams. I created frameworks and prototypes to share our vision, design principles, and content strategy. 

My focus was on enhancing our brand image and showcasing our products from a marketing perspective. The result was a visually appealing and user-friendly website that effectively communicated our brand identity and product functionality.

Role: Market research, Brainstorming, Idea Sketches, Wireframing, Prototyping, UI design

Tools: Photoshop, Figma

Idea sketches & wireframes

During the idea sketch step, I worked closely with the marketing team to gather contents and requirements. I also gathered feedback from project managers and customers about the previous website. This input helped me refine the sketches to meet their needs. With these iterations, I built a strong foundation for the detailed design and development phases.

This stage helps me to explore design ideas, test usability, and gather feedback without spending too much time on detailed visuals. The main goals are to ensure a logical structure, get input from the marketing team and project managers, and save time by finding and fixing issues early in the design process.

mock up_web

home page

I led the redesign of our company’s homepage to make it more functional and visually appealing. We removed sections like ‘Promotion’ and ‘About Us’ for a cleaner look. The new design added a banner for vendors to boost marketing, and highlighted ‘Become a Reseller’ and ‘Newsletter Subscribe’ to increase engagement. This update modernized the homepage and aligned it with our marketing goals.

Before

After

Responsive layout

main page_responsive layout

server system pages layout

I collaborated with the Marketing Manager and Server Team PMs to develop this page.
As servers are currently in high demand and represent our company’s core product line, this was a highly important project. I led and executed the entire design process, taking full ownership of the visual direction. The updated design received strong positive feedback from the CEO and PMs.

Role: Web UI design

Tools: Figma, Photoshop

Server Solutions main_1900 px
Enterprise server solutions_short1
Enterprise server solutions_short2
AI Server Solutions
Industrial Solutions
Storage solutions_2400px

Design system

I created a design system for the company. This design system is a set of ready-to-use building blocks and 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.

product pages Redesign

The company partnered with CENT to integrate their product data into our website, and I was tasked with revamping the layout and design for product pages. Leading the redesign of the product pages on Malabs.com, I collaborated closely with the marketing team and web developers to achieve a cohesive and impactful result.

Role: Market research, Brainstorming,  Wireframing, UX/UI design

Malabs-product-page_laptop-scaled

The Problem

The challenge with maintaining quality control in the Product Library is due to a high turnover rate within the team, which negatively impacts both website content and overall business performance. Additionally, the old Product Library code has many bugs that need fixing.

solution

To address the challenges, the company decided to integrate CNET’s data source service, a third-party solution, to standardize product details. This required a redesign of the product listing pages to accommodate the new data. Additionally, since developers needed to rewrite the website code, we took this opportunity to revamp the layout of key pages, focusing on the Homepage, Product Listing Page, and Single Item Page. This approach aimed to improve the overall user experience and enhance the website’s performance. 

Before

Before the redesign,  product listings didn’t have logos, making it harder for customers to recognize brands quickly. Prices weren’t visible, and there was no indication of stock status. Additionally, rebate and promotional information were also missing, so customers couldn’t easily see potential savings.

After

I improved the user experience by adding product logos next to each item for easy recognition, clearly showing prices, and indicating if a product was “In Stock” or “Out of Stock.” I also added rebate information to highlight promotions, making it easier for customers to find deals.

Before

Before, the product pages did not clearly show prices or stock counts, making it hard for customers to make quick decisions. Manufacturer logos were missing, so brand recognition was difficult. The categories were limited to basic specifications, restricting detailed comparisons.

After

I enhanced the product pages by emphasizing price and stock count information to help customers make quick purchasing decisions. I added manufacturer logos next to each product for easier brand recognition. Additionally, I expanded the product categories using CNET data, allowing for more comprehensive comparisons.

Acheivement

By using CNET data and redesigning key pages, we made the website more user-friendly and attractive. The new layout made the Product Listing Page and Single Item Page easier to navigate and improved search and filtering. This led to better product display, higher customer engagement, and increased conversion rates.

What is the
business impact?

My involvement in the website design directly impacted our business. By creating a user-friendly design aligned with our goals, we saw increased user engagement and conversions. Visitors stayed longer, leading to more leads and higher conversion rates. The design also supported our brand image, enhancing credibility and market position. Also, launching an online application process for new customers had a big impact. It made signing up easier, attracting more customers.
This all led to revenue growth, making the online application a key factor in expanding our customer base and market presence.

Microsite redesign

Custom Design Layouts for Partner Vendors: 10+ Unique Designs Created

AMD-desktop

Microsite layout

I was in charge of updating the microsite on malabs.com for our vendors.

Problem: The previous microsite was built with Flash, which required us to transition to HTML5 for all the vendor sites. To improve the user experience, I developed a new concept that considers input from both the marketing team and the vendors themselves.

Microsite

design layout for featured stores

I collaborated with a fellow graphic designer to create more than 10 unique designs for each vendor’s page. Our main aim was to make sure that each vendor liked their website and that it showed their company’s brand well. We also added links to our products on their pages in a way that fits nicely with the overall design. enhancing our brand image and showcasing our products from a marketing perspective. The result was a visually appealing and user-friendly website that effectively communicated our brand identity and product functionality.

Role: Web Visual design

Tools: Photoshop, Figma

microsite-showcase-scaled
Microsoft-sub
phone-view-copy

Acheivement

My work on the website design had a direct and positive impact on the business. By creating a user-friendly design aligned with company goals, we increased user engagement and conversions. Visitors spent more time on the site, which generated more leads and improved conversion rates. The new design also strengthened our brand image, building trust and improving our position in the market.