DFI & Mannings
E-commerce product design
internship
role & duration
May 2024 - August 2024
Product Design intern in 6-person design team
Based in Vietnam office, worked remotely with design team in Hong Kong & Guangzhou
organization background
DFI Retail Group (the ‘Group’) is a pan-Asian retailer that owns well-known brands across food, convenience, health and beauty, home furnishings, restaurants and other retailing.
​
It operates 11,000 outlets spread out in 13 countries and has around 200,000 employees. The Group had in excess of $26 billion in total annual revenue in 2023. DFI Retail Group is a member of the Jardine Matheson Group.
​
While I was employed by DFI, I spent most of my internship working with a subsidiary called Mannings—a health & beauty brand based in Hong Kong.
project overview
Background
Mannings plans to have an e-commerce platform migration from SAP Hybris to Magento at the beginning 2025.
Mannings is also transitioning to an in-house development effort rather than relying on an existing vendor. This creates a need for massive design update for the website and app.
My Scope
I was mainly tasked to work on the web version of the Mannings site. This included:
-
Product discovery flows and screens such as the homepage, special product campaigns, brand pages, product listing page, product detail page, search flow, etc.
-
Account page along with 10 subpages.
-
Redesigning header, footer, & navigation.
-
Aid in building new design system
WEEKLY TASKS
Create screen designs based on customer journey for app, desktop web & mobile web.
Adapt existing and create new components to aid in building out a new design system.
Engage in discussions with developers and business stakeholders to find compromises to balance user needs, development time, and business requirements.
Participate in weekly design reviews with project managers and internal stakeholders to introduce new design proposals to get approval and identify areas of improvement.
key accomplishments
1
Own designs in roughly 50% of the product discovery flows and pages of the updated Mannings app and website.
2
Personally created and contributed towards 25% of the new design system with 200+ individual components in Figma.
3
Successfully negotiated with internal stakeholders to reach compromises to balance user needs with business requirements.
work samples
These are some works samples that have been approved to be shown. They do not encompass everything I've worked on during my internship.
header & navigation
Current
The existing desktop web header lacks a compact variant to save screen space when scrolling. There also needs to be a bigger emphasis on the log in / register access point.
​
Currently, the mobile web header uses the standard hamburger menu and also does not minimize itself when scrolling.
New
The new desktop web header has a compact variant and also page-specific variants as requested by stakeholders.
​
There is a shift in incorporating a bottom navigation bar that is present in native apps to the mobile web version. This was the direction taken for the new mobile web design.
​
​
Current
The current sub-menu navigation does not satisfy the user need to be able to directly navigate to a 3rd-level category. Users have to go to the 2nd level before they can go to the 3rd level.
​
There is also no dedicated space for any promotional banners. This results in an awkward banner placement.
New
The new navigation menu allows users to more efficiently go to the page they want, reducing the number of clicks.
​
There is also a dedicated banner space that doesn't disrupt the overall visual hierarchy.
homepage
One of the main business requirements for the new update was the for creation of new components that allowed for more products to be displayed without increasing the length of the page.
The new design not only displays more products but is also even shorter in length compared to the existing page. New components are also made to be versatile with variants for application in various use cases.
Current
New
brand listing pages
Flows
With the new update, there is also an emphasis put on the brand search and browsing experience for customers. I did extensive exploration and mapping out flows for different concepts on desktop and mobile web similar to flows below.
Current
The current brand listing page is limited in its interactiveness and has a poor search experience for users.
New
The new design allows customers to filter the brands by categories and possesses a much specific search experience.
design system components
Part of my work also involved building out new components as well as adapting old ones to fit the new style. The team had weekly meetings dedicated towards the design system to stay aligned.
​
Below is a sample of a button component and its variants which I created.
