The Manek Crafts: Empowering MSMEs with Creativity

Introduction

This is a redesign and rebranding website of Manek Shoes, a local Micro, Small, and Medium Enterprise (MSME) in Malaysia. It is aimed to reintroduce this traditional craft to a wider audience and particularly capture the interest of younger generations, as well as reignite appreciation for this industry and bring it back into the spotlight.

Problem:

As fewer people are drawn to the traditional shoemaking industry, the cultural heritage and craftsmanship it embodies are at risk of fading away.

Insight:

Manek Shoes, rooted in Baba Nyonya heritage, represents the traditional craftsmanship of Malaysia's cultural legacy despite the declining interest in the industry.

Solution:

Our mission is to reintroduce Manek Shoes to a wider audience, preserving and promoting the legacy of Baba Nyonya craftsmanship for future generations.

Idea Research

There is no traditional Manek shoe in the city lived, so I have went to Melaka city, which is a city in Malaysia rich of cultural. TS Lim Trading is a renowned traditional handmade manek shoe shop nestled in the heart of Melaka. With a rich history spanning approximately 25 years, this establishment has been a cornerstone of craftsmanship in the region. Specializing in handmade shoes, TS Lim Trading offers patrons the unique opportunity to customize their footwear, ensuring a personalized touch with every pair. 

Competitor Research

In the early research progress, I explored several brands that are also shoemaker brands. During this research, I found a couple of alternatives with similar functions and features. Consequently, I conducted a thorough analysis comparing TS LIM Trading to these two most comparable brands.

Brand Board

Colour Palette : I want to make a more energetic and casual website, so I have chosen light and warm color palette, there are mostly the color appear in my website. 

Typeface: For font, I choose bold Sans-Serif font - Altivo. The font size and weight used in the website is following the font system listed.

Design Development

Brand Graphics Assets

Manek Shoes' patterns are rooted in geometric shapes, with categories including flora and fauna, architecture, patterns, and nature. To make the website simple and clean, I chose to construct the website using these straightforward geometric patterns.

Then, there are 6 chosen patterns by my lecturer for me to further develop. I started to colored the patterns. I decided to give grain textures so I use grain brush in Adobe Illustration.

This is after I drew the texture in Adobe Illustration:

Final Graphic Assets in different colour and textures:

2. Brand Logo

Initially, the logo was designed using the shop name.

Unfortunately, I am not satisfied with all the logos I have made, suggested me directly use the patterns as logo. I have chosen two of the patterns and combine them into a logo for TS LIM Trading

Brand Logo Animation

I have used Adobe After Effects to do the animation for the brand logo.

Style Guides

Listed below are all visual assets for my Manek Shoes website.

User Flow and Wireframes

Hi-Fi Wireframe

I started to build the website in Figma. Here are some explorations of designs.

Progression

Figma

After the designs were mostly done, I started to explore many prototypes and functions in Figma. Components are very important in this website as many effects when user interacts (hover, after delay, click) will be performed.

Listed are the components used in the website:

Additionally, more new features like variable were being tested in Figma to make the UX more complete.

Listed below is the final prototype made in Figma:

Adobe After Effects:

To enhance the website, I created some minor animations in After Effects.

Final UI Outcome

Mock Ups

Website Video Walkthrough