ollowing the UX design process doesn’t just give users an intuitive and enjoyable experience, it provides an opportunity for designers to iterate and improve their designs.

The first step to designing an interface users will love is knowing exactly what that process entails.

Let’s take a look at the meaning of UX, how to break down the design process, and how you can apply this method to your next project.

What is UX design?

To understand UX design process, we have to understand the acronym.

“UX”, or “user experience”, is how a user feels when they use a specific product or service. It encompasses a variety of feelings including emotion, senses, and physical interaction.

The term was coined by Donald Norman, Apple’s former vice president of the company’s Advanced Technology Group, who said:

“I invented the term because I thought human interface and usability were too narrow. I wanted to cover all aspects of the person’s experience with the system including industrial design, graphics, the interface, the physical interaction, and the manual.”

UX design is the system designers create for that experience with the goal of having the user’s experience be satisfying and easy. The term UX is involved in a lot of different products and services, but typically refers to the digital design experience.

Why is UX design important?

Good UX design creates a positive experience for your user by anticipating, and fulfilling their needs.

Successful products or services, such as a website or app needs good UX design.

UX design will look different from product to product and brand to brand. That means each UX design solution is going to be much different than others, so don’t worry about what the other team is doing.

The 6 stages of the UX design process

Your business’s UX design process is going to differ from other businesses. That means the stages below may be slightly different, and that’s okay! What’s important is that you find out exactly what works for your company.

Researching, iterating, and testing is all part of a good design process.

Stage 1: Understand

Before you get started with any project, you need to get the basics down first. That means understanding two crucial elements:

• 1st Your Users
• 2nd Your Brand

Since designing for the user experience is all about addressing your user’s issues and goals, you need to answer the question: What are their issues?

What issue are you trying to solve for your user? What problem are you trying to solve? And why are you the one with the answers?

When you understand what the problems facing your users are and you’re able to come up with the questions you need to answer, you’re able to create a strategy for design success.

How does this project align with your brand?

Next, you need to know how this project aligns with your brand’s mission and goals.

What are your company’s values and mission? How does this project contribute to that goal? Is this the right time for your company to be pursuing this project?

Keeping in line with your brand’s core mission is crucial to the success of your project and business.

The dedication to your core mission is the power of keeping in line with your company’s brand in mission.

Stage 2: Research

Once you know the project is in line with your core mission, and you know what questions you’re trying to solve, you need to conduct research.

User research is going to be the life blood of your project. The things you discover and unearth during this stage lays the foundation for how your entire project will turn out.

As a designer, you must challenge your assumptions. Good user research challenges all your assumptions.

Below are good methods of user research:

1- Interviews

Sitting down with someone from your target audience and ask them pointed questions about their issues is key. What are they struggling with? What are they looking for in your product? Face to face interviews are preferred since you can gauge their verbal and nonverbal reactions. Video or phone call can work as well.

Some good tools to use:

• Zoom for video conference calls
• Lookback to record interviews
• Temi to transcribe calls

2 – User/Focus Groups

Organize a group of 3 – 5 target users and have them discuss their attitudes, emotions, and frustrations with an issue or product. It’s a discussion, not just an interview. Encourage a dialogue between the participants and yourself.

Some good tools to use:

• FocusGroupIt for easy group moderation
• Video camera for recording the the group
• Voice recorder for recording the group

3 – Surveys

Questionnaires you send out to your target users are good for finding out your users’ attitudes towards a specific topic with the added benefit of receiving the data as soon as the users are done with the survey. However, you have to be careful not to use leading questions that could disproportionately impact the results.

Some good online survey tools to consider:

• Wufoo
• TypeForm
• Google Surveys

4 – Usability Testing

This is the practice of observing your target audience using a program or product. For example, if you were a designer for the Uber app, you might ask your user to pull up the app and order a car. As they do so, you observe how the act and react to the app. When they’re done, you can ask them questions about their experience. This is a great opportunity to see how happy your user is with the app and if it adequately addresses their needs.

Some good tools to consider:

• User Testing to run a user test on your website
• Optimizely for good A/B testing
• maze for finding out what users are clicking on

Stage 3: Analyze

In this stage, you’ll be using all of the information you gathered in the previous two stages to analyze and distill the most important elements.

Here are two ways you can analyze your research:

User personas

User personas are profiles of your ideal customer

Designers use them to help understand a number of things about their customers including their:

• Goals
• Background
• Age
• Gender
• Behaviors
• Spending habits
• Pain points
• Needs

