W8心得 <<
Previous Next >> W9心得
w9
註冊並開始學習onshape
看TOP 0P 0文章
通過設計協作創建更好的產品-心態，工具，過程
肖恩·莫尼漢（Shaun Moynihan）
2019年7月10日
今天，數字產品比以往任何時候都更加複雜。創建它們需要多個團隊
成員，每個成員都有自己的一套技能和專業知識。例如，在Savvy，我們的客戶
與以下人員緊密合作：產品經理，用戶體驗設計師，視覺設計師，開發人員，內容戰略家和成長專家。
我們使用設計協作來處理這種複雜性。正確完成，設計協作可助力
每個專家都有共同的心態，流程和工具，以建立更好的產品。
我們編寫了此資源，以幫助其他應用程序創建者採用協作文化和流程。讀
繼續學習為什麼設計協作對於創造引人注目的產品很重要，以及
經驗。我們還將深入探討設計協作心態和文化，工具的要素
進行有效的設計協作，以及實際工作中的設計協作示例。
什麼是“設計”協作？
在進入之前，我們需要在同一頁面上了解什麼是設計協作。簡單來說，設計協作就是在設計優先的環境中進行協作。
通常將協作定義為兩個或兩個以上的人共同完成一項任務
為了實現一個共同的目標，設計協作涉及更多。
設計協作包括更多具有不同技能，艱鉅挑戰和更大規模的人員
具有深遠影響的目標。
您可能將協作視為兩個人掛在一塊藝術品上。它只需要
溝通，團隊合作和四隻手。設計協作是指一組策展人
精心設計訪問者的體驗。他們選擇藝術品，選擇在何處以及如何懸掛藝術品，
它所居住的房間（以及房間的照明，家具），甚至前面的房間和整個建築物
為什麼設計協作很重要
您可以設計產品而無需協作，但是需要一個協作設計過程才能完成
該產品很棒。這就是設計協作如此重要的原因。
我們不僅為客戶構建應用程序。精明構建複雜的多平台體驗
內部系統，在某些情況下還包括整個品牌和業務。為此，我們利用專業知識
涵蓋多個核心學科：戰略，設計，開發和增長。每個項目都涉及
許多人都有各自的技能和專長。
設計協作將這些思想融合在一起，將他們各自的專業知識結合在一起
創建解決方案，以解決共同目標的所有方面。而不是一個人遇到問題
角度來看，設計協作將這個問題擺在所有專家面前，迫使他們考慮新
觀點和可能性。
例如，我們在設計過程的早期就讓我們的開發人員參與進來，以確保我們
盡快解決技術機會和局限性。這使我們可以
優勢並推動我們的技術能力，同時進一步消除了昂貴的障礙
處理。它還限制了一個人可以在筒倉中工作的數量，從而使工作保持公開狀態
並強調用戶需求和產品目標。
培養設計協作心態
在設計過程中建立有效的協作，正確的思維方式將大有幫助。它
為誰進行協作，如何合作以及達到何種目的奠定了指導方針。
合作適合每個人
設計師有時會認為不是設計師的人沒有資格提供良好的產品
反饋。但是出色的設計不只是視覺效果。它涵蓋了有關產品的所有內容，從
其品牌，其工程技術以使其成長。
設計協作吸引了許多人，每個人都有自己的觀點和優勢。它
給大家一個聲音。這些新鮮的觀點為設計師提供了更多信息。觀點
使設計師能夠對對其他設計產生持久影響的選擇做出正確的決定，
開發和營銷選擇。
與客戶的協作與與其他設計師和團隊的協作一樣重要
成員。在Savvy，我們讓客戶參與其產品的整個創作過程。我們
花些時間來解釋選項，並與客戶進行討論以確保我們了解他們的想法。
這使我們能夠及早獲得客戶的認可，並從明確的起點和終點開始工作。
與客戶的合作意味著無需花錢就可以更快地獲得更清晰的產品後台
Create a Better Product With Design Collaboration — Mindset, Tools, Process
Shaun Moynihan
Jul 10, 2019
Digital products are more complex today than ever before. Creating them requires multiple team
members, each with their own set of skills and expertise. At Savvy, for example, our customers
work closely with: a product manager, UX designer, visual designer, developer(s), content
strategist, and a growth specialist.
We use design collaboration to handle this complexity. Done right, design collaboration empowers
each of those experts with the mindset, process, and tools to come together and build a better
product faster.
We wrote this resource to help other app creators adopt a collaboration culture and process. Read
on to learn why design collaboration is important for creating compelling products and
experiences. We'll also dive into the elements of a design collaboration mindset and culture, tools
for effective design collaboration, and a real-world example of design collaboration at work.
What is "Design" Collaboration?
Before we jump into it, we need to get on the same page about what design collaboration is... and
is not. At its simplest, design collaboration is collaboration in a design-first environment. But,
because of the nature of design, especially the design we do at Savvy, design collaboration tends
to go beyond what people normally think of as collaboration.
While collaboration is generally defined as two or more people working together on the same task
towards a common goal, design collaboration involves much more.
Design collaboration includes more people with different skillsets, tougher challenges, and bigger
goals with farther-reaching impacts.
You might think of collaboration as two people hanging a piece of art. It simply requires
communication, teamwork, and four hands. Design collaboration is when a team of curators
carefully design a visitor's experience. They select the art, choose where and how to hang it, which
room it lives in (and the room's lighting, furniture), even the preceding rooms and the building as
a whole.
Why Design Collaboration is Important
You can design a product without collaboration, but it takes a collaborative design process to make
that product great. That's why design collaboration is so fundamental.
We don't just build apps for our customers. Savvy builds multi-platform experiences, complex
internal systems, and in some cases, entire brands and businesses. To do so, we leverage expertise
across several core disciplines: strategy, design, development, and growth. Each project involves
many people, each with their own skillsets and specialties.
Design collaboration puts those minds together, combining their separate, specialized expertise to
create solutions that tackle all aspects of a shared goal. Instead of coming at a problem from one
angle, design collaboration places that problem in front of all experts, forcing them to consider new
perspectives and possibilities.
For example, we involve our developers early on in the design process to make sure we're
accounting for technical opportunities and limitations as soon as possible. This allows us to take
I:\DesignCollaborationBetterProducts.txt -- File date: 2/29/2020 -- File time: 4:02:48 PM
DesignCollaborationBetterProducts.txt -- Printed on 2/29/2020, 4:04:22 PM -- Page 2
advantage of and push our technical capabilities while eliminating costly roadblocks further in the
process. It also limits how much a single person can work in a silo, keeping the work in the open
and the emphasis on the user needs and product goals.
Cultivating a Design Collaboration Mindset
The right mindset goes a long way in establishing effective collaboration in the design process. It
lays the guidelines for who collaborates, how, and to what end.
COLLABORATION IS FOR EVERYONE
Designers sometimes think that people who are not designers are not qualified to give good
feedback. But great design is more than visuals. It encompasses everything about a product, from
its branding to its engineering to its growth.
Design collaboration brings in many people, each with their own perspectives and strengths. It
gives everyone a voice. These fresh perspectives give designers more information. Perspectives
equip designers to make the right decisions on choices that have lasting impacts on other design,
development, and marketing options down the road.
Collaboration with customers is as important as collaboration with other designers and team
members. At Savvy, we keep our customer involved throughout the creation of their product. We
take our time to explain options and have discussions with the customer to make sure we
understand their thoughts.
This enables us to get buy-in from customers early on and work from clear beginnings and ends.
Larger reveals aren't big surprises, and no one gets to the point where they're seeing work for the
first time.
Customer collaboration means arriving at a more defined product sooner, without costly
back-stepping and unnecessary meetings.
It's easy to get caught up in your role and ignore the big picture. By involving more people earlier
on, you're fostering closer connections with teammates and cultivating a shared responsibility and
interest in the success of the product. You're creating a more open and transparent process, as
well a more connected and invested team.
COLLABORATION IS CONTEXTUAL
Customers come to us with complex challenges and goals. Not to mention, we continue to work
with our customers for months, even years, and accumulate vast tomes of knowledge on past
decisions, research, and other valuable context.
By adopting a context-first approach, you can make sure everyone is at the highest level of
knowledge. This enables them to make the most informed decisions as they work on the product.
To accomplish this, we keep everyone at Savvy updated on relevant information by bringing in all
team members early, documenting and recording meetings, establishing some overlap, and treating
the next team member in the process like a customer.
Context is just as important on a case-by-case collaborative basis. Follow these guidelines to keep
context first in collaboration:
Provide context before showing your work. Chances are if your work is on the screen while you're
giving context, you've lost your audience's attention.
Describe the problem you're trying to solve or goal you're trying to achieve.
I:\DesignCollaborationBetterProducts.txt -- File date: 2/29/2020 -- File time: 4:02:48 PM
DesignCollaborationBetterProducts.txt -- Printed on 2/29/2020, 4:04:22 PM -- Page 3
Present your work as it relates to the problem at hand. Explain your thinking and why you made
certain decisions.
Be specific about what you want feedback on.
COLLABORATION IS OPEN, HONEST, AND FEARLESS
It isn't easy to put your work (and yourself) out there. Emotions can get in the way of providing
open and honest feedback, especially when you're worried about hurting the other person's feelings.
That doesn't mean there's no place for emotion in collaboration. How something makes you feel is
important in design. We think of and create solutions for people... people who are emotional, and
who use emotions in their decisions. Leaving emotion out of the conversation might short-change a
potential idea or solution. At best, having only a pragmatic discussion around facts and data won't
provide the full picture. At worst, it may be a red herring or provide a false narrative.
At Savvy, we empower our team to be "fearless" about receiving feedback. This means letting go
of any anxieties about being judged for what we create. It also means understanding that we are
stronger together and stand a greater chance of creating something great. In being fearless, we
better trust and empower each other to give honest and thoughtful feedback.
Our team also believes in being fearless about providing feedback. This means understanding the
problem that needs solving as well as the customer's brand and goals. It also means asking lots of
questions either to uncover relevant thoughts or to help guide decisions.
Try presenting feedback in an exploratory and guiding manner, with the intent of building up and
improving the work rather than tearing it down.
Tweet This
Your feedback should be constructive. Instead of saying you don't like something, frame your
feedback to point back to the problem you're trying to help solve. Provide actionable steps on
improving the work or at the very least the reasoning behind your thinking. And don't forget to
express what you like and why.
COLLABORATION IS MORE THAN NEW IDEAS
It's one thing to be open and accepting of collaborative feedback, another to parse those thoughts
and use them as catalysts to spark your own. This is a more advanced skill that develops over
time. One way to practice this is to become a better listener.
Often, during a conversation with others, we think more about what we are going to say next rather
than what others are saying. This impacts the feedback process, especially in design, because we
often know what we want to say before hearing another opinion or solution.
When you choose to listen first and react second, it allows you to fully understand the feedback
someone else is presenting and sets you up to go deeper — what is the perspective they're using
and the place they're coming from? Chances are this is a perspective you didn't consider during the
creation process. By listening to and understanding the context and reasoning behind the feedback
you're receiving, you're opening yourself to more ways of looking at, thinking of, and experiencing
your design. You can then test these new perspectives against the challenges, goals, and use cases
you're designing for to see if they better suit the user.
It's easier to be more receptive of feedback when all collaborators practice active listening.
Ultimately, the skill of giving great feedback comes from learning how to receive it. As we make an
effort to be better listeners, we also find ourselves becoming more humble and, in our opinion,
I:\DesignCollaborationBetterProducts.txt -- File date: 2/29/2020 -- File time: 4:02:48 PM
DesignCollaborationBetterProducts.txt -- Printed on 2/29/2020, 4:04:22 PM -- Page 4
better designers.
Finding and Using the Right Design Collaboration Tools
The right tools go a long way in reinforcing your team's design collaboration mindset. In this
section, you'll learn what to look for in collaboration tools. We also recommend tools based on our
own experiences.
SELECTING THE RIGHT TOOLS
Effective collaboration tools remove all barriers for collaborators to quickly and easily access and
interact with the work. This keeps the focus on giving feedback. They also allow others to
collaborate on a design without destroying the original.
In the past, we used relied on tools that provided basic versioning control instead of true
collaborative features. For example, a designer would save a Sketch file and upload it to Dropbox.
Another team member would then download it, work on it, and re-upload it. There was no easy way
to make changes while the file was in another's hands. We tried something similar with Github, a
tool that proved great for managing codebases, but not so much with iterative design work.
Needless to say, these version control processes made our collaboration more time consuming,
confusing, and very un-collaborative.
Now we choose from a variety of more advanced tools depending on the type of collaboration we
want to achieve.
FIGMA
This is a collaboration-first, shared workspace tool. Figma works well for having multiple people in
same area of the design file. You can watch teammates design or work together on the same design
in real time.
Benefits:
Figma reduces the ability for someone to work in a silo.
There's no need to add unnecessary polish or create static deliverables to enable collaboration. So
you don't need to change your workflow to show off a design.
It's easy to see and interact with the work in its native environment and apply tweaks at will.
When to use: Flow docs, high-fidelity wireframes, spur-of-the-moment collaboration, and walking
customers through a series of screens to explain and get feedback on design direction.
MARVEL
While Figma tends to feel more free-form and flexible, Marvel allows for a more standardized form
of collaboration. It also makes it easy on our customers to collaborate with us.
Benefits:
Marvel is a cleaner, more formalized and focused space, great for collaborating with non-design
team members.
It removes all need for the customer to pay for an account or have a deep understanding of the tool
to see the work.
I:\DesignCollaborationBetterProducts.txt -- File date: 2/29/2020 -- File time: 4:02:48 PM
DesignCollaborationBetterProducts.txt -- Printed on 2/29/2020, 4:04:22 PM -- Page 5
Customers can download screens and see them in action on a device environment via the Marvel
app.
When to use: Presenting more finalized design work with customers and developers. (Learn about
how Marvel compares with other prototyping tools.)
OTHER COLLABORATION TOOLS
Zeplin is a useful hand-off tool that allows developers to dive into the nitty gritty specs of design
work. (We talk more in-depth about Zeplin here.)
Quip is a great platform for brainstorming and product/process documentation. We use it to record
and organize all of the context and knowledge that team members need to know when working on
a project. It's also useful for brainstorming new ideas that aren't visual-focused.
Please note that there are many other tools out there that add similar benefits to collaboration as
the ones listed above. This list represents the tools that have worked well for us in our day-to-day
collaboration and is not indicative of all the options that might work well for your team.
Savvy's Design Collaboration Process in Practice
Now let's take the best practices and tools outlined above and show how they fit together in a
real-life situation. We'll use the live drawing experience in the Press Play app to demonstrate the
importance of design collaboration. This experience involved significant collaboration from a
number of team members across disciplines, including a visual designer, UX designer, developer,
product manager, and of course, the customer.
THE CONTEXT AND CHALLENGE
Press Play is a sweepstakes app that holds daily, weekly, and monthly drawings. Users earn tickets
by watching ads and enter drawings by selecting five emojis. Winners are then rewarded based on
how their choices match up with the drawing's randomly-selected emojis. This particular task had
us creating a fun and exciting live experience for users awaiting the results of the live drawing.
It was important for us to create a game-like animation for this experience. We especially wanted
to evoke a sense of playfulness and anticipation on the screen where users go to see how their
chosen emojis match up with those from the sweepstakes drawing.
That said, we needed to be mindful of the level of complexity an animation requires and its impact
on the overall product's timeline and cost. Our goal was to push the level of fidelity within a
reasonable time without significantly impacting the project's budget.
THE COLLABORATIVE PROCESS
Stage 1: Wireframes and Brainstorming
First, a Savvy UX designer created Press Play's overall UX and wireframes, determining what
screens were needed and the timing for each one. She also put together a rough concept (shown
right) for the live drawing animation, expressing initial ideas based on customer's needs and the
project's established UX.
She presented the wireframes and the rough animation to the product manager and visual
designer. Then all three met with the customer so everyone would hear the feedback directly.
Stage 2: Research and Context
I:\DesignCollaborationBetterProducts.txt -- File date: 2/29/2020 -- File time: 4:02:48 PM
DesignCollaborationBetterProducts.txt -- Printed on 2/29/2020, 4:04:22 PM -- Page 6
The Savvy visual designer tasked with creating the actual live drawing animation came in with
fresh eyes and without much prior knowledge of the Press Play product. To get up to speed, he
talked in depth with the UX designer and product manager. He also dedicated additional research
time to understand the overall product goals, challenges, and to familiarize himself with the work
to date. As mentioned earlier, he was part of the wireframe presentation and present for the
customer's feedback.
With that context, he conducted some additional research more directly related to the task at hand.
In doing so, he made sure he understood the live drawing experience requirements, goals, and
challenges. He looked at other apps with similar experiences and fidelity and referenced the rough
animation to know what exactly the final animation needed to show (in this case, the winning
emojis and the user's emoji selections). Before getting too tied to a solution, he met with a Savvy
iOS developer to understand technical constraints and considerations.
Our visual designer and UX designer then brainstormed what was important for the visuals. They
agreed that there needed to be a slow reveal to build up suspense/anticipation for the user
Stage 3: Iteration and Feedback
As our visual designer worked through a number of different directions he tapped the UX designer
to chat through his progress and designs in Figma. By talking through the work they spurred more
ideas and iterations while making sure they were staying true to customer expectations. With more
solid options at hand, he met once again with the iOS developer to make sure everything was in
line from a technical perspective.
Stage 4: Customer Feedback and Development
When we landed on several, more finalized versions of the experience, the visual designer walked
through them with the customer using Figma. The product manager and UX designer for Press Play
provided feedback and guidance as well.
Once they all learned what piqued the customer's interest, the visual designer set off to maximize
the visuals and make them ready for development. He continued to work with the iOS developer to
get the most out of the concept on a technical level.
THE END RESULT
Press Play's live drawing animation is an example of design collaboration at work; a team of
cross-discipline experts working together to solve a design and development challenge with bigger
implications. Without design collaboration, we wouldn't have discovered the ideal intersection of
user experience, visual, and technical.
When the customer saw the animation alive in his app he called it "groundbreaking."
What’s more, the research, collaboration, and creation of this Press Play experience helped us
discover a gap in the product’s user journey. Originally, the live drawing’s intent was to be a fun
way to show the results to users. As we moved through the design process, we realized that if a
user doesn’t watch the live drawing, and they lose, they don’t get to experience an end to their
user journey for that drawing.
From that discovery, we decided to improve the app in a couple of other places as well. We added a
results/live drawing element to the Winner’s Circle and a win-lose history section to the User
Details side of the app. In the end, design collaboration empowered us to realize this unfulfilled
need in the user experience.
Concluding Note
I:\DesignCollaborationBetterProducts.txt -- File date: 2/29/2020 -- File time: 4:02:48 PM
DesignCollaborationBetterProducts.txt -- Printed on 2/29/2020, 4:04:22 PM -- Page 7
It takes design collaboration to tackle the complex, crucial problems that come along with building
great products and experiences. By leveraging the specialized expertise of multiple team members
across disciplines, design collaboration makes sure teams meet challenges from all perspectives
and come to better solutions. With the right mindset, tools, and process, design collaboration
empowers teams to go deeper with creative thinking and iteration.
We hope this guide gives you a good foundation from which you can build your own effective design
collaboration process. You can learn more about design and product strategy on the Savvy blog,
and feel free to contact us for help on the Savvy Apps website.
W8心得 <<
Previous Next >> W9心得