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
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.
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
Industry Professionals Interviews
We conducted 15 interviews with apparel designers from small design studios to global design firms
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
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.
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
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
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
Pain-points
MVP + Scrum
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.
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.
Vivid 3D's complete user flow with a focus on the communication & feedback part
Low-fi sketches
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.
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.
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.
Draw-over tool enables visual comments and diagrams
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.
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.
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.
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
Pros: Better visibility of the model
Cons: Harder to link the visual and the comment
Version 2
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
Comment in collapsed view
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
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
Me giving a 4 mins pitch of Vivid 3D to Dan Levitan, Steve Singh (from Maveron Venture Captial Group) and Greg Gottesman (from PSL Venture Capital Fund)
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.