Some of the project concepts and the processes fall under the Non-Disclosure Agreement (NDA). I have used dummy data on all the screens and have blurred out some of the images to protect the confidentiality of the content. All the work belongs to the respective companies and should not be copied or recreated in any manner.
Project Runway
Overview
Estée Lauder Companies (ELC) is one of the leading manufacturers and marketers of prestige skincare, makeup, fragrance and hair care products based in New York City, USA. More than 25 brands exist under the umbrella of Estée Lauder Companies.
Before a new product at ELC is launched in the market, it goes through several stages - from the inception of the idea to its manufacturing. Furthermore, various stakeholders with different roles and responsibilities are involved at every stage.
A variety of tools and systems were used to execute the tasks associated with each stage. The lack of a centralized system raised some significant challenges pertaining to the planning, collaboration, and monitoring of the new product launches.
Project Runway developed at Mindstix Software Labs, was an enterprise solution to overcome the above challenges. This was one of the biggest projects at Mindstix Software Labs. Our team consisted of more than 40 members, which included 3 Product Experience Designers.
My Role
Product Experience Designer,
Mindstix Software Labs, Pune, India
Duration
8 months, August 2019 - March 2020
Tasks
Information Architecture, Process Diagram, Wireframing, Visual Design, Prototyping, Usability Testing.
The Challenges faced by the Stakeholders
Our clients based in the USA were the stakeholders involved at different stages in the process of New Product Launches (NPL).
Following were the three main challenges faced by them:
#1 Inability to view the new product launches across different time periods
With the existing systems and tools at ELC, the stakeholders were unable to effectively view the launches across different time periods e.g monthly, quarterly, or during a specific season.
This was crucial for efficient planning of the product launches.
#2 Inefficient collaboration between the stakeholders
Different stages of the new product launch involved various stakeholders. Multiple systems were used by different stakeholders which resulted in isolated working. Lots of time and effort was wasted due to inefficient collaboration, which sometimes affected the timelines and ultimately negatively affected the revenue.
#3 Difficulty in monitoring the progress of the different products
Global Marketing Manager, which was one of the key stakeholders, was required to get a holistic view of all the products in the pipeline under their region and their progress status.
The existing systems and tools at ELC didn't fulfill this requirement.
The Process
Project Runway was to be executed in three phases due to its complexity and vastness. Phase 1 was to design and develop a Marketing Calendar to overcome challenge #1. Phase 2 dealt with the section that involved the seven stages of the new product launch and tackled challenge #2. Phase 3 involved designing the Dashboards involving challenge #3.
Each Phase was divided into different sprints and lasted for around four months. During the initial design sprints, our focus was to break down the above main challenges into smaller bits, understand the requirements and concretize the functionalities.
In the next design sprints, we focussed on executing those functionalities through high-fidelity mockups and iterations.
My Role and Responsibilites
This was my first project at Mindstix Software Labs. Some of the core functionalities for these phases were already determined before I joined the team. Two of my colleagues from the Design Team, one Product UX Designer, and another Senior Product UX Designer had already designed a major part of Phase 1 of this project when I joined the team.
I was primarily responsible for the UX/UI Design of Phase 2. I worked closely with the Project Manager responsible for Phase 2, Development Team, Onsite clients, Creative Director, and my Design team members for understanding the user requirements, conceptualizing the ideas, and shaping the experiences of the platform.
My key responsibilities were to create the Information Architecture (IA) for the platform, understand and analyze the user requirements and tasks, create concepts, and present them to the clients for feedback.
Understanding the process of a new product launch
Every product went through multiple stages, before being launched into the market. Each stage involved different teams and stakeholders having various roles and responsibilities. The completion of certain tasks was necessary for the product to proceed into the next stage.
Before beginning with the design for Phase 2, it was necessary to first get a thorough understanding of this process.
I partnered with the Project Manager and design team members to create a first cut of the process diagram based on the documents shared by the clients and client briefings. We got feedback from the client and accordingly made changes. After many such changes, we built the final process diagram which formed the basis for the Information Architecture (IA) of Project Runway.
Following is some part of the final process diagram. The image has been blurred for NDA (Non-Disclosure Agreement) reasons.
After getting approval from our clients on the process diagram, we created the Information Architecture (IA) for our platform Runway. This IA formed the backbone for our upcoming design solutions.
Following was the final IA for Runway. The image has been blurred for NDA reasons.
Understanding the User Requirements
We followed the agile process and worked in a fast and iterative environment for executing this project. Collaboration amongst the three of us designers and sharing of the workload whilst executing our own responsibilities was crucial for adhering to stringent timelines.
Often in such a fast-paced environment, considerable time cannot be invested in conducting in-depth primary research to come up with the design solutions. Hence I conceptualized the first cuts of the designs based on my understanding gathered through initial client briefings. This facilitated further discussions and iterations.
Collaborating with the clients for discovering their requirements
When I started working on this project, I had to study numerous excel sheets, presentations, and client briefing call recordings to understand the seven stages. Our clients could only share limited data and screenshots of their existing systems due to NDA reasons. With IA and process diagram in place, it was now time to dive deeper into understanding the user requirements at each stage.
We conducted a brief interview of the clients, i.e stakeholders involved in stage 1 which was the Concept Stage. Based on this understanding, I along with my senior colleague from Design Team created the first cut of low-fidelity and mid-fidelity wireframes. These were demonstrated to the clients for feedback and accordingly worked upon for the next iterations. Only after getting the approval from the clients for low-fidelity wireframes, we then proceeded with converting these wireframes into high-fidelity visual mockups.
Following are some of the low-fidelity and mid-fidelity wireframes that we designed:
Often the clients can't recollect all the challenges they face during the initial briefings. The discussions around low-fidelity and mid-fidelity wireframes were very effective in discovering the key pain points and needs of the clients. Sometimes the requirements and functionalities concretized at the end of these discussions were quite different from the ones we began with.
Hence, Low-fidelity and mid-fidelity wireframes allowed us to give quick turnarounds and accommodate changing client requirements.
Collaboration with the in-house Development Team
If designers are the ones who envisage the ideas, then developers are the ones who bring those ideas to fruition.
Often, the Project Manager and we three designers were involved during initial client briefings. After concretizing the core functionalities, we connected with the Development Team at Mindstix Software Labs for further discussions.
We demonstrated the process diagram, information architecture (IA) of the system, and mutually planned a list of features that could be implemented during each design sprint. The collaboration between the Design and the Development Team right from the start truly helped us in accomodating each other's constraints and acknowledging different thought processes.
The Solution
Project Runway was a digital platform developed to assist the users in an effective planning, execution and monitoring of the new product launches. It comprised of the following main sections.
Marketing Calendar
This section was largely designed and developed during Phase 1 by my two design colleagues.
Marketing Calendar helped the users to view the product launches across different time periods e.g monthly, quarterly, or during a specific season. It also allowed the users to view the products according to their stages.
Key Features of the Marketing Calendar
Portfolio and Program Workspaces
This section was designed and developed during Phase 2 in which I was primarily involved.
We learned that different products together constituted a single Program. Several such Programs together formed one Portfolio. Different Marketing Managers were responsible for these Portfolios.
Portfolio Workspace enabled Global Marketing Manager, a key stakeholder, to view the status of different Programs at a global level. This workspace provided a quick entry point to multiple key sections.
Program Workspace enabled the user to efficiently view the status of the Program, monitor its progress, and collaborate with other stakeholders.
Key Features of the Portfolio and Program Workspaces
Publish Program Page
This was one of the most challenging sections for designing and development. I was primarily involved in the UX Design of this section.
Marketing Managers at ELC needed to demonstrate the Program idea to other stakeholders to seek their approval. Along with this main document, other supporting documents and lists also needed to be attached.
Publish Program page encompassed all these documents and made them easily accessible and shareable. The different tools under the Program Details section enabled the Manager to create visually appealing presentations in a short time.
Key Features of the Publish Program Page
In hindsight
Project Runway was my first design project at Mindstix Software Labs. I was a part of one of the biggest projects in this company and worked with a dynamic and exciting team. In a span of 8 months, I gained some crucial learnings:
# Collaboration is the key
Due to its sheer complexity and vastness, some solid strategies were required for executing this project. Early collaboration with the onsite clients and in-house cross-functional teams was one of the most fruitful strategies that helped us adhere to our stringent timelines. We involved our clients from the beginning in our design process. Together, we discovered the user requirements and evolved the design. Through the daily stand-up meetings, we collaborated with the in-house development team to discuss the progress of the project. At times, it was challenging for the Design Team to negotiate with the Development Team while executing some design features. Timely collaboration between both teams enabled sharing of their concerns and addressing them effectively.
# Fail Fast Fail Early is the mantra
Seeking timely feedback on the low-fidelity wireframes from the stakeholders enabled us to come up with multiple iterations in a short time period. This further accelerated understanding user requirements, determining the functionalities, and creating high-fidelity visual mockups.
# Robust Design System
It was essential to have a strong design system in place for delivering high-fidelity visual mockups adhering to strict deadlines.
One of my design colleagues, who was involved in this project since Phase 1, assisted greatly towards developing a robust design system, which proved to be a huge time saver.
More Projects
One Console
One Press
Redesigning Myntra