Published on | Prototyping: From UX to Front End — Medium Tim McKenna

In a new series of process posts, there are a few tools that I want to discuss that make my professional life easier. First, I want to start with part of UX design and product development process with two tools that I have used extensively over the last year: Milanote & Figma.

As a designer, I value my process as much as my end result. A good process allows for a certain level of predictability and flexibility. If it’s too strict and prescriptive, it becomes too narrow and rigid for change. If it’s not defined enough, it creates confusion and communication breakdowns. So for me, a good, repeatable process in creating products and features is the living proof of a well thought out, tested way to do things.

Working as a user experience designer (or more aptly, managing them) provides a unique challenge to communicate your ideas to your product team, especially if they are new to their roles. At in least my experience…the minute most people hear the title “Designer” they immediately go to “Artist”. That’s usually the beginning of re-education.

Designer’s solve business problems objectively. Artist create expressions that are subjective to the viewer. They are two different creative professional paths. The main thread of truth that is shared between designers and artists are that we both ask “What if?”

So process…here’s how I work with my product team in an agile design and development sprint using Milanote & Figma….

Kickoff Meeting: The product team (usually a Product Manager, UI developer, UX Designer, Customer Analyst, Solutions Architect, and a Developer) are tasked with a to come up with a new feature for their existing product. Research is collected, analyzed, and presented to the product team by the product manager. A couple of tools are used for shared resources: Milanote, Email, MS Suite, Figma, and chat. The team delves into the research material and discusses the projects to figure out the needs, the wants, the nice to haves, and the future. This allows us to scope things correctly and has team buy in. We use Milanote to bucket each items under those four headlines. The product manager usually scribes while the team discusses. Once the team has developed their project plan, scope document, and iteration plan, Milanote becomes the end all notation device. If something is written down or drawn throughout the process that is needed in the documentation, it gets added to the Milanote.
Design Time: The designers and UI developer now become joined at the hip while one designs elements in Figma and the other is pulling information from the live Figma file to code appropriately. They work in tandem to build out a prototype. Depending on the level of fidelity and scope of the project the prototype could be the Figma sketches or they could be HTML/CSS/JS “dumb” prototype (not attached to live services or data). At this time, the product manager is documenting much of the work to the Human Centered Design Process, which we have as buckets in our Milanote board to visually see how we are working. Business analysts are performing user testing and continued research and putting their findings in Milanote as a sort of visual project plan. The solutions architect and the developer are looking at everything and considering their technical requirements, constraints, and needs to ensure when/if this project gets handed off to integration development that they have covered all of their bases. Depending on the size of the project and detail, we will use several Milanote boards that link to individual Figma files and screens that are part of the project. This enables the team to see everything and not claim it was lost in email.
Testing: Once we have a prototype ready to be tested, the business analyst will run the prototype with a live customer to gauge reactions, feedback, body language, etc. with an observer taking notes in Milanote.
Iteration: Pretty much the same as step 2 but now we’re further along. We will do this couple of times until we invalidate our hypothesis and start all over again. But you might have…
Success! Since the solutions architect and developer were part of the sprint they are now stakeholders in this products success and their rejoin their team members to build out a product/feature as validated in design. Once it has been deployed, the team starts over on new challenges.

Pros of this Process

It’s super flexible and easy for us to make updates that everyone can see.

People who don’t have the title of “designer” are truly invested in the design process.

Shared visual notes along with wireframes and prototype make it easier to understand from an outside perspective.

It’s the closet to quick, good, and cheap.

Con’s of this Process

Too much going back and forth between windows (my solution, get two monitors)

Possibly overlapping ofcapabilities. You could theoretically use just Figma for everything and not need Milanote. Theoretically, but each have their own benefits for their unique audiences.

Too much computer time, not enough pen and paper.

There are more powerful tools out there that offer more (my theory, you don’t need a jackhammer for a nail).

Verdict

For me, using both Milanote and Figma in tandem in my product design process helps to increase understanding, transparency, and sparks creative ideas when you are seeing information displayed in a visual format with corresponding research behind it. Sure, I could use a myriad of tools to replace each of these solutions, but I find for myself at least that I am faster, my team is faster, and we’re spending more time on getting the right experience and not fighting with tools. I highly suggest you check out Figma and Milanote, they have free versions to use that are really great to pound out on and give this process a try with your team and let me know how it works out.

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

Process: How I Use Milanote & Figma for Product Design was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Process: How I Use Milanote & Figma for Product Design

Cool stuff, every week

More Articles