If you ever encounter a tough problem, you can always refer back to your persona and ask, “What design best services this person’s needs?”

You can create multiple personas to represent the varied users you have.

User journey maps

A user journey map is a representation of the user’s interactions with your product.

See example below:

According to Jim Kalbach, author of Mapping Experiences, the user journey map is crucial for:

• Building empathy
• Providing a common “big picture”
• Breaking down silos
• Bringing focus
• Revealing opportunities

Leveraging the things you learned in the research phase, create a user journey map to help you understand what your user will be going through when using your product or service. Only then can you build the best product for them.

Stage 4: Design

Now, you can start to build out your design.

That means building things like:

• Site map
• User flow
• Mockups
• Images
• Icons
• Colors

One of the most important things you can create at this stage is the wireframe.

A wireframe is like the prototype of your product, a bare essentials representation of your product.

It’s a sample of what your product will eventually look like. They’re typically notable for the block layouts and “X” placeholders to represent future images, and help accomplish three things:

1. Presents information that will be displayed on the page
2. Gives an outline of the structure and layout of the page
3. Conveys overall direction and description of the user interface

Like a user journey map, this will give you a comprehensive look at your users’ experience with your product.

This is an iterative process. That means you won’t get it all done in the first go. You’ll have to design, redesign, get feedback and edit your wireframe content, design and layout.

Stage 5: Launch

After designing and redesigning, you’re going to reach a point where all your assets are ready to ship.

That means it’s time to implement; pass everything to the development team who will create a working version of the user interface.

Once it’s delivered, there are several ways you can go about making sure that the product is perfect and what your clients wants:

• User testing. Like the usability test, this involves you observing your target audience using the actual program.
• Beta launch. This is a limited release of your product to a small amount of people with the goal of finding issues and cleaning them up before you launch it to the world.
• Internal testing. When your own team uses the product and tests out each facet of it.

Feedback with the development team is crucial at this stage. You want to make sure that you clearly communicate any issues that arise and make sure that they are addressed before your product launches.

Stage 6: Analyze (again)

Once your product launches, it’s time for another round of analysis.

Instead of looking at the results of your research, you’ll be taking a look at the overall final product.

Some questions you might ask yourself:

• Where did our process go right? And why?
• Where did we struggle? And why?
• How are our users responding to the product?
• Did it solve their issues and pain points?
• Where can we improve the product?
• What lessons can we take away from this process for future products?

By thoroughly analyzing the product and the UX process, you’ll be able to get more out of the experience than just a product. You also gain invaluable knowledge you can leverage for the future.

What next?

Your UX process is going to be entirely unique to your business and product. This means the UX stages may look a lot different for you compared to another company and product. The important thing is that you find a process that works for you, your team, and your users.

s of September 2024, people using mobile devices contribute to 63.38% of all website traffic. There are approximately 4.32 billion active mobile internet users worldwide.

So if you’re not designing for mobile, you and your users are in trouble. That’s why mobile-first design is a great strategy to employ for all digital products, websites, apps, and software.

Key Points for Mobile-First Design

• Defining mobile-first design
• Why is mobile-first design important?
• The connection between mobile-first design and accessibility
• Mobile-first design best practices, plus examples

What is mobile-first design?

Mobile-first design is a design philosophy that aims to create better experiences for users by starting the design process from the smallest of screens: mobile. Designing and prototyping your websites for mobile devices first helps you ensure that your users’ experience is seamless on any device.

For example, if a mobile-first designer sits down to prototype or sketch out a website layout, they wouldn’t start sketching a desktop layout. Instead, they’d sketch out how it’d look on mobile, then move onto bigger and bigger screens.

The mobile-first design concept first came into the limelight in 2010 when Eric Schmidt, CEO of Google in 2010, announced at a conference that the company would be focusing more on mobile users in their design practices.

Eric Schmidt said:

“What’s really important right now is to get the mobile architecture right. Mobile will ultimately be the way you provision most of your services. The way I like to put it is, the answer should always be mobile-first. You should always put your best team and your best app on your mobile app.”

The reasoning behind this is simple: Mobile design is more limited. After all, you’re designing for a smaller screen and can only fit so many elements into it. That means you choose only what’s most important — what your users need the most — while ignoring everything else.

As you expand your design, you can provide them with other elements, but you know exactly what you need to bring to the forefront.

Why is mobile-first design important?

