Back

Redesigning a modular beauty train case for Macher.

Enhancing the users experience with a customizable physical product and a specialized digital companion app.

This is the final mockup of the beauty case for Macher.
June 2023

Project Overview

For this project, we were asked to re-imagine one of the key products that MaCher provides their clients - taking into consideration real-world advancements in materials innovation, digital technology/integrations, budget constraints, project management timelines and target applications/audience/demographic. This includes considering the “why” of the product, re-imagining how these products are used, how gifts-with-purchase can build social community engagement, to get our brands noticed, etc.

My Role

User Research, Product Design, UI Design, 3D Modeling, Project Management

Duration

7 Weeks

Client

Macher, as part of our Product Design Class

Team

Celso Pereira
Lana Pak

The Problem

Makeup users don’t just have one product, they have a variety of products that all have the potential to be expensive and fragile. Users need a way to keep their products organized, protected, and stocked while out traveling.

Insights

During our research we found that make up users are very particular in the products that they choose. Oftentimes these products can be expensive and fragile so the need for organization that keeps their products protected is important. We also found that users vary their makeup kits depending on where they are traveling to or what they are doing. This can even vary during the day.

The Solution

We created a modular train case that allows users to create a custom organizational system that not only keeps their fragile and expensive products safe. But it also allows for extended use throughout the day. 
A 3d mockup of our modular train case. Model created by Celso Pereira.
The digital companion app that helps you keep your train case inventory full and organized.

The Design Process

Research

Competitive Analysis

We started our research process by conducting a competitive analysis of other makeup bags and organization systems. We wanted to see how these products differentiated themselves from one another and we also wanted to see if we could gather any insights about our potential customers. We found that there was a large variety of bags that each served a slightly different function, but it was clear that the desire to have a customizable interior was popular. 

Train case systems that are already on the market. 

Secondary Research

After conducting a competitive analysis we looked to see specifically how users are using their makeup bags. So we turned to a few blogs that discuss organization for makeup bags. We found that there was a large emphasis on sorting and using compartments. We also found that there was a concern over makeup spilling in the bag and then needing to clean it up. This lead us to do some materials research.

Materials Research

We looked at a variety of materials such as Pinatex, Lyocell, Banbu, RPET, RPVB, and EVA. As we went through our research, we kept a few requirements in mind; it needed to be easy to clean in the case of a spill, it needed to exude a feeling of luxury, and it needed to stay within our budget of $15 per bag.

I created a material blowout of our main tran case that shows our material choices and placement.
The material blowout for our two smaller bags inside the train case.
The material blowout for our square organizer.

Experience Map

We used an experience map to begin to find areas that our digital interaction could complement the physical experience of the bag. By looking at the different stages such as attracting a user, to the user engaging with the product, we found some interesting opportunities to extend the use after the user stopped using the bag. One of them being a way to track use of their products and keep stock while being able to reorder their favorite products at any time.

Persona

Our research helped us create this persona, Carmen. Carmen has a few pain points:

  • Insufficient storage space
  • Problems with organization
  • Fragile makeup product protection
  • Bulky and cumbersome train case
  • Limited accessibility
  • Alternative uses

Designing

Sketches

We started brainstorming potential solutions for our physical bag while keeping the idea of modularity and customization at the forefront of our minds. After exploring a few options, we wanted to pursue this concept with multiple bags inside of it.

Exploratory concept sketches of our train case.

Physical Prototype

Each of us had created a physical prototype but we decided to move forward with Lana’s prototype as it had the most structure and was closest to our desired bag. We used this prototype as a way to explore the modular feature of this bag. We expanded on the original two interior bags and added a semi rigid divider that holds small fragile items - offering a way to keep products safe.

We created a physical prototype to start to dial in the dimensions and find areas to improve the experience of the bag.
We used the physical prototype as an opportunity to also experiment with some product features such as a mirror in the lid and a strap that helps hold the bag on a suitcase while traveling.
The prototype being used on a suitcase. Photos by Lana Pak.

3D Model

I created a 3D model of our bag concept so that we could start to dial in the dimensions and see how everything fits together. This process really helped us to lock in the overall dimensions of the bag which later helped us to create an estimate of the cost. This process also helped us to determine how we should lay out the magnets inside of the bag. Which we mocked up in Figma.

The prototype being used on a suitcase. Photos by Lana Pak.

Modular Magnetic Locking System

