Project Overview:

I joined a group of MBAs & engineers as part of the student startup competition to develop a product demo to give to VCs at Pioneer Square Labs.

Timeline: 

Jan - April 2020

Role:

Lead Designer: Interaction Design, Prototyping, Visual Design, User Research

The Design Process

Vivid-3D

The situation🤫🤫

I joined a student-led startup with 10 people as a sole designer on the team. We created Vivid 3D, a web app that helps to improve the communication and collaboration process for design feedback in the apparel and footwear industry. Currently, the team is in the QAT mode and I am still actively giving feedback to the team.

DesignLead

On a personal 🤫🤫note

Our inspiration for this project stemmed from the journey that my teammate and I both shared on Kickstarter journey where we crowdfunded our product on Kickstarter: Mesh & Paramine. We experienced the pain-points of cross-team communication during the iteration process and the difficulty in giving and receiving feedback on a physical product. We took this hypothesis and built Vivid 3D.

Goal

Our goal is to help apparel designers collaborate and communicate their product vision with stakeholders more efficiently.

While other industries are advancing in their technology, the fashion industry lacks the use of technology to optimize production and uses outdated collaboration tools - each design iteration can take months to be reviewed and revised due to inefficiencies in cross-team communication.

Research

brandlogo

Industry Professionals Interviews

We conducted 15 interviews with apparel designers from small design studios to global design firms

fbad

Gauging Public Interests

We set up a series of Facebook and Instagram ads targeting 20-35 designers employees in megacities. This is to gauge the desirability of our product on the market. We received a high click-through rate and so we considered this as a signal that there's a want for our product.

Insights

Chat_Compressed_PS

1. Feedback in apparel design is non-contextual and unactionable

The iteration process in Apparel Design is unnecessarily long due to an inefficient feedback loop. This is because non-designers have a hard time giving feedback and connecting design with what they need in their head since they might not know the industry terminology. Plus most feedback is often given towards the end of the process.

fuckingbubble

2. The Apparel Industry is un-collaborative and demands an in-person presence 

Companies spend a lot of money and time on shipping prototypes back and forth between offices in the US and manufacturers in Asia. In addition to flying teams across the globe just for design reviews.

“It’s a roadblock when you are just waiting for packages to arrive to work, packages get stolen and stuck at customs all the time” -P1

Screen-Shot-2020-05-27-at-9.08.42-AM

3. Impossible for everyone to be on the same page due to asynchronous communication.

Iteration becomes a final hands-off instead of a work in progress which causes a lot of misunderstanding and errors in the physical prototype. All these little things that people have to do add to their unnecessary workload.

“It is exhausting to keep emailing people and updating the prototype. It would be nice if we could all view the same prototype at the same time" -P2

How might we help apparel designers collaborate and communicate their product vision with stakeholders more efficiently?

Design Principles

designprinciple

There were so many unknowns - Will the industry adopt the change? We came up with these design principles to help us drive our design decisions.

Persona

Behaviors

  • Gives feedback to junior designers on the design team
  • Works with multiple international teams (Europe & Asia)
  • Constantly asks merchandisers/ buyers for feedback on the design

Pain-points

  • Impossible to figure out which file is ready to be reviewed or which is in the process of being updated
  • Asking for feedback is time-consuming and required specific software to be downloaded
  • Spends a lot of money flying teams across the globe and sending prototypes which later delays the production rate

MVP + Scrum

work-sesh-1

I led the ideation session with MBAs, PM, and developers. We ideated on features and turned insights into actionable design plans based on feasibility and the value.

scrumboard

After setting MVP, my role was to assign tasks to developers using the scrum board and provide them with design annotation and interaction details👇👇👇

Building the Architecture

We deepened our understanding of the structure by creating a user flow. In terms of the deliverables, we decided to focus on the feedback and communication flow.

User-Flow2

Vivid 3D's complete user flow with a focus on the communication & feedback part

userflowbg-1

Low-fi sketches

Screen-Shot-2020-06-01-at-2.38.16-PM

Mid-fi wireframes

Execution

Slide the handlebar below to see the annotation and breakdown of features

Slide the handlebar above to view the annotation

1. 360° Viewer

User goal: Immerse themselves in 360° environment understand fabrications, intricate details, and silhouettes without having to physically be there. 


How? The interactive model and the default view panel allow users to drag, spin, and review every aspect of a product.

360viewer_cropped_PS

2. Comment Thread

User goal: Foster an efficient-feedback conversation between designers and non-designers.


How? Use comment threads to create organized discussions around specific messages and take the clutter out of their inboxes and messaging applications.

Comment-Thread_PS

3. Comment Tools

User goal: Help people identify relationships among the information and visual


How? In addition to text-based comments, we decided to allow other mediums of communication like file attachment, draw-over, and pin.