It’s a matter of numbers: The number of smartphone mobile network subscriptions worldwide reached almost seven billion in 2023, according to Statista. It’s forecast to exceed 7.7 billion by 2028. China, India, and the United States are the countries with the highest number of smartphone mobile network subscriptions. This means the majority of people are using their phones to find the content they need. There’s a big need for mobile-friendly websites out there, and so it’s your job to supply it for your users.

If you’re keeping your eyes on website traffic stats, Google’s algorithm favors mobile-friendly websites.

“Getting good, relevant answers when you search shouldn’t depend on what device you’re using. You should get the best answer possible, whether you’re on a phone, desktop or tablet. Last year, we started using mobile-friendliness as a ranking signal on mobile searches. Today we’re announcing that beginning in May, we’ll start rolling out an update to mobile search results that increases the effect of the ranking signal to help our users find even more pages that are relevant and mobile-friendly.”

That means by providing a good user experience on mobile devices, you increase your discoverability, and potentially your conversion rates.

Mobile-first design offers a wealth of opportunities for accessibility experience. See details below…

The connection between mobile-first design and accessibility

Here are a few ways mobile-first design and accessible design overlap:

• Small-screen friendly. Mobile-first design pushes you to make your digital products more readable on smaller screens, and therefore more accessible to people who might be hard of seeing. When your designs help people with limited vision, they’ll also help everyone else.
• Hierarchy of information. So mobile-first means content first. That means, putting your most important content assets (i.e. the ones your users want) at the top of your page. This also makes your content accessible to anyone with cognitive disabilities.

3 tips for good mobile-first design

Tip #1: Mobile-first = Content-first

When it comes to mobile-first design, you need to remember one thing: Content is key.

You need to give your users all the content they’re looking for, and only that. Anything else might clutter and distract from your users’ experience.

With the big constraint in screen sizes, designing for mobile devices can be a challenge . That means you need to take a look at all of your content and present it in a visual hierarchy depending on how important it is to your user. Only then can you fit the most important elements.

Key Points:

• Companies title at the top. This is key in the visual hierarchy. It lets the users know where they are and orientates them to the specific company website and content. Your brand’s logo and name will likely always go on top of any mobile design you create.
• Users see the most important info right away. Leading news agencies goes all-in on content-first. Most users aren’t coming to their website to check out the about page or privacy policy. They want to read the news, so the newspaper gives it to them.
• Easy-to-reach navigation buttons. The news agencies website stores any extraneous (or less important) content in the hamburger menu up top. That way, if there’s something the user wants to see that isn’t offered right away, they can easily find it there.

This is ultimately a great example of knowing your website’s visual hierarchy and using it to create a great mobile-first design.

Tip #2: Make it easy to navigate

Condense your secondary elements into easy-to-reach navigational buttons. One tried-and-true method of doing this is by using a hamburger menu. Hamburger menus are recognizable ways for your user to attain access to secondary elements. If you don’t have one on the page already, chances are your users know to go to the hamburger menu to find what they’re looking for.

This does come with a catch though: low engagement. According to a study by the user design research firm Nielsen/Norman Group, hidden navigation buttons like hamburger menus decrease content discoverability by 21%. Not only that, but it also increases the time it takes to use the navigation by an average of two seconds.

Unfortunately, offering all of your possible links at once is unfeasible. Luckily, there’s a way you can get the best of both worlds.

Joe Toscano, an experience design consultant, recommends using combo navigation.

Toscano writes… “Combo navigation allows the user to see the options they need the most and makes the rest accessible in a hamburger menu or something similar. […] The site’s content is laid out so well that I don’t need nav buttons. I can scroll the page and get where I want very easily. 

One great example comes from Apple’s mobile page where, instead of implementing a hamburger menu that hides options, Apple utilizes combo navigation to present the most important links (“Buy” and TV”) as buttons at the top of the page.”

If you can’t find what you’re looking for, you can always go to the navigation button on the top to see more options.

Tip #3: KISS (Keep it simple, stupid)

Successful mobile design is simple.

You never want to concern your users with extraneous elements like ads, pop-ups, and other content they don’t want to see, but especially not on mobile. Limit your compact visual real estate to only including the things they’re on the page for.

Consider adding a clear call-to-action that makes sense with the rest of the article. It’s also unobtrusive and adds even more value for the user.

Keep the user in mind

In the end, the most important thing to remember when approaching mobile-first design is that you’re designing it for your user, and only your user.

If it doesn’t add value to their experience, you can probably leave it out.

