Breaking Down My UI Design Process

Design is constantly growing and evolving. Technology continues to update and new software is always coming into the market. To be a better designer, you have to continue to learn, try new projects or in this case a new design process.

The Process

Pre-Discovery Phase

To begin my design process, we have to go back to the root of it all, the client. I call this the pre-discovery phase. In this phase, my goal is to gather as much information as possible, not only from my client but from their competitors as well. Doing this will tell me what works and what doesn’t in their specific industry.

Here are my pre-discovery questions:

1. What are your goals?

‍In order to produce an effective web app or website, I need to know what their goals are. This helps me priorities whats important and gives me a guideline to help achieve the clients goal.

‍2. Which websites inspire you / how do you want your website to look?

Clients like to know that they are in control of their company and for that reason these two questions are important to ask. As a designer it is up to us to lead them in the right direction. Tell them your experience within their industry and make sure to always have research that backs up your point.

3. What features do you need?

‍This helps me know exactly what they need in an application or website, but remember, the more features there are, the more complex the app or site will be so find ways to cut down the unnecessary. Also ask yourself this, does your client needs a website or a web app. Whats the difference? Check this link for a good explanation: website vs. web app

4. What do you like/dislike about your current site?

‍Knowing this will help me keep what’s important and let go of what’s not. This is also a really good time to ask them if they have a style-guide to follow.

5. What is your audience like?

‍Audience is everything when it comes to the any business. It’s important to know who we’re designing for/talking to. Which leads to creating personas. Persona is the aspect of someones character that is presented to or perceived by others.

‍

‍

But in order to create a design anything successfully, understanding the clients audience is a must and personas help you with that.

Wireframes

‍

‍

Now that you’ve complete your pre-discovery phase, the next step is to build your wireframes. Wireframes will help you make quick revisions and gives your client the opportunity to see the overall vision and functionality of their web app or website.

My process for wireframes:

1. Pencil + paper — always start off with pencil and paper, it allows you to be more free, scribble over bad ones and start with a new one, keep your old drawings, feel out your design. Not only does pencil and paper give you freedom but it allows your team to be involved in quick edits or add-ons.
2. Figma — great software for design, best thing about it is how easy it is to showcase your design to your clients if you’re not in the same room. (More about Figma below)

💎 Design

After you and your client have a good understanding of the features and functionality based on the wireframe its time for the fun part, the design process.

I’ve recently transitioned over from Sketch to Figma. I won't lie, I have so much love for Sketch. It’s what I started with but if you want to grow as a designer, you have to to transition to better tools and products. It’s important to adopt the resources used by successful designers and companies.

I’ve recently learned to really love Figma and appreciate how easy it is to communicate with the engineers and clients. Think about if Sketch and Zeplin had a baby, it would be Figma. Now, you’re able to prototype, have multiple team members comment on designs on the art board and easily show live changes in the design while your client is watching all in one place. Oh and its FREE!

As for Sketch, I wouldn’t completely abandon it, it’s great to have if you don’t have internet access.

if you want to grow as a designer, you have to to transition to better tools and products.

My Design Recommendations

• Mobile first — Nowadays, it’s critical to have a responsive website or web app. Mobile UI only gives you so much space and forces you to strategically fit all your information in a condensed area. Once mobile is ready, then you can design for web. With all that extra space, you can now add more to your design after all the functionality is down.
• Stay consistent — You don’t have to be extremely detailed when doing wireframes and I wouldn’t spend too much time making your wireframes look over the top but when it comes the final design phase, you want to be as consistent as possible. Try to reuse the same components as often as possible, think about your margins and paddings, they should be consistent with all other components throughout all your screens doing this will speed up the work for your engineers.
• Communication with your engineers is key — Our job as a designer is to make the engineer's life as easy as possible. With designing applications, make sure you keep in mind what works and what doesn’t during the development stage. Not sure if a component you’ve designed is responsive? Check Material UI! It’s a great site to check just that.

Lets Recap

To understand the soul of the project you have to understand the base

💻 Anything you do, you have to start at the root of the project, be on the same page as your client and do your competitive analysis.

👫 Understand the audience and create those user stories

🧩   Save time by using wireframes

👩‍💻 Think about your engineers and how you can make life easier for them?

📱 Design in Mobile to get all the functionality down then move over to Web.

—

Every designer has their own process and its not a one size fits all. Keep trying different processes until you find one that works for you! I would love to know your process in the comment section below!

‍