I developed the magnetic locking system to help keep the interior bags organized. By using the magnets, you could add event more structure to your bag to keep your items from shifting around while adding more protection to items in the middle. Each magnet was carefully placed to allow for multiple variations of customization.

A mockup showing the location of the magnets inside the bags, as well as the ease of custom layouts inside of the bag.

Wireframe for Digital

There were a few concepts being discussed for our digital counterpart, some being a routine based function that would track product usage, another being a way to sort and organize your products throughout your bag, and lastly a functionality that would allow you to restock and refill products that are low. With these ideas in mind, we started to incorporate them into our wireframe. We created a user flow that explores the various functions that our user, Carmen, could use this app for. During this process we started asking ourselves, “How might we create a strong connection between the bag and digital companion?”

A look into the home screen and lists tab wireframe.

Create List of Items

The rough wireframe flow for creating a list of items. Scanning items in with our product scanning feature.

View Lists

The screens associated with product inventory as well as recommendations for future product purchases.

Select Routine

This was the routine feature that I brainstormed. It was meant to act as a way to track your daily routine for interesting and fun insights. It also doubled as an inventory tracker and gave opportunities to quick buy products running low.

User Testing Insights

We tested our prototype with our fellow classmates and uncovered a few interesting insights.

Make it easier to add products

We noticed that there was some pushback at the idea of needing to manually add in every beauty product to the app list. Users didn’t see themselves taking the time to do this because of the large amount of products they have in their inventory.

Simplify the concept

We found that our classmates had little interest in the routine function of our digital companion. We found that their makeup routines were often short and it didn’t seem plausible to activate it every time they put on their makeup.

Redefining User Journey

To gain a better understanding of how our users would interact with both our physical and digital products, we created a user journey chart. This chart helped us to determine the small steps that we were missing in our initial design process. Some key features that came from this step were:

Scanning Products into the Inventory

In an effort to improve the UX of adding products to the inventory we looked to other existing tools we could leverage. We found Google Lens and noticed how easy it was to search for products using images. We saw this as being a great way to search for products and add them to your inventory. Users would be able to scan multiple products, and individually confirm each product is correct before adding it to their inventory. They would then be able to specify how frequently they use this product as well how much is remaining. We could then use this data to estimate when the user would need a refill and we could then send a notification to the user urging them to purchase more products.

The UI screens for scanning in your products.

QR Code Tag

In order for users to be able to easily access the digital companion app, we decided to attach a QR code to the main train case bag that would give users access to the web app. We decided to expand this QR code feature into the smaller interior bags as well. This allowed us to explore the idea of compartmentalizing products.

A mockup showing what the QR tag might look like on the bag as it is being scanned by our app.

Thinking About Functionality

Thinking about it being a PWA for easy access. Would also make it easy to access the QR code, instead of directing it to the app store, it could just direct you to the webpage, you’re still able to install the PWA on your phone.

Final Design

Main Train Case

Our final train case was designed with the understanding that users would be taking this with them while traveling. So our final dimensions made sure the bag would comply with commercial flight restrictions. The final bag measures 6in x 7.25in x 9.75in and is made of a water resistant RPET material to would make cleanup inside the bag easy. We use an EVA foam on the interior to give structure to the bag while also adding protection to valuable products inside.

The final design mockup of our modular train case. Model by Celso Pereira.

Digital Companion

Our final digital companion app was focused on helping users stay organized, as well as keep track of their inventory so they could refill products as needed. By selecting how frequently the user uses a product, we can estimate how often they would need to refill it and send them push notifications for a refill. If we had more time for this project, we would have explored connecting them to stores nearby that have the product.

The final UI screens showing our scanning feature, the product inventory feature, and the product checklist feature.

Reflection

Physical Train Case

I was happy with the progress my team made, the outcome we produced, and the presentation we made. We had started to design the bag around the manufacturing process, so I would have liked to continue that process as well, as I imagine that would have created key differences in the bag design. I’d also like to explore more of the smaller touchpoints of the bag, like the qr code placement, small bits of copy within the bag, and the logo placement to make sure that everything was in the best place it could be.

Digital Interaction

There were a few explorations we were taking with the digital companion app, I would’ve liked to explore those more - namely the routine based function. I would’ve liked to do more user testing with that as I think our sample size was relatively small due to our time constraints. I also would have liked to spend more time on the business touchpoint of this bag. While we did have the functionality to repurchase products, I would’ve liked to explore other systems we could have implemented for the clients of Macher.

All in all, I think our team did a great job conceptualizing and executing our product design.

Back