When starting a new design process, it is often useful to familiarize yourself with other people’s workflow. It is, of course, true that creative workflows tend to differ for each individual but collecting tips, tricks and opinions are often beneficial in either creating or improving own processes. Although in this post the biggest focus will be on UX design, the creative process doesn’t differ much for different types of design.

Here are some steps and tips and tools we used in designing our mobile app Navigator.

Find a problem to solve

Research the market. This is not specific to an application. This is something any new product on the market should do: it should aim at solving a specific problem (potential) user might be experiencing. It should deliver something unique and that on its own will be a reason enough for a consumer to use it. For example, when Canva launched a couple of years back, they were solving a unique problem on the market: they made a web application easy to use for non-designers to be able to create beautiful graphics for their websites.

Don’t ask the consumers what they want

While it is sometimes useful to collect customer feedback and keep it in mind, it’s also important to not take the feedback as the ultimate truth: people don’t know what they want. One of my favourite quotes is by Henry Ford: “If I had asked people what they wanted, they would have said faster horses.” Since cars hadn’t existed back then, it was impossible for the people to image such a solution to their problem. There is a great book by Daniel Gilbert, Stumbling on Happiness. One of the points of the book is that we are very bad at predicting our future. Why? Because we can only imagine the future in the context of today. What this means is that 15 years ago, we were not able to imagine smartphones being part of our lives since they were something completely new. That was Steve Jobs’ job.

It is marketers’ and designers’ job to figure out what people want and to make the products for those purposes. It is their job together to figure out what our everyday nuances are and how to solve that. It is their job to think about and deliver the solutions to our issues we didn’t even know we had.

Set your goals for better UX design

Once you have found the problem to solve and have found a way to do that, it’s important to put things on paper. You need to define them before proceeding because you want to be able to check up on yourself every now and then to see if you are going in the right direction.

Ask yourself these questions:

  • What are the benefits of this project for the consumer?
  • Can your app evolve over time? How?
  • Who is your ideal user?
  • What will your marketing efforts regarding this app be?
  • How will you make money on it?
  • How will you keep users engaged with the app as long as possible?
Creating wireframe on paper
Website wireframe

Sketch it out and make wireframes

For this step you will likely need: a) lots, and lots of pieces of paper and a bin close by; or b) tablet with a sketching app and a pen.

The choice is yours.

As ExperienceUX puts it: “Wireframing is a way to design a website service at the structural level. A wireframe is commonly used to lay out content and functionality on a page which takes into account user needs and user journeys. Wireframes are used early in the development process to establish the basic structure of a page before visual design and content are added.”

Design and prototype

After you did your best to understand what your customers want and how they want it, it’s time for my favourite part of the design process: putting it all together into a working app prototype. It’s finally time you took your sketches and wireframes and made an almost-real product that has been popping up in your head for so long.

The application of our choice for this part of the process is Adobe Experience Design, also known as Adobe XD. Not only is it the part of the Adobe Creative tool – a set of apps necessary for the designer team – but it is also an app that merges two processes in one: 1. designing; and 2. prototyping. Having those two parts together in one app is very handy for going back and forth in the process – which is usually the case.

However, if you do not like the Adobe suite and prefer to have separate products for each step of the way, there are some alternatives you might want to consider.

  • Sketch – One of the most famous UI design apps on the market, only available for Mac users.
  • InVision – The standard in UI prototyping today.
  • InVision Studio – InVision’s screen design tool, rather new to the market.
  • Figma – One of the newer products on the market that has gained a lot of publicity and praise in a very short time. It’s all in one: Design, prototyping and collaboration tool.
  • Proto.io – Interactive prototyping tool.
  • Framer – Screen design and interactive prototyping tool. Prototyping is done in CoffeeScript and promises to be fairly easy even for people new to code.
  • Zepelin – Collaboration tool for designers that has an integration with Adobe XD
  • Origami – Great prototyping tool and the only completely free tool on this list!
  • Atomic – Free tool for unlimited designing and prototyping, but offers paid plans for collaboration.
  • Protopie – Paid prototyping tool that offers one-time payment solution, instead of subscription.
Style guide example
Style guide example / Photo by VSF Digital Design via Flickr

Style guide and development

Before handing the app over to the development team, there is one more step that is not required but highly appreciated – creating a Style Guide specifically for the project. Normally, Style Guide is a guide that contains all the style specifications of a brand, such as typography, colours, buttons, etc. However, creating a guide specifically for the design you have just made makes it easier for developers to understand what exactly they need to build and saves them a lot of guessing; and saves you a lot of time correcting their sizes, white spaces and font sizes.