nyone who is an experienced graphic designer knows how important designing with a grid is. You can create a visual and structural balance within your design using a grid system. Basically designing with a grid is a way of organizing content on a page, using any combination of margins, guides, rows and columns. It has been used for years in newspaper and magazine layouts with columns of text and images and is now commonly used in web design. You can use a combination of grids throughout an entire project to achieve a consistent look and feel. Designing with a solid grid structure will help in creating successful design layouts in both print and web design.

There is no limit to the layout options using a grid system. Grids can range from 3 columns to 16 columns to 24 columns or more. All depending on the framework you are working with for your design. These building blocks, the variation of column widths, borders, page size and other features of the grid will lead to unique page design. Using a grid system will help to position the elements of your design on the page. Once the grid is established, it is up to the designer to decide when and how to break out of it. This doesn’t mean the grid system will be ignored, but elements may cross over from column to column, extend to the end of the page, or extend onto adjacent pages. Breaking out of the grid can lead to the most interesting page designs.

I have found many great resources, blogs and sites related to the Grid System in design. Below are a few of the top links with more detail information about the grid system and using it in graphic and web design.

Reference Links for Grid System in Design

www.thegridsystem.org

960px-grid-templates

www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach

five-simple-steps-to-designing-grid-systems-part-1

960.gs

gridness.net

here have been many discussion about minimizing load time for faster user experiences and why it’s important to do so. Below you see how to optimize images in Photoshop for better web performance.

Keeping image size to a minimum is an important part of keeping your sites load time quick. By understanding a bit about image compression, and how to optimize images for web, it’s possible to significantly cut down on image size while improving image quality and site performance.

Saving for Web and Devices in Photoshop

The first key to better image optimization is adjusting how you save images for the web in Photoshop. If you’re used to the typical “Save” or “Save As…” functions, it’s time to learn a new trick:

“File > Export > Export As…” is what you should start using when saving images for the web. Working from this tool gives extra you much more control over your images and graphics with previews of how an image will look after compressed. There are multiple fine tuning controls for advanced users.

You should almost never use the typical “Save” or “Save As” option in Photoshop when an image is being used on the web. Instead, be sure to “Export As…” to get better control over image compression.

There are three formats we’ll be discussing in this article, and they are the three you’ll find yourself most commonly using:

• .png (8-bit) – Lossless Compression type, limited color range
• .jpg – Lossy Format, great for photographs
• .gif – Lossless with limited color range like .png 8, but .png is usually the better choice.

There will be instances when you’ll need to use 24-bit .png (ie: it’s the only commonly supported filetype with an alpha channel for image transparency on the web), but for the purposes of this post we will not be discussing it. It will almost always be larger than any other format given that it’s a lossless compression type that supports a wider color range.

JPG Compression

The JPG image format is best suited for images that have a wide range of colors where there aren’t sharp transitions or fine edges. Because of it’s compression algorithm, it works very well for Photographs. It’s possible to significantly reduce the file sizes of photographs using JPG while keeping image quality very high. Take a look at the images below for example: There is hardly any difference between the image saved at “GREAT” quality = 674 KB files size (a close representation to the original image) and the JPG saved at “FAIR” quality = 65 KB files size. The difference in the image is nearly 1/4th the original size!

Top Image = “GREAT” quality = 674 KB files size

Bottom Image = “FAIR” quality = 65 KB files size

With .JPG compression you have the ability to adjust the quality in exchange for file size. With photographs, you’ll probably find 60-70% quality to work just fine. If there is text in the image, you may notice more artifacts given the sharp edges, and may have to bump up the quality.

GIF and PNG Compression

The .GIF and 8-bit .PNG image formats are better suited for images with limited color ranges (they can display up to 256 colors), where there are large areas of uniform color. In these instances, .PNG and .GIF will usually produce a close-to-perfect representation of the original image while saving at a higher rate than .JPG. Typical uses of these formats include interface items, icons, and images where text needs to be represented accurately.

More often than not, the 8-bit .PNG format will compress better than .GIF. Both formats support transparent pixels (Not to be confused with alpha transparency which is supported by 24-bit .PNG).

Image File Size really Adds Up

Compressing one image might cut down a little on overall page size, but if you make it a common practice to optimize images all around your website, you’ll end up saving heaps of bandwidth serving smaller files. By serving smaller files, you can make pages load faster, and make the user experience feel much more snappy.

Page load time is a huge factor in retaining users. In one online poll, 51% indicated that slow load times were the number one element that drove them away from a web page. Optimizing images isn’t the only way to speed up your website, but it’s a great way to start.