Monkeytalk - Agnes Stenlund, Marvel app - Inside Marvel: How to build a great product
•Descargar como PPTX, PDF•
1 recomendación•271 vistas
Monkeytalk edition '17
Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a Monkeytalk - Agnes Stenlund, Marvel app - Inside Marvel: How to build a great product
Similar a Monkeytalk - Agnes Stenlund, Marvel app - Inside Marvel: How to build a great product (20)
Más de Monkeyshot
Más de Monkeyshot (20)
Último
Último (20)
Monkeytalk - Agnes Stenlund, Marvel app - Inside Marvel: How to build a great product
- 1. Inside Marvel: How To Build a Great Product
- 2. Or: The Most Valuable Things I Learned At Marvel On How To Build a Great Product That I Will Steal If I Ever Start My Own Startup
- 3. Or: 5 Things I’ve Learned At Marvel
- 4. 1. Keep aligned 2. Know your users 3. Know what to build next, and why 4. A pragmatic design process 5. Be fun, have fun
- 7. A prototyping tool for designers
- 8. A prototyping tool for designers everyone
- 10. Balancing different user needs
- 12. 1. Keep aligned
- 14. The Marvel Styleguide Creates a common design language
- 15. Live inventory of UI components, design patterns, brand assets, code snippets and developer guidelines
- 17. Design moments for sharing
- 19. 2. Know your users
- 20. All our designers do UX No one has the title
- 23. An organic process Without start and finish
- 24. Ways to listen Support, interviews, stats, tools, testing
- 26. Formal usability testing don’t reflect reality
- 28. More brains, more gains Get everybody in the room
- 29. 3. Know what to build next, and why
- 32. Benefit User Experience Strategic Value Increase of revenue Cost Difficulty Resource Risk + -
- 33. Jan Feb Mar Apr May
- 34. 4. A pragmatic design process
- 35. Never jump straight into Sketch
- 45. 5. Be fun, have fun
- 47. Every part of your product has the opportunity to make someone smile
- 50. Functional, Reliable, Usable + pleasurable?
- 57. Use a lot of gifs and drink beer together
- 58. This is Maxime De Greve We make fun of him
- 59. Maxime De Knee
- 60. Maxime De Bee
- 61. Maxime De Wave
- 62. Maxime De Belgian Cheese
- 64. To wrap things up
- 65. (The things I would steal)
- 66. 1. Keep aligned 2. Know your users 3. Know what to build next, and why 4. A pragmatic design process 5. Be fun, have fun
- 67. Thank you! Say hi @agnesstenlund
Notas del editor
- I’m happy to be here today to talk about How To Build A Great Product, this talk should've been called -
- But it was a bit too long so what I’ll talk about today
- I will guide you through our design process, roadmap and thinking - with
- the support of these five things. But first, a short introduction to me, why I’m here
- My name is Agnes, I am from Stockholm. I currently live in London where I work in the product team at Marvel as a design intern. The great thing about being an intern is that I can ask A LOT of stupid questions. And I’m not weight down by expertise and conventional wisdom.
- How many of you have used Marvel? How many have heard of it? Marvel is a prototyping, collaboration and also design platform Allowing you to take static mockups Which can be wireframes, psd, sketch files and turn those into interactive prototypes
- The Marvel founders scratched their own itch when they first build Marvel. It was made for designers, working at agencies and companies. But this is not the case anymore. Three years into the future and we've grown to over 1 million users with 1000 sign ups everyday.
- Marvel has become a great tool for anybody who wants to create something, users stretch from big enterprises with large design teams to developers, marketing and sales teams, even schools and universities, using as part of their education - ‘like this example here
- on an event for Girls in Tech. Before, Marvel didn’t really have to go out and talk to their users, since they themselves were the main user. The challenge we are facing now
- is How to balance the different needs of the different users, keeping track of all the different scenarios and different ways they want to interact with marvel. And so with this new user base, many people were now saying that they didn’t have any design software and could not create designs to put into their prototypes.
- So we built a simple design tool called Canvas, which is easy to use and on the web, so you don’t even have to download it, and once your designs are done, you are already in Marvel and can start making them clickable. This is what I’m working on. For example, making pre/built wireframes that will help you quickly get a prototype out there. But let’s get started with the first thing I’ve learnt at Marvel
- Keeping aligned is about speaking the same language and consciously designing moments for sharing work and ideas. When Marvel started to grow, both as a product and a company, a challenge was how to apply our identity cohesively to all of our products, making sure everyone on the team has a similar understanding of how Marvel should look, feel and function.
- So the Marvel styleguide was created. The styleguide is drool worthy in itself if you are a person who likes design and structure, but to me the very best thing about our style guide is that it gives us all a
- common design language. An the best thing about that is that I and the other designers can stop worrying about form and truly focus on what matters most to the experience: function, content, copywriting and user flows.
- The styleguie is basically a central hub where we house a live inventory of UI components, design patterns, brand assets, code snippets, developer guidelines and anything else associated with Marvel’s identity. Each style has a name and a purpose, and we have defined a set of single-purpose CSS classes, one for each style.
- It looks like this. You can find the Marvel styleguide online, it’s open to anybody and it’s soon going to be open source. / But keeping aligned is not only about design systems,
- but also about designing moments for sharing work and ideas. When designers end up working in silos, which use to be the case at Marvel, a features could be released and only the designer and developer involved would notice. So we designed a process around sharing work. Every other Friday
- the whole company has a show and tell, where we all share what we’ve been up to the last two weeks. Every Monday morning we have a design review to let the other designers know more in detail what we are working on, and give each other feedback. This has helped me loads in feeling involved and seeing the big picture. Being involved in the range of different problems we are solving. Which brings me to-
- Truly understanding your users is key to build a great product. Like I said earlier, as more people are using Marvel, we’ve had to find new ways of understanding the needs of our users. Although the process for doing this was not what I expected.
- To begin with, there are no UX designers at Marvel, but they all do UX. User experience is really more than just a step in the process and UX as well as UI is something every designer at Marvel should have in their toolbox. The designers are called product designers, and they are also-
- product owners. All designers but one also knows how to write code. Before starting at Marvel, I thought I’d do research and ideate all day long to find out what users want. I’d imagine we’d be doing stuff like -
- -this all day, and that there would be a clear thread between interviews and insight and design. Reality?
- it’s an organic process, where these steps happen simultaneously and organically. And I’m not always a part of the whole process from start to finish. Partly because there most often isn't a start and a finish. It’s an ongoing process. We have no specific time or team for research. Research happens all the time and by pretty much everyone. So we have many many ways to continuously listen to our users.
- Our costumer success team is brilliant, one thing they do is checking in with the bigger clients, asking them what they need 5 months before their subscription will be renewed, they give them a call to see if they are happy and what they want. Support is at the heart of Marvel and our hidden gateway to a great product. Other ways to listen to users doing skype calls with users, and visit them in their offices. We constantly check and analyse stats, and feature requests and feedback is a constant stream. A tool I really like - is
- Like full story. In Fullstory you can look at a real session and see where the user has problems. When you look over someones shoulder as they use your product, they won’t behave like they actually do. Fullstory let’s you record every design session, letting you discover the real pain points, in a real context.
- and also - Even thought our platform seems simple on the outside, in reality has a complicated structure. To keep track of all users and user scenarios -
- We created this checklist. Every time a new feature is designed, this checklist should be considered for all possible scenarios. A way of keeping all of these different scenarios is that when we brainstorm for a new feature, we want to get as many people as possible in the room.
- to have more perspectives to helps us think of more user scenarios together. Founders, designers and developers also have roadmap planning sessions, where we plan what to do next.
- How do you know what to build next, how to prioritise one thing over another? We get our direction through constant conversation with and feedback from our users. But we get feature requests all the time, and what I’ve learned is to always ask why.
- Why do you want this feature? Most of the time, when you ask why someone wants a feature, you realise that the underlying problem is something else. Usually another feature isn't easy enough to understand or they are just asking because a competitor has that feature. For the stuff that we do want to build, the stuff that users keep asking for or the stuff we are are convinced will make a difference -
- We score them - it looks like this.
- We will look at how big the benefits and costs are. Benefits like - and costs like -. Together they give us a score. And the highest score gets the highest rank, highest rank is going to be done first.
- Put it together in a Roadmap, which looks something like this. Once we know what to build and why, it’s time to start designing-
- The fourth thing I’ve learned. Have a pragmatic design process There are a lot of opinions out there on design process. Maybe even a fair amount of finger pointing. Before I started working as a product designer at Marvel, in design school and in articles you’d hear things like
- Well. A lot of the time, we do. I think that if what you produce is good, how you got there doesn't really matter. I think we tend to overstate the importance of our processes, because it gives us a sense of certainty that the end result will be good. And it’s also something great to sell to your client if you are an ageny. But being a company, we can just see what works - not what sounds best - and do that. Because with pre-designed elements from our styleguide already in sketch, and the roadmap and user need in our backbone (because they keep talking to us) there is no point in going through all the steps of the process JUST BECAUSE. The fact that you sketched it on paper first doesn’t make you a better designer. Also-
- The designers at Marvel solve different types of problems, for different users and user scenarios. Therefore, we each have our own design process. Parts of it is defined, but not all of it is set in stone. One of our designers at Marvel will Map out every single user scenario and context, with the help of a checklist and user flows. To make sure nobody is forgotten. He is also the one checking that the colours are visible and that the website is easy to use, even if you are color blind. Keeping track of, well, everybody. Meanwhile,
- in Canvas, and at this stage all the users will have the same experience, we just have to focus on making sure that no matter the user and their context, we have to make it easy to understand, and delightful. That’s what we care about. So I wanna show you the design process for a small thing I designed in Canvas. I wanted to fix the font selector inside of canvas, When designing i first looked at some common best practices, and then jumped straight to sketch. From there, I used our predefined shapes and colors from the style guide.
- Then when I had been staring at the design for too long, I threw two variations into our slack channel "design feedback”, and got input from other designers.
- that’s a joke. Once designed, I made a protoype
- I know I’m biased. But prototyping is the best. We always do Marvel prototypes of everything we design. Being able to interact with the design help you find loopholes, and is also the best way to communicate how something actually works. So When the prototype is done, we write the specs document. We have a set template for this.
- As you can see I ha to state my goal, how I will measure success, the design and prototype in there. I actually love this specs template, because it’s a great habit creator that forces me to reason and write it down keeps us aligned make sure I don’t miss anything At the bottom we write BDD
- BDD stands for Behaviour Driven Development, That works as a tool for collaboration, and is basically a type of language that allows you to think about every user scenario beforehand, and write them out, like this:
- Having tools to take all the different user scenarios into account before actually start building something, saves a lot of time, and also bridges the gap between developers and designers. But finally - the last thing out of the five things - and my personal favourite -
- Be fun and have fun. This is actually about much more than being fun. It’s about taking the opportunity to stop thinking of your software as just software, and start thinking about it as a piece of yourself, and as a means of not just solving the users problem, but making them feel good you while you do it. Basically, making people feel like this -
- Because, I’ve learned at Marvel that -
- every part of your product has the opportunity to make someone smile. I was introduce to this idea by Murat, the founder of Marvel and also a designer, when he put this book in my hands:
- This book is called designing for emotion and was written by a designer at Mailchimp. It offers a different focus when designing an interface - Basically it says that once a product is
- functional, reliable an usable - why not also make it -
- pleasurable? How do we do this at Marvel? It’s about the small things. Like this -
- simple little animation in our sketch plugin. It obviously isn't needed for the plugin to work, but it does make the waiting a bit more fun
- You jump into Twitter and see people are talking about it. This guy says that this animation is so damn good he doesn't even mind waiting. Other people love this little detail-
- And they talk about it on Twitter.
- This is our 404 page, which also gets a lot of love. At one point, our old 404 page, which was a bunch of fail gifs, got more so shared that it ultimately got more views than the Marvel site itself. This is obviously a great way of making users talk about you -
- Like this guy. Making the experience more fun doesn't cost much and doesn't take a lot of resources - All you have to do is make time to put a bit of love and personality into your product, and people will want to tell the world how much they love you. The other part is about HAVING fun.
- There are a lot of lunches, beers, night outs, trips and internal jokes
- This may be the key to Marvels sucess. At design school, we shared feelings in order to get closer, at Marvel we become close by making fun of each other. For example,
- This is Max, one of the designers at Marvel. He is from Belgium. His name is Maxime de Greve.
- Maxime de Knee, maxima de Belgian cheese, Maxime de bird, Maxime de wave, Maxime de be. I honestly think this is a legit way to spend your time at the office. Working together just becomes a whole lot more fun, and when it’s more fun we work better. And when we work better we work faster.
- It’s Magic. And if those things I just said aren’t actually true, at least we had fun along the way.
- (These Are The things I would steal if I were to start my own startup.)
- And the last one is the most important one Whatever your building - why not make it fun to build and fun to use Take the opportunity to not only solve problems, but create a connection.
- Thank you!