Comment_Drawover_PS

Draw-over tool enables visual comments and diagrams

Comment_Pin_PS

The pin tool enables a more targeted area feedback

4. Multiviewer

User goal: Easily compare models and quickly find previous design iterations.


How? Multi-select different prototypes to view snd sort prototypes by name, date added, and date modified. 

Iteration_Comparison_PS4

5. AR Link

User goal: Reduce waste in the fashion industry by cutting back on physical prototype samples and the transportation footprint in shipping.


How: Generate an AR link for a selected prototype that can be opened on their mobile devices.

ar

Rapid Iterative Prototype Testing

We conducted prototype testing on designers from Adidas, Nike, Levi's, and Kenneth Cole. I decided to use the RITE method due to time constraints. Instead of waiting until the end of the study to gather the findings and suggest improvements, I led the iteration on the design as soon as issues are discovered. Here's the revised design. 

Final-V-1

Revised design based on our prototype testing

Product Demo Feedback:

- "This is great but I wish I can see the comment right next to what my boss has drawn over" -P2

- "I wish I can dissect the shoes into how I designed them in layers because I only needed to change the sole of the shoes" -P3

Challenge 1: Comments Layout

The two alternatives have their own pros and cons. On one hand, the first version allows for a no-distraction overview of the model. On the other hand, a fixed comment toolbar will force the users to look back and forth between the model and the comment, which creates a disjoint interaction.

Version 1

layout-1-blue

Pros: Better visibility of the model 

Cons: Harder to link the visual and the comment

Version 2

layout-2-blue

Pros: Easier to link the visual and the comment

Cons: Worse visibility of the model

How do I make the trade-off?

After conducting some A/B testing, it was confirmed that users spend more time going through the comments with version 1. We found out that people have a hard time linking the issue (between visual and comments) in a straight forward way. The amount of mental effort that is required to complete a task involves a lot of information processing

In order to lessen the user’s cognitive load, I decided to proceed with the second design.

Final Design 

comment1_compressed

Comment in collapsed view

comment2_compressed

Comment in expanded view

Challenge 2: Layers

We also found out that it is important for these designers to be able to view prototypes in layers. We learned that apparel designers don't always design from scratch especially for commercialized brands. A lot of the time, it's only the matter of tweaking the insole, heel counters, or materials for the next collection.

Therefore, allowing designers to see in layers in addition to a complete view will help bring more attention and focus to a specific area that the designer is working on. This will also assist non-designers in giving more targeted feedback.

Final Design

layers_new_PS2

Product Demo + Presenting

Every two weeks, our team gave a short pitch to different visiting VCs and CEOS in class. We also crafted an Executive Summary and Financial Plan as part of our deliverables to present to angel investors on our final presentation day at Pioneer Square Lab. 

Click to view our Executive Summary and Financial Plan 👈

IMG_1390

Me giving a 4 mins pitch of Vivid 3D to Dan LevitanSteve Singh (from Maveron Venture Captial Group) and Greg Gottesman (from PSL Venture Capital Fund)

Screen-Shot-2020-04-15-at-1.51.15-PM-1

We gave a product demo to shoes designer at Adidas, Nike, Levi's, and Kenneth Cole. Currently, we have 2 design teams in our pipeline.

"Now I don't have to sit in every single meeting to follow up with the changes anymore." -P4

"Imagine the amount of money we will save by not having to fly the sales team from Asia just to look at the prototype." -P6

Success + Metrics

Adoption- Onboard design, merchandise, and production team. Get enterprise to pay accounts for design their teams.

Production Turnover Rate- Faster production turnover rate as a result of a more organized and streamlined feedback loop.

Expenses are reduced- Reduced rate in the amount of money that these companies spend on sampling, prototype transportation, and eliminate employee travel costs.

Ease of completion- Length of time users take to compare iterations. Higher impact on user productivity.

Reflection & Future 

Rewarding Experience

After some reflection, I discovered the importance of flexibility and adaptation in an Agile Development environment as everything was moving so quickly.

I also learned how to communicate the value of the design. As many of my teammates didn't have any prior experience working with a designer before, I had to advocate for the importance of design and user's needs.

Next Steps

The industry is struggling to work remotely -fashion weeks, trade shows, and showrooms are being canceled. How might we accommodate these fashion events moving forward?

In order to gain a better understanding of the stakeholders' needs I will continue to talk to other folks critical to the product development process. 

Shoutout to my team! 🎉🎉

Entrepreneurship Class: Company-Building from Formation to Successful Exit taught by Greg Gottesman, Founder of Rover and Ed Lazowska, Chair of Paul G. Allen School of Computer Science & Engineering.

Group-1779
devin-badge-2
Tim-Li
ofek
marisa2
Sohaib
Jackie
carson