Tools I use regularly - UX Designer
As a UX designer I use several tools on my day today job. Today there are plenty of tools available for designing, prototyping etc. Ideally, my design process involves three different phase
Wireframing
Interface Design
Prototyping
Various tools are used in each phase, few of them are used in more than one phase e.g. Sketch, Framer, InVision Studio etc. Personally, I would prefer Sketch for designing because it is widely accepted file format can be exported to other tools if require in the future. here is the list of tools which I use frequently.
Wireframing
Wireframes are created to test if the flow of the application match with the user flow. To start with we should be aware of
Who the user is and how they do the tasks now
Clear understanding of the problem and the executive intent
Inshort, wireframe is a rough sketch of the application and and depicts how each screens are connected with to others. The application flow should match with the user flow and their expectation. It can be either an rough drawn sketch on a paper with pen or a digital file using tools like balsamiq, Keynote etc. It is a highly iterative step, undergo lot of changes based on user feedback. Once I’m satisfied with the results will move to the next phase which is mockup creation.
Tools used: Balsamiq, Powerpoint, Keynote, Paper + pen
Pro
Allow the designer to understand the user flow better and design the application flow Accordingly.
Ability to test only the flow and the layout arrangement.
Testing directly on mockup, would led the user commenting on design, content, etc. which would be cumbersome to manager and fix at that stage.
Early feedback saves lot of time on mockup creation, strong understanding about the user would faster-up the whole process
Communicates clearly what to expect
Cons
Requires 1 - 2 weeks of time, which can be compensated with the mockup creation phase
Requires user participation for testing. Which might requires budget cost and recruitment effort
Some user may not be able to visualize the wireframe
Interface Design
Once I’m done with the wireframe (if required get approval from the executive team) would create the interface design. During this step the interface of the application would be created using sketch or other designing tools depending upon the final handover. If the users faced challenges on visualizing the wireframe on the previous phase, than I would create a low-fidelity mockup and test with them to get feedback before creating the high-fidelity design
Low-fidelity is the grey scale format of the final mockup without any actual content. With low-fidelity mockup testing, the user would be able to visualize the flow better and provide better feedbacks. After getting the user feedback the High-fidelity mockup would be created (which is the actual mockup) and shared with the fellow designer for pear review. The fellow designer would comment on the design and other visual aspects. We can create one or more design to compare and the finalize the design.
High-Fidelity mockup would looks similar to the actual application. If it is a cross application then create mockups for all the devices which we are planning to implement. Design for all the device needs to be tested separately with different users.
Tools Used:
Designing: Sketch, Invision Studio, Framer, Photoshop, Illustrator etc
Cloud sharing: InVision, Framer, Sketch Cloud etc
Pro
Able to get the feedback well in advance before developing. Development can be much more faster and efficient.
Expectation are set clear to the Executive team and marketing
User can provide their comments and view well in advance hence the project can be directed on the right path without wasting much time
All the design assets and documentation required for the developers would be available on time
Con
Requires 45 days to 3 months time to complete
Team should be able to adapt design culture and open for design decisions
Prototyping
Once the mockups are finalized they would be made as a interactive prototype for final user testing and to present to the team. With prototype second round of user testing would be done before proceeding with the development. Probably with different set of users who have not participated on the earlier testing. We could expect comments which are easy-to-address and now very different from the current design. If so, it is time to take a break and validate the user research done, if required restart the step again. But it is very unlikely we would get surprises at this step.
With prototype it is easy to present the flow to the developer so they can plan the development well in detail. It is easy for them the come up with the technical challenge they would face in the future. PM can visualize the user point of view and break the features into meaning full versions for release.
Developer will also need style guidelines and micro interaction guidelines to code the application pixel perfect. With tools like Zeplin developer they can inspect the design and able to copy the style as CSS Codes. They can also download the icons in the desired format the want. To document the interaction instruction, tools like Principle, Adobe After Effects would be used. It would saved as a centralized document and reused whenever the same component is followed.
Tools Used: Prototype: Adobe XD, Principle, Adobe XD, FramerX etc and Zeplin for sharing it with Developer.
Pro
Easy to test the design with users, well in detail before moving to the development
Able to present the flow to the developer and the set the expectation right. Developers would be able to plan their work better and provides much realistic timelines.
Easy to visualize the requirement and able to break the development as sprint and release as versions.
Cons
Takes 2 - 3 months to complete
Happy minded developer are required to achieve pixel perfect coding
