My 10 Step UX+UI workflow: 2019
[Update]: A lot has changed since 2019, take a look at is my workflow in 2021.
It’s been a year that I’ve shifted from working on projects to working on a product. This is my ‘10 step UX workflow’ after learning from both the models that ensure you create products that are loved by the users.
01. Understanding Research Insights
Why is it important?: To understand the impact of the research insights on the UX that enables user-centricity.
I believe UX research is a collaborative effort between designers and researchers.
How I do it?: I like to immerse myself in co-creating personas and user journeys and/or service blueprint with the research team. At this stage, I start creating UX themes that would be followed ahead in the journey. I use data from qualitative and quantitative research to formulate these UX themes.
Tools I use: Whiteboard, Trello, Dropbox Paper, Slack, etc
02. Creating Information Architecture
Why is it important?: Information architecture (IA) serves as a backbone to a product and provides navigational context.
A good navigation model helps people to move easily throughout the product and hierarchy helps to define the structure of the content.
How I do it?: To create information architecture I prefer to have research and design team co-create using methods like card-sorting. The researchers can provide inputs from a user’s perspective whereas the designers can bring in the interaction design principles.
Tools I use: Whiteboard, Post-its & Sketch App or Adobe XD
03. Designing Wireframes
Why is it important?: Wireframes help the research, design and technical team to visualize what the product would look like.
How I do it?: I start with paper wireframes to create quick concepts. Then I move to mid-fidelity wireframes that can be discussed with the technical team for feasibility. Keep in mind the cognitive psychology of the users.
Tools I use: Sketch App or Adobe XD
04. Organizing UX Flows
Why is it important?: UX flows make it easy for the team to understand the complexities like multiple users, scenarios, touchpoints, mediums, etc.
UX flows makes it easy for developers to get a perspective of the system.
How I do it?: I like to ideate and co-create these UX flows. I refer back to the user-journeys to get an understanding of user needs. Usually, it starts as a whiteboard activity for ideation and iterations followed by finalizing on software and publishing the agreed flows to the team.
Tools I use: Whiteboard & Sketch App or Adobe XD
05. Rapid Prototype
Why is it important?: A rapid prototype is helpful to ideate, test and gets early feedback from the internal team and the client.
How I do it?: Once the wireframes are agreed with the team, I create a rapid prototype to test with the client and internal team.
Tools I use: Sketch App with Invision or Adobe XD
06. Building Design System
Why is it important?: The value of the design system is immense for products that need to scale. It helps to bridge the gap between design and development. After launch, a design system helps you churn out updates faster.
A design system holds your product experience together from design to delivery and help to save a ton of time and eventually save money.
How I do it?: Creating design systems should be a collaborative effort of a multi-disciplinary team. I use atomic design by breaking down the product into the smallest elements like the color palette, typography, space guides, grids, etc and then move up to larger elements.
At this stage, the developers can also start to develop their component library using HTML, CSS, Javascript, Swift, etc.
Maintaining a design system is as crucial as building one and hence I recommend that a person on the team is responsible for doing this.
Tools I use: Sketch App for creating design guide and UI kit along with Zeplin
07. Designing User Interface
Why is it important?: This is a crucial step as this is what the users and client are going to see as an end result.
How I do it?: Once I have a design system in place, it becomes easy to use the elements and create the visual design with reference to the wireframes. I make 2–3 concepts to discuss and get feedback.
At this step, I re-check that all the screens abide by the usability principles and if I am designing for mobile then I make sure the design aligns with the iOS human interface or Android material design guidelines.
Tools I use: Sketch App or Adobe XD
08. Add Motion Design
Why is it important?: Why motion design? The answer is simple, motion design makes UI experience richer and enhances user engagement. It is also helpful for the developers to understand behaviors and interactions.
How I do it?: I'm using Adobe XD often now to make the prototypes along with motion design. Recently I created a voice-enabled prototype to showcase a personal assistant. Keep in mind motion design/animation principles to make your interface feel natural and intuitive.
Tools I use: Sketch App with Invision or Adobe XD
09. Design Governance
Why is it important?: I don't call this stage as design hand-off because I believe that this is a continuous collaboration between designers and developers rather than one-time hand-off.
The transition from design to development can make or break your product experience.
How I do it?: I believe developers are our strongest allies. Once the development starts I like to give them a walk-through, get them onboard with collaboration tools and listen to their concerns/questions.
I like to engage with them on a daily basis to understand their challenges, give the necessary help and check the quality.
Tools I use: Zeplin & Slack/Microsoft Teams for collaboration
10. Test, Improve & Update
Why is it important?: Do you want your product to remain user-centric? If yes, then keep on testing with your users.
User’s needs, challenges, behaviors, expectations, etc keep on evolving and hence you need to keep improving your product.
How I do it?: After launching the product I like to set-up a sprint for user-testing with at least one researcher and UX designer in the team. This team regularly engages with the users and capture their insights to make improvements. When there is limited availability of the users, I would ask to create a team of ‘Champion’ users to engage with.
Thanks for going through my experience. If you liked reading this article then send me some applauds. 👏🏻👏🏻👏🏻👏🏻
As design is an iterative process, I am still learning new things and refining my workflow every day. Got any suggestions, ideas or questions? Leave them below and I would be happy to answer.
As always you can connect with me over LinkedIn or see my work at www.shubhamkhatkar.com
