From Thoughts to Visuals - What Design Means to Us!
Tags: ux, design
Published: 2019-10-29 18:28:53

---
title: From Thoughts to Visuals - What Design Means to Us!
published: true
date: 2019-10-29 10:53:35 UTC
tags: ux,design
canonical_url: https://haxzie.com/designing-sass-product-part-1
cover_image: https://cdn-images-1.medium.com/max/1024/0*hdzfWMmIzcMv7u3e
---

Design is everywhere. Good design can solve complex problems by abstracting away the complexity from users. I have always been fascinated by how design blinds complexity with **beauty** , **simplicity** , and  **clarity**.

Before taking up my first job as a UX Engineer at [Locale.ai](https://locale.ai), I was curious about how visual design in digital products makes human interactions natural, and how these designs align with human psychology to make the experience seamless.

At Locale, I got the opportunity to work hands-on on crafting the ideal experience, look and feel for our users at every step of the way. After all, it is really exciting to be an integral part of a journey where the path itself is defined by you.

In this blog post series, I’ll talk about the lessons learned on every major decision we took in terms of design and research and the steps we usually follow whenever we are solving a design problem.


### 1. Understanding the Problem

> “A problem well stated is a problem half solved”

> — Charles Kettering, Head of Research at GM

The most important step before solving any problem is to understand the problem in depth. Be sure about **what you are building** and more importantly **why you are building it**.


_Because you don’t want to end up designing combs for the bald._ It’s also part of understanding the problem to do more research on available solutions, how they built it and why there is a need for something better.

To give you a better example, if you are building a product similar to Uber, you should always ask yourself and the **customers you are targeting** , why would anyone use your product instead of Uber?

What are you doing better that will ultimately make users shift from Uber to your product? If you are not innovating in a market that’s well established, it will be really hard to sustain a product.

Your solution to the problem lies in your market. All the above pointers can be summed up to the term “ **Finding the Product Market Fit** ”, which is identified as a first step to building a successful venture in which the company meets early adopters, gathers feedback and gauges interest in its product. You can read more about [Product Market Fit from the YC Blog](https://blog.ycombinator.com/the-real-product-market-fit/) to understand your market better.

---


### 2. Understanding your Users

> “Design isn’t finished until somebody is using it.”

> — Brenda Laurel

Design is not just about making things beautiful, it’s the art of making things usable and intuitive. If you are not aware of the people using your product, their habits, their secret desires, it will be nearly impossible to build something that your users will love!

This is why **User Research** is one of the most important parts of designing a better User Experience for any product. It’s all about knowing your users as much as possible — What do they do? How will they use your product? How much do they need your product? How much does your product solve their problem? How long will they usually use your product?

As far as design is considered, it is an iterative process. You are not likely to hit a perfect “Mona Lisa” in your first shot. As Salvador Dali said, _“Have no fear of perfection, you will never reach it”._

Your designs should incorporate your users in every step with a continuous feedback loop. Sit together with them while they use your product, ask them to think out loud while they navigate through your product. Of course, this will only happen when you have a product (or an MVP) to show your users. We’ll talk more about that in-depth in upcoming sections.

Also, always keep in mind that **you are biased**!

Your problems are not the same as your user’s problem. They are different. It’s common practice to assume what your ideal users look like and what they need and you should stop doing that. The only way to know what your users need is to directly talk to them and prepare [**User Personas**](https://careerfoundry.com/en/blog/ux-design/how-to-define-a-user-persona/).

A user persona is a fictional version of your ideal customer. It can be more than one type, but it should be detailed so that it communicates the user's needs effectively and helps you understand your users better.

Once you have a user persona, it will make the target users memorable to your product team throughout the journey and help them align to designing what your users needs. Keep in mind, having more than two user personas is not ideal since it will create confusion and create a gap between the understanding of your ideal user.

Whenever you are planning to design a new feature, always ask this question to yourselves, your team and your users, **“Do we need it?”** It’s common for some people to just keep implementing new features without even understanding the need, urgency and impact.

This might also cause problems if you are not concentrating on the priorities of solving the problem. _You don’t need bells and whistles if your train isn’t running._

![](https://cdn-images-1.medium.com/max/1024/1*afyb5VhHNwxgxzAxBGcFIQ.jpeg)



### 3. Researching for Existing Solutions

> “The next big thing is the one that makes the last big thing usable.”

> — Blake Ross, Co-creator of Mozilla Firefox

You don’t need to reinvent the wheel. Whenever you are designing something, it’s highly likely that someone else has already tried. There might be an existing solution, or there might be something similar to what you are designing.

Explore the interwebs and find lots of inspiration. If you are designing a product, look at your competitors and find out how they have already solved the problem.

While designing products, especially digital products, you need to keep an eye on every small detail of your product. Follow the standard principles as possible.

Designing a login screen? Make sure you read about best practices. Designing a complex form? Make sure you learn about the steps or methods involved in breaking them down and making it easier for the user.

Finding inspirations from the internet can be a double-edged sword most of the time. A really good visual design might not always be easily implementable. Or, all those eye-candy UI interactions you see on [Dribbble](https://dribbble.com/) or [Pinterest](https://in.pinterest.com/) might not make any sense when you consider the UX.

![](https://cdn-images-1.medium.com/max/1024/0*lp6uxAZ5CcSVGEZc)<figcaption>Photo by <a href="https://unsplash.com/@aquatium?utm_source=medium&amp;utm_medium=referral">Harpal Singh</a> on <a href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption>

You need to look into both the sides, the good and the bad. If you are researching existing products or methods, make sure you also learn about their limitations and drawbacks. This will give you a fair advantage in designing better products.

Keep note of the interesting and best design decisions that you have found during your research. Learn about why those decisions are made and what were the trade-offs of implementing that design.

> Before you start designing anything, think about your users. Think how will they use it, run the design outcomes with the user personas and have a chat with your team or a user to know whether they like those designs.



### 4. Action! Building a Prototype.

> “Design is intelligence made visible”

> — Alina Wheeler


It’s time to bring your research to life! Once you have gathered enough insights and built an ideal mind map of the design, it’s time to see it in action. Being a UX designer, there are tons of tools in the wild which will make your lives easier.

If you have a little experience in programming, you might have heard the term “ **Think twice, code once**!”. As a UX Engineer, who designs and converts ideas to life, it’s important for me to experiment a lot with designs before delving into code. Even before finalizing a design and handing over to the developers, it is important to do it inside a feedback loop.

Gain mastery in tools like [Invision](https://www.invisionapp.com/), [Figma](https://www.figma.com), [Adobe XD](https://www.adobe.com/in/products/xd.html), [Sketch](https://www.sketch.com/), etc. to quickly build a mock-up of what’s in your mind. If you are working in a startup, you will be always racing against time. Experimenting ideas real quick and gathering feedback will help you refine the ideas into working prototypes fast.

![](https://cdn-images-1.medium.com/max/1024/0*UJEsR201DBAPC4ox)<figcaption>Photo by <a href="https://unsplash.com/@halgatewood?utm_source=medium&amp;utm_medium=referral">Hal Gatewood</a> on <a href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption>

If you are only designing, make sure to gain feedback from the developers to know about the feasibility of implementing such designs from the initial phase itself. This will help the team to build out features even faster without leaving any gap for miscommunications.

If you are new to UX designing, make sure every major feature you have prototyped hits the perfect feedback flow before landing into the actual product.

It is also important to understand how certain aspects of visual elements are to be designed based on any given context. For example, whether to use a drop-down or radio buttons, tabs or side navigation, lists or grids, and more.

There are many research articles from famous designers on these concepts. Make sure you have done a fair amount of _googling_ when you feel a bit ambiguity on which element suits good to implement and where. We’ll have a detailed discussion about some of these concepts in my upcoming posts.

If you are building for the web, I’d highly recommend reading the book “Don’t Make Think” by Steve Krug. He explains best practices in web usability and gives a better understanding of how people use the internet.

---



### 5. Feedback and back to the loop.

> “I think it’s very important to have a feedback loop, where you’re constantly thinking about what you’ve done and how you could be doing it better.” — Elon Musk


Feedback is crucial to shaping your design to match your user needs. But keep in mind, **not all the users are the same**. Every user you have will be unique.

If you are building for the web, you can never be sure about what your users think while using your product. There might be users who are really experienced with using the internet, or there might be people who just got into using the internet.

There are people who don’t like certain colors, and there are people who just prefer one color of their choice everywhere. It will be chaos if you go out to design for everything. This is where the common design principles come into picture followed by user feedback.

Make sure your designs are accessible for the vast majority of your users with no modifications. Whenever you get the feedback, thoroughly evaluate the response if it affects just a group of people or is it something that affects every user. Always try to include changes that are targeted to everyone and not to just the majority of your users.

You know too much about your product and its design. But when you get feedback from a user who has never seen or used it, it is likely to be unbiased. But, it’s not just the users who will give you feedback. As a designer, everyone in your team will have their own imagination of the product.

![](https://cdn-images-1.medium.com/max/490/1*TH-m69O7KnlkZCSCFU0dlw.jpeg)

All you gotta do while having a design review is, not to lead it to a religious debate. What I meant by religious is; the CEO, the marketing team, the developers and the designers have a different perspective of designing a product.

Sometimes, the feedback reviews tend to be about their own personal preference without any principles to back it up. This is where you need to quickly test out the theories.

Testing is inevitable when it comes to having a good design. There might be a lot of disagreements on what’s acceptable, what’s not, what needs to be incorporated and what needs to be left behind.

In such situations, designing an alternate version quickly and testing it out with more feedback from users will solve the problem. There might be a few ideas and feedback suggestions that will play out to be better than the current design. Even though it might not make sense to us in the first place, testing the theories does put an end to unwanted arguments and discussions.

With all the feedback you have gained, analyzing them and prioritizing it for new changes.

And…the loop continues!

### What’s Next?

We’ll dive deep into more concepts related to User Experience design and how User Research helped us to improve our product. These concepts we discussed here for User Experience design will stay as a cornerstone for upcoming posts. Meanwhile, if you liked the article, show us some love ❤

To, get a better understanding of what we do, read more about the unexplored territories of Geo-Spatial Analytics here:

[How analyzing supply-demand gaps can optimize your unit economics!](https://medium.com/locale-ai/how-analyzing-supply-demand-gaps-can-optimize-your-unit-economics-1da3ecd340c6)

> Hi there! I work as a UX Engineer at Locale.ai solving Geo-Spatial problems for our B2B customers. If you think you love solving UX problems for users, love designing and want to work with a team of enthusiastic individuals, check out the job openings we have at [Locale](https://locale.ai).

> Wanna talk? You can find me on [Twitter](https://twitter.com/haxzie_), [Instagram](https://instagram.com/haxzie) and [GitHub](https://github.com/haxzie).

> **Originally Posted on** [**haxzie.com**](https://haxzie.com/designing-sass-product-part-1)

* * *
<figcaption>Cover photo by <a href="https://unsplash.com/@joannakosinska?utm_source=medium&amp;utm_medium=referral">Joanna Kosinska</a> on <a href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption>