How I take my designs from paper to prototype

People find it hard to find cause-based charities. I’m making it easy for them through an application. I’m designing and publishing this application within 30 days and documenting my entire journey. Read more about the project here.

Designing an application is far from a simple process. It’s complicated, and with lots of tasks and sub-tasks, it can turn messy in no time.

That’s why having a systematic process to design is essential. A simple yet effective process that takes your designs from paper to realistic prototypes!

I’ve already written about how I start all my projects. But that’s just a small(but essential) part of the process. Here’s what my entire process looks like:

Using my most powerful tools

As you might’ve read from my previous blog, I start on pen and paper — my most powerful tools. I start writing down the project brief and the problem I’m solving, and then I start jotting down all the ideas I have, and all ideas I’ve gained from user research. I then start brainstorming and ideating potential solutions. This is where I remove all limitations and experiment freely.

As I did with my Charity App, I’ll then start creating wireframes — rough diagrams of how the app screens would look like. These are called “low fidelity wireframes”. They’re simple, time-saving and easy to draw — you don’t have to be an artist.

Where I jump to software

Once I have “low fidelity wireframes”, I grab my phone, click the pictures of those wireframes and import them to my computer, in the design software I’m using (Figma).

I start with creating an “Artboard” and having layouts and grid systems. I use 8-px grid system to stay consistent across the app and create a good layout.

Once done with grid systems, I start creating the elements. Be it image placeholders, text boxes, buttons, menus or tabs, I start creating everything and I do that in Black and White. Now there’s a reason for this and I’ve learnt this the hard way.

In my initial days, I fell into a trap almost every designer falls into at some point in time. The problem is that we designers start focusing on aesthetics and divert our attention from the actual experience.

If I was only a UI Designer, I wouldn’t have cared about this and would focus on the “look and feel” of the app. But I’m a User Experience Designer, and caring about the Experience is the most crucial part of the job.

I stop myself from falling into this trap by starting with black and white, finishing the design in black and white, and then adding the colors.

In between, at some point, I start dabbling into color theory and create a color palette for the project. Once the design in black and white is done, I add the colors, add animation (nothing crazy, but page-navigating animations and micro animations) and the design is done!

Testing with the user

After designing and adding the animation (prototyping, if you’re looking for the technical term), I start the next phase: testing.

I get real users to try and test the prototype, and I try to observe a few things including:

• Learn if people are able to find what they’re looking for easily
• Identify how long it takes to explore and donate to charities, from start to finish
• Find how satisfied people are with the application
• Identify changes required or improvements suggested

With the insights from testing, I always go back to the relevant step of the process. If the project needs some minor changes, I start iterating the design in Figma. If the project needs some massive change, I restart with pen and paper and continue the same process until the objective is complete with the next round of user testing!

The Project is ready!

If this was some other project, I’d mark this project as “done” and coordinate the designs with the development team. But on this project, I’m taking it to the next step. I’m publishing the application to the App Store. And that too, without a single line of code.

Bravo Studio is helping me do that! I’m making my designs App-Store ready!

As of now, I’m in week 3 of this month-long project. I’m almost done with designs and now jumping in the User Testing phase! Read what-and-how I’m doing in detail here!