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

Website: http://www.malabs.com

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

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.

Design-System-Grid-New

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

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, 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.

SOLITION

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.

Product detail page

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.

Home

UP