Design tools we use to create intuitive, user-centered products
These are the design tools we use every day at Bixlabs. They help us create beautiful, user-centered products and maintain a smooth UX/UI design process.
When working on challenging projects like the creation of a web or mobile app from scratch, it’s crucial to ensure smooth team collaboration and carry design tasks effectively.
Luckily, most of these difficulties can be overcome by using the right design tools and following the proper methodologies. At Bixlabs, we combine a series of helpful services that allow us to create beautiful, user-centered digital products while maintaining a highly productive process and fluent communication with our clients and our team.
In this article, we go through all the tools we use for UX/UI design, prototyping, and user testing, including the main features of each application and how we apply them in our everyday workflow.
Six+ tools we use for product design
Whimsical
Whimsical is a visual collaborative workspace that helps us create product design projects with flowcharts, diagrams, and digital sticky notes. Whimsical allows us to quickly build UX flows and share ideas and decisions with every member of the team.
It includes smart customizations and Kanban boards to keep track of the work process, and very useful features like buttons, inputs, checkboxes to make wireframes and flows more easily understandable.
How we use it:
– Brainstorming: Designing a product involves a lot of people from different backgrounds. That’s why keeping ideas and decisions organized is crucial. Whimsical’s mind maps and sticky notes help us do precisely that. They allow us to brainstorm ideas while maintaining everyone on the same page early on and avoiding conflicts and misunderstandings.
– Flowcharts: One of the main perks of Whimsical is that it makes flowchart diagramming really easy, so our design team can quickly and efficiently represent the product’s UX flow. This way, we can have a general overview of the entire process and easily identify potential flaws.
– Wireframing: Whimsical allows us to quickly create lo-fi wireframes without worrying about the aesthetic aspects of the product. This helps us ensure designers and developers are on the same page regarding the structure of the app and that the features to be developed are technically feasible.
Sketch / Adobe XD
Creating a user-focused web and mobile applications involves a comprehensive, iterative process that includes research, creativity, and testing. We wouldn’t be able to carry out a big part of this process without tools like Sketch or Adobe XD.
Sketch and Adobe XD are vector-based design tools to create high-fidelity user interfaces with pixel precision. Great for interaction design and prototyping, both Sketch and Adobe XD have robust toolboxes that support intuitive and speedy workflows.
Since the two are very similar apps, we use one or the other based on our designers‘ personal preferences.
How we use them:
– Design systems: We use Sketch and Adobe XD to create the design systems for the different platforms in which the app will exist. This allows us to establish guidelines to help all team members and stakeholders involved in the project understand the different design decisions made.
– User Interface Design: We also use these tools to create high fidelity interfaces designed up to the detail. Both Sketch and Adobe XD make it easy to zoom in to pixel level and adjust layers until they’re just right.
– Prototyping: Adobe XD and Sketch are excellent for building web and mobile prototypes to test product ideas. They allow us to easily create user tasks with different interactions and animations to simulate how the actual app would work. They also include the option to share the prototype through a link and try it out on any device.
– Developer hand-offs: Both apps are very useful when we need to share designs with our development team. Thanks to them, the dev team can check out the pieces right in the browser, inspect elements, and even export the assets.
InVision / Marvel
As part of our integral custom product development process, we use interactive prototypes to test the user experience and find possible design flaws in the apps we make. To showcase these prototypes in the different platforms and screen sizes, we use InVision and Marvel.
These two apps let us create high fidelity prototypes and present them to team members and stakeholders as they would look in the final product. Both tools have a strong focus on team collaboration, are really easy to learn and use, and integrate perfectly with the other product design apps we use every day in our design process.
How we use them:
– Prototype showcasing: InVision and Marvel allow us to quickly present to stakeholders a realistic experience of how the product will look and feel on each device when finished.
– User testing: Another area where both apps are especially helpful is in user testing. In this aspect, Marvel really shines. It includes features like targeted recruitment of testing participants segmented by profession and age, along with voice transcription and session replay.
– Team collaboration: The possibility of making real-time comments and creating to-do lists in InVision makes our team collaboration seamless. InVision allows us to easily discuss issues and improvements through comments and create specific tasks for the different teams involved.
Figma
Figma is a browser-based, one-stop solution for product designing and prototyping. It combines the most useful features from Sketch and Adobe XD with the best ones you can find in Marvel and InVision. Since it is a web app, there’s no need to fret over updates, compatibility issues, or version control.
Besides being super easy to pick up and learn how to use it, Figma also allows us to share our designs with clients and team members. We can follow the progress of different projects on any device, and grant viewing access to our clients without paying additional fees.
How we use it:
– UX Flow and Information Architecture: Figma includes several UX kits that help us diagram the product’s information architecture and user flows to provide a pleasant experience and yield the least amount of effort for the users.
– UI Design: Just like Sketch or Adobe XD, Figma at its core is a vector-based design tool with a strong focus on interfaces. The possibility of opening different artboards, choosing from many pre-set device sizes, adjusting grids and columns, and easily creating and changing design styles makes Figma one of the best options we have for interface design. Additionally, UI Kits released for Sketch can also be used on Figma, which is excellent.
– Motion UI: Figma allows our designers to create and test different animations for the products we build. Figma smart animate feature lets us add advanced transitions and animations between screens, so we can easily create eye-catching, interactive prototypes.
– Real-time collaboration: Given that Figma is an online tool, it greatly facilitates collaboration between our teams. The app comes with a suite of useful integrations, from project management to developer tools for better hand-offs and asset sharing. Sketch files can be opened and edited in Figma, so we don’t have to worry about changing software.
Adobe Suite
For us at Bixlabs, not everything is about product design. We also use other applications for projects that aren’t related to digital products. We’re talking about our communication and marketing efforts, for which we usually use the tools in the Adobe Suite.
They help us conduct a wide array of creative tasks such as image editing, photo retouching, illustrations, and editorial design.
How we use them:
– Photoshop: Photoshop is probably the most popular graphic design software out there. We use it mostly for digital image editing, advanced photo retouching, image composition, and sometimes for minor web design tasks. Photoshop includes a great variety of useful features that make our daily design work much more manageable.
– Illustrator: Illustrator is a popular vector graphics editor program used mainly by artists and designers. At Bixlabs, we use this tool to create the illustrations on our website and the digital products we build. We also take advantage of this tool to create infographics, banners, and other design pieces for our blog posts and social media channels.
– InDesign: At times, we need to create editorial pieces for different internal and external projects. For these tasks, we use Adobe InDesign because it includes in a single workspace all the tools we need to design and lay out any editorial pieces.
– Acrobat Pro: We use Acrobat Pro to carry out basic PDF edition tasks.
Conclusion
Designing user-centered digital products requires organizing and executing a significant number of tasks while maintaining strong collaboration with all the teams involved in the project. The tools we mentioned in this article help us to achieve exactly that.
We have put the effort and time to learn and master each tool to make the most of them in every project we face. As a result, we have optimized our design processes and methodologies, improving productivity and efficiency.
We have recently published another article about the tools and services we use for project management. In a future post, we will be talking about the apps and resources we use for software development, so stay tuned.
If you are looking for an experienced team to build your app from scratch or take your product to the next level, give us a call.
