M.BUG 2021
Resin Handcraft Website: M.Bug
Summary
M.Bug focuses on the design and production of transparent resin decors, which is a cultural and creative brand in China aiming to demonstrate the beauty of nature.
M.Bug's website provides potential customers with product information and brand culture with astonishing visual expression.
My main responsibility on this team was to spearhead the UX/UI and direct the creation of website content based on the existing VI and brand culture.
Client
M.Bug
Role
UX/UI design
Contributed to website contents
Platform & Timeline
Website
3 Month
Team
1 Project Manager
2 Designers
1 Photographer
1 Copywriter
2 Developers
Understand the Brand
Visual identity
We began our project by spending our time understanding M.Bug brand identity and vision to ensure we are using the branding in the UI design accurately and consistently. This part didn't take up much effort because I'm the lead who recreated the existing VI.
Color Palette
#326006
#fcd314
#222222
Visual Components
Logo
Logo 2
Ring Pattern
Icon Series
Application
Brand Culture
Additionally, we did take more time to understand brand and its unique qualities. The brand had been quite adamant about keeping the style aspect of their e-commerce plateform and social media and did not want to stray away too far from it.
We summarized key words that surround our findings to lead through the design process:
Nature
Tradition
Calm
Free
Understand the Target Audience
In the second phase, we took time to learn about the target audience and buyer personas by communicating with the marketing lead and exploring websites from similar businesses.
We found that audiences would primarily find and access this site through:
1) existing brand media and e-commerce platforms (Returned or potential customers)
2) Search engine and exhibition (Occasional customers)
Moreover, the ability to transfer the visits into actual sales is contingent on:
1) the values, benefits, and qualities that make the brand stand out, and 2) they trust and respect the brand. Therefore, the website should clearly outline the unique values and display uplifting storytelling.
Prototyping
The challenge to beginning the design was to construct the information architecture. The brand wanted us to clearly highlight the difference between product Collections and Series while conveying a strong visual expression that entices viewers to explore the brand at first glance.
As for the second challenge, we were required to display product categories under each series and collection in an easy-to-understand and instinctive way accompanied by the corresponding storytelling while preventing the page to be overwhelmingly long.
Based on our research and analysis, the direction that we were going towards was strong photography and brand storytelling, integrating a concise website structure, allowing storytelling to drive the experience. We created low-fidelity wireframes that focus on IA for all the primary pages to begin the first round of iteration.
Home
6 Collections Menu
Collection Page
Product Detail Page
Assets Creation
Photography
We decided to incorporate application scenarios with nature scenes to emphasize the brand impression and the brand ethos that was built through the narratives in a collage style. I instructed the scene set during the product photo shoot to align with the keywords we set in the beginning for a consistent brand expression by adding natural components to the scene.
Storytelling
As for the narratives, I worked closely with the copywriter and marketing department to create engaging stories for each product line, translating the brand into a tangible persona.
The layout of images to accompany texts allows the storytelling to shine through while viewers read through the text.
Final work
The final website was launched after 1 month of corporation with our developers, it experience several iterations with small changes. We decided to create a highly open backstage management system with the ability to change text content and images, and to update products since the brand was experiencing rapid product iteration and a major movement of brand culture when we designed the website.
Home
Menu
Collection Page
Product Detail Page
Conclusion
This project was one of the projects that I’ve been involved in when I work for Millennium Arts & Crafts (MAC) in China. M.Bug is a brand belonging to a subsidiary corporation under the MAC. One of the biggest challenges for me was to work in a temporary team consisting of people from different departments and companies, which could be torturous but insightful at the same time because working with someone unfamiliar means there more efforts need to be taken on negotiating. However, this pushed me to become a better communicator and team player.
We spent our time majorly in diving deep into the UX strategy behind much of our research and analysis. Additionally, we constantly play back our findings and designs with stakeholders to make sure we are on the right track. This saved us a lot of time from processing iterations and making changes.
The opinions and feedback from other team members were extremely helpful as they were able to show me different perspectives and solutions at each phase of the design. This broadened my way of thinking.