Optimising your design process for a short timeframe
1 like432 views
The document outlines an optimized design process for tight timeframes, emphasizing the importance of planning, defining user needs, and establishing client relationships. It highlights the steps of sketching and designing prototypes, conducting user testing, and building the final product while iterating based on gathered feedback. The process aims to ensure a successful product that aligns with user behavior and needs through continuous testing and refinement.
Optimising your design process for a short timeframe
- 1. Optimising your design process for a short timeframe Prepared by Tiffany
- 2. Tiffany Teng Peir Sim UX/UI designer at RGC and UX mentor at Career Foundry Email: tiffany@creativerepubliq.com Twitter: @tiffanypeirsim
- 3. RGC We build digital services focused on creative design and development. Website: http://rgc.world
- 4. Imagine you have to leave suddenly for a secret location… Image source: http://www.clipartpanda.com/
- 5. Hurry up! Grab two! • Laptop • Knife • Rope • Coat • Sandals • Canvas tarp • Camera • Sunscreen Image source: http://www.clipartpanda.com/
- 6. Surprise! It is a desert island. Knowing this, would you change what you brought? Image source: http://pcwallart.com/island-wallpaper-1.html
- 7. To understand what we should do, we must know why we are doing it
- 8. Planning and Define • Set goals (fits with the others) • Collect problems and data • Review business needs and user needs • Establish trust and rapport between you and your clients • Avoid personal bias Image source: http://www.clipartpanda.com/
- 9. Planning & define tools • Value proposition canvas, brainstorming and mind map to analyse the problems, data and strategy. • Create user personas into empathy map. • Conduct user testing the existing products and also competitors’. • Asking questions, be listener and take notes. Image source: http://www.clipartpanda.com/
- 10. To design the functions and visual flow of the product
- 11. Sketch and Design • To understand how the product works and how the users interact with the product • Creating low-fi or hi-fi wireframes/prototype to present the concept of the product • Have a clear idea how we want the product to work and how we would like our end- users interact with the product. Image source: http://www.clipartpanda.com/
- 12. Sketch and Design tools • Creating task analysis helps support several other aspects of the user-centered design process • Paper and pen for the initial idea of the product • Brainstorming with team and clients • Creating low-fi or hi-fi flow diagrams by using Draw.io • Create the visual design with Sketch/Photoshop and then combine them into inVision or Marvel app Image source: http://www.clipartpanda.com/
- 13. To receive more user feedback and product research to see if your product is truly ready to meld with the end-users
- 14. Experiment and testing • Validate your visual flow and assumption • Help to understand what is the user behaviour • Make sure the users are able to navigate your product and use all functions therein properly. • Be open minded and listen what your users say Image source: http://gks2.com/files/scientific-method-clipart.html
- 15. User testing methods • In-Person User Testing • Remote User Testing
- 16. To gather the feedback from prototype and then start building it
- 17. Build • Build the product with design layouts with front-end coding • After the engineering team have built the product, it will expose where distinct problem areas may reside, and open discussion for solving problems • Polishing your design and style guide
- 18. Build tools • HTML & CSS • Bootstrap or foundation • Javascript Image source: http://www.clipartpanda.com/
- 19. Summary Planning and Define Sketch and Design Experiment & Testing Build Design iteration Product reset/ Pivot • Define the problems • Gather data and feedback • Create user persona • Analyse the data • Create visual flow diagram • Sketch the ideas • Create wireframes and rapid prototype • Revise the test result • Conduct user testing • Analyse the result • Test again and again • Build the product with front-end coding • Polish the product • Test again and again Launch (Beta)
- 20. Sources • Definition of design process: http://www.discoverdesign.org/handbook • Value proposition canva, by Peter J Thompson http://www.peterjthomson.com/2013/11/value- proposition-canvas/ • Introduction of user personas: http://www.ux-lady.com/introduction-to-user-personas/ • In-person vs Remote user testing, https://www.usertesting.com/blog/2015/09/22/in-person-vs- remote-usability-testing/ • Task analysis http://www.usabilitybok.org/task-analysis • Low UI flow digram https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-flows • Bootstrap http://getbootstrap.com/ • Foundation by Zurb http://foundation.zurb.com/ • Stop designing pages start designing flows, by Smashing Mag https:// www.smashingmagazine.com/2012/01/stop-designing-pages-start-designing-flows/