UXUI Shanghai Meetup March 21st
•Télécharger en tant que PPTX, PDF•
0 j'aime•102 vues
Too busy to learn UX methods that can save you tons of time? Wondering which UX techniques are most likely to provide useful results all along your project? Let's talk about some tactics we tried. Success stories and epic fails of methods we have tested to build digital products and interfaces consumers love to use.
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à UXUI Shanghai Meetup March 21st
Similaire à UXUI Shanghai Meetup March 21st (20)
Plus de Clément LEDORMEUR
Plus de Clément LEDORMEUR (6)
Dernier
Dernier (20)
UXUI Shanghai Meetup March 21st
- 1. Too busy to learn UX methods that can save you tons of time? Start Wondering which UX techniques are most likely to provide useful results all along your project? Let's talk about some tactics we tried. Success stories and epic fails of methods we have tested to build digital products and interfaces consumers love to use.
- 2. www.31ten.network Your Speakers Tonight QUICK INTRODUCTION Clement Clement is a highly experienced Project director at 31Ten with more than 5 years of experience in China and over 40 projects in web as Project Manager and Head of Production in a famous ecommerce agency. Julie Julie worked for more than 3 years in digital communication for the city of Paris. During this time She learnt a lot about user centric strategy and how to apply it for different contexts, audiences and challenges.
- 3. A Typical Schedule for a Web Project... Go-livePrototyping DEV UI Kick-off QA / Testing UR & UX Post-live
- 4. 1. Kick-off
- 5. “We want a website … Sure! and why?” Issue 1 Kickoff
- 6. Define your needs and requirements. Download ● The more specific you get, the best results you’ll get ● Problems you have now for an existing website or why we need a website? ● What measurables KPIs can you put in place for your website? Solution 1
- 7. “So, could we see the 1st version of design in 2 weeks?” Issue 2 Kickoff
- 8. Methodology matters: Think before doing! Read more ● User research is important even if very limited. ● Quality of the design will be impacted. ● Find an agreement on methodology Solution 2
- 9. “We want a sexy website!” Issue 3 Clement Julie The definition of Sexy in our opinion Kickoff
- 10. Please help define “sexy” for us. Read More ● Ask the Right Questions: Explain subjective feedback.(e.g. The app you find sexy is not necessarily the one your mom will find sexy) - try to think further your willings. Put clear words in the “sexy”.”I want something good” at the restaurant. ● Limiting the number of people you invite to feed back ● Position and Comment your design. ● Be very upfront and honest around the number of amends that are available or the time impact of unnecessary feedback Solution 3
- 11. 2. User Research & User Experience
- 12. “We are nothing like them...” Issue 4 UR & UX
- 13. Any idea could become a great idea. Read more ● Any idea can be a great idea. ● Be open-minded ● Leave your comfort zone. ● Some companies / websites are actually good references (R&D) so we have to use it ! ● Web is not about reinventing the wheel, but to be inspired by good practices. Solution 4
- 14. “My wife told me it was way too yellow” Issue 5 UR & UX
- 15. Make sure to have a representative panel Read more ● Know your audience ● Define your research objectives Solution 5
- 16. “I think that won’t work” Issue 6 UR & UX
- 17. Use data but sparingly ● Versions, history, A/B test results / check what you have done before. ● Good analysis of the data that can be digested, very succinct. ● Missing opportunities. ● Ask your client why it won’t work for sure = real insights. Solution 6
- 18. “We want a WOW product page, with pictures and videos. What do you think about a timelapse ?” Issue 7 UR & UX
- 19. Content is key. Read more ● Reference all the content you already have and think about the one you can produce. ● Importance of the Information Architecture. Solution 7
- 20. “Do I really need to be present for the meeting ? Because I have a million mails pending...” Issue 8 UR & UX
- 21. Explain why and educate. Read more ● Explain what the workshop is about and why every skills are important and how they can contribute. ● Stakeholders are the ones who can talk about the company / market the best. ● Different points of view / interests Solution 8
- 22. “I can’t click. Why is it all grey?” Issue 9 UR & UX
- 23. Keep your mind open ● Try to have some imagination, don’t focus on the colors or the static, focus on what you see and the content. ● Does it make sense ? ● Is the architecture understandable ? Solution 9 See Video
- 25. “Can you send me the files so I can change it by myself?” Issue 10 Design & UI
- 26. Dear designers, please don't send them! Read more ● You are the expert! ● You are hired for a reason! ● Prove your choice with data, best practices, etc… ● On-site with client for quicker changes but your expertise and experience is worthy! Solution 10
- 27. The Frankenstein. Issue 11 Design & UI
- 28. Take time for a break and go back to the beginning (UR). ● The site is a whole piece. ● Keep consistency between designs or versions. ● All components work together in harmony. ● One block can fit on one page but not on another one. Solution 11 UI Kick-off Design Validation UR & UX
- 29. “But we don’t have good pictures...” Issue 12 LOGO Design & UI
- 30. An image is worth 1000 words ● Take into account some budget to spend on visuals either from images banks/database or actually spend time on research in client pictures existing database. ● Take into account some budget for actual photo shooting according to your brand image. Solution 12
- 31. “We have 2000 usable leads in our database” Issue 13 Design & UI
- 32. Less is more. Read more ● Ask around you ● Observe Solution 13
- 34. “The website is slow and the design is not consistent” Issue 14 Prototyping, dev
- 35. UX is also about speed Use a UI kit to avoid inconsistency. ● Go backwards: From product page to Homepage ● Definitely involve developers starting from the beginning before it’s too late. Feedback and changes on wireframes, UI pages because the design is already made. ● UI KIT: Kitchen sink from Starbucks. Modular approach. Build what you need and components by components. ● Because technologies actually matters, user experience is a whole piece including speed, CMS ease of use (Don’t do a website that even your client wouldn’t use), Decent Hosting. Solution 14
- 36. “It could be really nice to add this feature” Issue 15 Prototyping, dev
- 37. Time. Is. Money. ● Think about your budget. ● Be flexible Solution 15
- 38. 5. Q&A, Testing and go live
- 39. “I am not sure about this” Issue 16 QA, testing, go live
- 40. Too late for last minute changes ! Read more ● Trust yourself and be sure about the decisions made. ● Too late to make changes now ● Go testing! Solution 16
- 41. 6. Post prod
- 42. “You are wrong!” “I was right!” Issue 17 Post prod
- 43. Both could be right or wrong! Read more ● Nothing is fixed. ● Post prod strategy. Solution 17
- 44. Conclusion
- 45. Efforts Comparison Agency VS Brand UR & UX Design,UI Proto Dev QA, Testing Post-Prod Clement Julie UR & UX Design,UI Proto Dev QA, Testing Post-Prod AGENCYBRAND
- 46. www.31ten.network Steps To A Project Success A COMPROMISE TIMELINE FROM BRAND/AGENCY SIDES 46 Kick-off UR & UX UI Proto Dev QA Go-Live
- 47. UX is a trend that you need to use with logic.
- 48. You win when you become a reference.
- 50. QUESTIONS TIME! Have a question? Ask NOW! Download the presentation by scanning the qr code ==>
Notes de l'éditeur
- Raise your hand if your are coming from brand? agency?
- Why we chose to do this talk? bar, buddies, agency vs client, design vs pm Who in the audience is coming from design vs PM account Julie cote marque VS Clement cote Agence daily life + timeline
- TO CL Green field brown field Client unable to say why he wants a website? Brief done wrong or no brief at all. (exemple: Pizza Restaurant: I want a Pizza! Once you got your pizza. Client said no I don’t like tomatoes or I don’t want a pizza). Scope not well defined. (Example: House without toilets). Fixed budget.
- The more specific you get, the best result you have. Problems you have now for an existing website or why we need a website for a new website? Uniqueness / No copy paste. What makes you different? - Be first result on search engines when searching for my brand name or products - Generate qualified leads - Qualify our prospects: when someone is contacting us they're not asking for sth out of our scope of services - Be the preferred interface for our clients to purchase from us - etc.
- TO JC Usually heard at the end of the first meeting. Because WE (brand) want to see something. Concrete things. But if you need pure execution, don’t ask a UX designer. A good design needs research, context, data.
- before planning anything, you have to agree on methodology. User research is important for the quality of the design. Methodology will also involve the stakeholders during all the process. No planning can be delivered if you don’t have the methodology first. so the question we should ask is : what’s next ? If you talk to an AD, he/she will tell you that he/she can do much better with more time.
- TO CL + TRANSITION UR & UX Sexy VS useful (Make sth beautiful VS UX): I want a sexy website (Bioderma: Key design principles). Subjective. CL: Change pic? https://www.hellomagazine.com/imagenes/healthandbeauty/hair/2017071340620/penelope-cruz-blonde-hair-donatella-versace-film-role/0-212-576/penelope-t.jpg
- https://www.webdesignerdepot.com/2018/02/making-it-pop-5-ways-to-combat-subjective-design-feedback/ Explain subjective feedback.(e.g. The app you find sexy is not necessarily the one your mom will find sexy) - try to think further your willings Put clear words in the “sexy”.”I want something good” at the restaurant.
- Who actually record or watch videos of users on your website or client website?
- TO CL We are not XXX. Difference between benchmark & Competitor analysis. It’s not because it’s not in the same industry that you should not benchmark it. Leave your comfort zone. Copy/paste this website or this idea. Let’s do exactly like them! Fuckin benchmark done wrong!
- An idea that is not dangerous is unworthy of being called an idea at all." - Oscar Wilde Article explaining Why it’s scary and why you should get out of your comfort zone Be open-minded Some companies / websites are actually good references (R&D) so we have to use it ! Web is not about reinventing the wheel, but to be inspired by good practices. What is applied for others doesn’t necessarily apply for you. Think about users first. Think about your uniqueness (example price cheaper with exact same product). Inspiration is good, not copy.
- TO JC True story. It happened when we were making a website audit. So I asked : If your wife tells your shirt is ugly, will you throw it away ? Probably not.
- Make sure to not have only one point of view. Or yours. Because maybe you’re not the target. The panel opinion is right, not one person of it. To have a representative panel you have to make sure to know your audience. (Don’t ask old people if you target teenagers) Define research objectives to ask the right panel
- TO CL Demonstrate your wireframe with data “I think that…” but I will show you that. >> better to show why (data, ab test, historic designs) BUT Data doesn’t show everything! Be careful with data! Solution:
- Versions, historic, Ab test results / check what you have done before. Good analysis of the data that can be digested, very succint. Missing opportunities. Ask your client why it won’t work for sure = real insights.
- TO JC The client is always very enthousiast about content. We want something beautiful. Or sexy. We imagine a lot how our future website could be. this kind of pictures, a video of our products. It’s really not the way to start working. The worst case I have ever had was when I was working for a new website project about the parks in Paris. They told me we want to have news articles on the home page, like a blog, to promote what we are doing. My answer was : Do you have someone to write at least every week ? Bc if you don’t, you’ll have either a very empty website OR very old post in your HP.
- The rule is - do not start UX without content. Because it helps to structure the information depending on the importance. a - Reference all the content you already have with a content audit (it can be very long if you have a big website) b - Think about the content you can produce (and if you have a budget for it, because producing content can be expensive)
- TO JC There is 2 types of stakeholders : The ones who love workshop - they don’t really know why they are here but they are glad to spend a all afternoon doing something else The ones who hate workshops - they’ll do whatever it takes to not be present, and if they are, they play Jump Jump. Because they don’t get why they are invited.
- The stakeholders are the ones who can talk about the company or market the best, so it’s really important to involve them during all the process. As a UX designer it’s also your job to explain why every skills is important for workshops and how they will contribute. Use Toolbox to help you !
- TO JC + TRANSITION TO UI You can’t imagine how many times I heard that. Yeah, that’s okay, it’s called a wireframe. You know it could be all blue or all green. But colors provoke emotions, the fact is we are making wireframes all grey so you can focus on the structure and architecture of the interface.
- Try to have some imagination, focus on what you see and the usability of it. Does it make sense ? Can I find where to click to reach this page ? Do I get what to do next ? Is the experience understandable ?
- TO CL Photo on the left. Add this. Client wants to design by themselves.
- You are the expert! You are hired for a reason! Prove your choice with data, best practices, etc… On-site with client for quicker changes but your expertise and experience is worthy!
- TO CL Does anyone have any idea of what the Frankenstein could mean? Mix of several designs proposed to client = Confusion / flexibility on client side.
- Example of AQF: 17 versions of one page to arrive on sth very close to the first version. The site is a whole piece. Keep consistency between designs or versions. All components work together in harmony. One block can fit on one page but not on another one.
- TO CL No quality on the visuals (Aden: Shutterstock Image). Looks fake. Don’t use fake images from libraries if you have the choice.
- No quality on the visuals (Aden: Shutterstock Image). Image represents 1000 words.
- TO JC + TRANSITION TO PROTOTYPING DEV Client think big and that’s good, but when you write an email and you want someone to read it, do you ask your coworker or your all company ? Could you imagine your email after being read by 100 persons ? Usability Testing with a lot of people is useless.
- Ask around you.Test it with few different people. Take your ipad and go to the starbucks. Observe your coworker when he is using it for the first time. You’ll identify easily if something goes wrong. This method can be used for different phases of the project.
- TO CL CONSISTENCY No actual collaboration between designers and developers. Handover designers/developers = Mistakes/Disagreement.. Because you are working by template or by batches which are not correlated to each other, the design is completely different from on page to another. Because you spend so much time on changing details that at the end you have 5 styles of buttons for the same purpose. SPEED 1 second loading time more = 7% Conversation rate less. Because technologies actually matters, user experience is a whole piece including speed, CMS ease of us (Don’t do a website that even your client wouldn’t use), Hosting. The design is not consistent across the whole website
- Go backwards: From product page to Homepage Definitely involve developers starting from the beginning before it’s too late. Feedback and changes on wireframes, UI pages because the design is already made. UI KIT: Kitchen sink from starbucks. Modular approach. Build what you need and components by components. Because technologies actually matters, user experience is a whole piece including speed, CMS ease of us (Don’t do a website that even your client wouldn’t use), Hosting.
- TO JC Adding a feature at that moment means that you have to make it fit with the UX already done. Brilliant idea = time and about that I spend almost one week to redesign an interface which was validated 2 weeks before. Imagine if I was a freelancer : I could have gone to Bali during CNY just with that money.
- UX + design + dev Do we have time ? do we have money ? If yes you have to be flexible, understand the need so you can propose solutions which won’t impact the work you have done so far. Think about your budget. Someone will probably work a lot just because you had an idea this morning on the shower. That work should be rewarded don’t you think ? Being flexible is good but if you found out that you have to redesign everything because of one feature : don’t.
- TO CL Kind of sentence when we freak out a little bit. You know that kind of meetings where your client is supposed to take some decisions on 3 little things and you finally go out with no decisions and 100 questions ? Okay, so if there is issue to take intern decision for a reason or another, just don’t take it. Always a lot of stress but always think that web is flexible : is anyone remember the first shitty version of Facebook ? (Trouver un autre ex)
- Trust yourself and be sure about the decisions made. Too late to make changes now Go testing! Don’t spend more time to discuss what you should or shouldn’t do. Gather the different solutions and AB test it so you’ll know which one to pick. If you wait until you`re ready, you will be waiting for the rest of your life. Take risk and take the beta version as an excuse ^^ You worked on it for so long, that you should be confident and jump on the train before its too late. What you want to achieve? What are your goals? Write down how you define success and failure and check if you have everything you need to collect the data.
- TO CL Client or Agency telling they were right or wrong. Fight between each opinion or solution.
- No matter client or agency both could be wrong: Post prod strategy. Nothing is fixed. example of booking.com ux meetup.
- UX is a trend but to use it with logic: (e.g. HP decathlon) = (Solution e.g.: AB testing Marco Vasco, Hotjar Starbucks / 31ten).
- > small or big company > Netflix, Slack, Airbnb > innovation team