Helena Yang, Author at NoGood™: Growth Marketing Agency https://nogood.io/author/helena/ Award-winning growth marketing agency specialized in B2B, SaaS and eCommerce brands, run by top growth hackers in New York, LA and SF. Wed, 08 Jan 2025 18:45:51 +0000 en-US hourly 1 https://nogood.io/wp-content/uploads/2024/06/NG_WEBSITE_FAVICON_LOGO_512x512-64x64.png Helena Yang, Author at NoGood™: Growth Marketing Agency https://nogood.io/author/helena/ 32 32 Mobile User Experience Best Practices in 2025 https://nogood.io/2024/12/19/mobile-user-experience/ https://nogood.io/2024/12/19/mobile-user-experience/#respond Thu, 19 Dec 2024 23:27:14 +0000 https://nogood.io/?p=43920 On average, people are spending 4.5 hours on their phones every day. This screen time has only gone up in the last few years and will likely only continue to...

The post Mobile User Experience Best Practices in 2025 appeared first on NoGood™: Growth Marketing Agency.

]]>
On average, people are spending 4.5 hours on their phones every day. This screen time has only gone up in the last few years and will likely only continue to do so as society pushes forward with a digital-first mindset.

This means that it’s essential to take a mobile-first approach when designing apps or any online environment to ensure you’re creating a positive user experience (UX). Having a strong mobile experience is also integral for businesses and brands to drive conversions and user engagement. Let’s dive into the key UX design principles for an optimized mobile experience.

Core Mobile UX Design Principles & Strategies

Users typically have two main goals: (1) complete an action with the least amount of resistance; and (2) find the key information they’re looking for. Mobile UX should ensure it’s as easy as possible for users to meet those goals.

Mobile UX should be thumb-friendly, because users are typically on the go. When it comes to differentiating mobile UX from desktop design, the main differences to consider are:

Chart showing the differences between mobile app and desktop UX

Screen Size

Mobile devices have a much smaller surface area than desktop devices. It’s important to prioritize essential content and think about the hierarchy of information so users can easily see key actions.

This means thinking about decluttering information and simplifying the user interface (UI). It’s also important to think about what’s right above the fold before users keep scrolling further down. Is it going to catch the user’s attention? Is what they see first going to be enough to keep them on the site?

In terms of accessibility, making sure that font sizes are accessible on mobile devices is also important. The general rule of thumb is 16px is a good standard starting point; however, 14px is alright for smaller text where needed, based on the use case.

Navigation

It’s crucial to have mobile friendly ways to navigate back and forth. Mobile navigation can vary in design such as hamburger menus or tappable filter selections. The main thing to consider is how many categories your user may be trying to navigate to, and what is the most seamless way to get there.

What pages are more important than others? How does that impact the hierarchy of navigation? This might also mean including a search bar, like Equal Justice Initiative does, so users can search directly within the navigation to find relevant information.

Screenshot examples of mobile best practices

Interactions

Common motions on mobile are thumb taps, swipes, and thumb scroll. It’s important to consider the touch target size, which is the minimum surface area that users can tap to interact with their finger.

If two buttons are too close to each other, users will have more accidental taps or not be able to properly select their intended action. This is a critical part of user ease and satisfaction on mobile. Suggested spacing between mobile touch targets can range from 8-12 pixels depending on the size of the button.

Location & Context

Mobile users are typically on the go or traveling versus just sitting at their desk. If users are on the go, it also might mean they’re on data or are offline. Considering what critical information can be accessed for the user even in the offline state involves designing with intention.

Thinking about the audience and persona for a particular app is also key to understanding what other localization might need to be accounted for. For instance, Figma has offline functionality that still allows users to create layers, create new files, and change other style properties.

User Expectations

Speed and simplicity are critical for an optimized mobile user expectation. This might mean ensuring screens are simplified to have a primary task per screen and not overwhelming users with options or choices to make.

According to Hick’s Law in UX design, it takes a person more time to make a decision if there are more choices available. By using categories, grouping information, and breaking down tasks into smaller steps, you can make it easier for users to take actions quickly and make decisions.

Other design aspects, like micro-interactions, help users know that an input has been made or a state has changed, and whether or not they’re doing something correctly. For example, a micro-interaction can include notifying users when they’ve filled out a field incorrectly and what the issue is, giving the user the information they need to fix the issue.

Screenshot of a sign up form displaying an error message

Frequency of Use

Mobile users often have shorter sessions than desktop users. This means thinking about how quickly users might need to find something or alternative ways of taking actions such as voice commands. According to Fitt’s Law, the time it takes to interact with a link or button is in direct relation to the size and distance from the user. This means increasing the size of certain buttons on mobile will naturally increase the speed at which users interact with it.

UX Personalization with AI

Artificial intelligence continues to become more integrated into our day-to-day lives. Naturally, it has become second nature to incorporate into mobile apps to improve the personalization of those apps and overall user experiences. This can be seen in applications like ClickUp that can provide AI generated summaries of the status of tasks that have been completed.

This is also seen in apps like Too Good To Go, which allows users to purchase food that may otherwise go to waste at the end of the day. It has a “Recommended for you” section, highlighting establishments that align with a user’s preferences, based either on location or previous food choices.

Screenshot of the app Too Good to Go

Similarly, e-commerce apps or consumer apps often share suggestions based on past purchases and tailor suggestions to user needs.

AI assistants, like Alexa and Siri, have also incorporated natural language processing (NLP) that make searching or completing tasks quite literally “hands off” and more integrated into the user’s day-to-day life. This can be extremely helpful for mobile users when they’re on the go or multi-tasking and can use voice commands to complete tasks without even having to touch their phone.

There have also been advanced accessibility tools like Google’s Live Transcribe, which provides real-time transcriptions for hearing or visually impaired users. There are also mobile accessibility tools, like VoiceOver or TalkBack, that can help with text to speech functionality or object identification by using a mobile camera.

AI integration can improve the user experience by making tasks easier and leaving users feeling more satisfied.

Put Users First

It’s always important to see things from the user’s perspective. Tapping into users’ feedback, either by conducting feedback sessions or sending out surveys, is the best way to keep their perspectives at the forefront of your UX design.

Other analytics tools can help you dive deeper into user behavior from a data perspective. Platforms like Google Analytics can report on number of sessions, session duration, actions taken on the page, etc. Tools like Hot Jar can show you how users are interacting with an app, where they’re looking, and how they’re navigating around your interface. These additional tools can be helpful in analyzing how users are currently behaving and give you insight to further enhance the experience.

Establishing trust with users is also important, especially when users need to enter personal data such as payment information or even more details about themselves. The user is more and more aware of how data can be utilized for marketing purposes, and ensuring there are data privacy notifications or call outs for the user is key to building trust with technology rather than deterring users from engaging with an app.

Mobile UX Takeaways

Designing for users will continue to evolve. However, the mobile UX best practices mentioned above will remain core to a truly valuable user experience. From considering user intent and accessibility to ease of navigation, user expectations will remain fundamental points to consider in the overall user experience.

When it comes to AI and establishing trust with the user, we can see these as opportunities to improve the user experience rather than shy away from these advancements. By staying ahead of these trends, designers can create mobile experiences that are not only functional but also captivating and forward-thinking.

The post Mobile User Experience Best Practices in 2025 appeared first on NoGood™: Growth Marketing Agency.

]]>
https://nogood.io/2024/12/19/mobile-user-experience/feed/ 0
Improving Your CRO With UX Principles in 2024 https://nogood.io/2024/10/22/cro-ux/ https://nogood.io/2024/10/22/cro-ux/#respond Tue, 22 Oct 2024 21:52:35 +0000 https://nogood.io/?p=43247 To be a great designer, we will need to take a deeper look into how design decisions are made and how that impacts the overall user experience. User experience or...

The post Improving Your CRO With UX Principles in 2024 appeared first on NoGood™: Growth Marketing Agency.

]]>
To be a great designer, we will need to take a deeper look into how design decisions are made and how that impacts the overall user experience. User experience or UX design principles are key to understanding why certain design decisions may lead to more seamless user journeys and ultimately drive more conversions. For a design to be successful, the user must always be at the forefront of any design decision being made. Let’s take a look into how to incorporate UX principles when it comes to designing for overall conversion rate optimization (CRO).

Create a High-Converting Website with UX Design

Differences & Similarities between UX and CRO

Before getting into specifics, it is helpful to have a general understanding of the similarities and differences between UX and CRO. A CRO expert generally focuses on tracking click- through rates, form sign-ups, and other call to actions to maximize overall conversions. By utilizing tools like Google Analytics and Hotjar to test and analyze metrics. From forming hypotheses to optimizing the user journey, the goal is to increase the amount of users that take a specific action.

On the other hand a UX expert focuses on how a design can create an overall simple and easy to understand, user experience. The work often involves honing in on who the user is, mapping out the user journey through flows, wireframes, and developing personas. Research and testing involves finding key user pain points in order to improve the overall experience in an efficient way.

CRO and UX overlap

CRO and UX roles overlap in that they both utilize data, results, and findings to optimize the overall user journey or experience. This can involve A/B testing or optimizing designs to determine what changes make the most impact to drive toward an action. Both play a key role in how the user journey is ultimately shaped.

UX Research Strategies to Understand User Needs

Research and understanding the users needs is a critical UX strategy when designing with conversion rate optimization in mind. This means dissecting the problems users are facing, the main goals users are trying to achieve, and how they will interact with a product. There are different UX methods that can help identify the key problems and goals at hand.

1. User Interviews & Surveys

Conducting user interviews, or implementing user surveys are a key way to understand were the user is at. For instance, if we were trying to create a product that helps users with their travel booking, we would want to understand more about the user themselves and what problems they are experiencing.

General questions to ask during an interview or survey could look like:

  1. What does your daily life typically look like: work, family, etc? 
  2. When and where do you typically book your travel? 
  3. What is the main purpose or goal you are trying to achieve while booking travel?
  4. What are the most challenging or frustrating points of booking a trip? 
  5. What solutions do you think would make it easier for you to complete what you are trying to do? 
  6. If there is something you would like to change or improve about the product you currently use, what would that be? 

These questions will vary based on where in the product development process a company is at, whether it is conducting research for a new feature, or a feature optimization, or an entirely new product from scratch. In order to design a product or website that is easy to use, it is key to understand how this product fits into a user’s day to day life.

2. User Journey & User Story Mapping

A user journey map helps break down how customers interact end-to-end with a product from the initial touch point to a specific action and post-action. The map is typically a diagram or a set of diagrams that show the steps and touchpoints while interacting with a product or service. It is common to tie the touchpoints back to how the user is feeling at the moment as well as their pain points and motivations. The user journey map is typically broken down into five stages: Awareness, Consideration, Acquisition, Service, and Loyalty. 

Another helpful strategy for improving CRO with UX research is creating user story maps. These maps focus on tasks that users need to complete to accomplish a task. This helps product and development teams to understand what functions need to be prioritized to create a minimum viable product. For instance going back to a start up travel booking company, the user story map would include steps users take to search date availability, or hotel accommodation availability, as well as checkout.

ChatGPT breaks it down into this concise chart to compare user journey and user story mapping:

Both maps are helpful tools in understanding how a user thinks, what actions they need to take and what they are looking for. This helps ultimately improve CRO when the product or service is created or updated.

3. Heat Maps

Another tool that is helpful for both designers and CRO experts isare heatmaps. Heatmaps capture where users have clicked and scrolled throughout a website to help identify where there is friction and what frustrates users. Hotjar for instance, records user sessions and provides heat maps that show areas of high clicks, or how far users typically scroll down a page. It also provides insights across different device sizes. By analyzing heatmaps, solutions to different user pain points can be addressed and optimized.

Heatmap example - Hotjar

Core UX Principles That Enhance CRO

In addition to research strategies and analytic tools that benefit both UX and CRO optimization, there are core UX principles that improve the overall design and user experience of a product, website, or landing page. In regards to design, this means creating an intuitive design system as well as overall content structure, which involves:

1. Information Architecture

 By having a clear architecture or structure of any landing page or product application allows users to navigate through the product smoothly and intuitively. This includes having clear labels, text hierarchy, action buttons and prioritizing the information that users need most.

2. Error Handling

Having clear user feedback interactions such as when an action they take is successful as well as when something they have entered is incorrect, is also a key element in helping users get to an end goal action. This includes having error messaging and also allowing users to make mistakes and fix them, rather than getting them stuck at certain step.

3. Accessibility

Accessibility is also a critical step in improving the user experience in terms of enough color contrast to ensure people can actually see the content at hand, or having large enough buttons or text sizes to ensure legibility and clickability. In addition to following Web Content Accessibility Guidelines, having other tools like screen readers anddictation tools to be able to reach a wider audience who may have disabilities.

Why UX & CRO Matters 

Implementing UX research strategies and UX best design principles and practices into websites, landing pages, and products are crucial for optimized CRO. From conducting interviews to creating user maps, there are many ways to discover what users are actually struggling with and how to better address those pain points. Other analytics tools like Hotjar also help bridge design and CRO teams when it comes to understanding how users are converting and optimizations that can be made.

At the core of designing for the user always involves keeping core UX principles in mind such as how information is organized and how they support the user as they take different actions. At the end of the day, UX and CRO go hand and hand. Learnings and collaboration between the teams can only help create a stronger user journey. If you need help optimizing your website for UX and CRO, our experts can help; feel free to reach out to us.

The post Improving Your CRO With UX Principles in 2024 appeared first on NoGood™: Growth Marketing Agency.

]]>
https://nogood.io/2024/10/22/cro-ux/feed/ 0
Key Conversion Design Concepts for Growth https://nogood.io/2024/07/24/conversion-design/ https://nogood.io/2024/07/24/conversion-design/#respond Wed, 24 Jul 2024 07:47:04 +0000 https://nogood.io/?p=42429 Designing for growth also means understanding conversion-centered design principles. This includes utilizing a strong hierarchy of information that actually converts users and creating personalized experiences. Other user interface indicators can...

The post Key Conversion Design Concepts for Growth appeared first on NoGood™: Growth Marketing Agency.

]]>
Designing for growth also means understanding conversion-centered design principles. This includes utilizing a strong hierarchy of information that actually converts users and creating personalized experiences. Other user interface indicators can sprinkle visual points of interest as well as help navigate viewers through a page more easily.

Learn more about these key principles and see to start applying them for results. 

What Does Conversion Mean in Design?

Design that makes people stop, think, or take action means the design was able to capture the viewers attention successfully. Evoking some kind of emotion or action in someone means something about the design spoke to the individual looking at the piece of art. This same concept applies to performance branding best practices when thinking about creating designs that convert. Conversion design means something about the layout, choice of imagery, or combination of elements (typically combined with emotive copy) leads a user to take action and want more. 

Ready to elevate your design strategy and boost conversions?

The Top 5 Principles of Conversion Design

1. Layout & Hierarchy of Information

One of the top principles of conversion design to consider when creating an effective landing page is the overall layout of the content. The AIDA framework is a popular marketing framework that follows users’ typical thought processes and rebuttals and aims to guide them through a landing page, anticipating what they want to know in order to convert. Those blocks typically follow this format: 

Attention

The hero block is the first thing people see when they land on a page. That means ensuring there is an eye-catching visual that speaks to the product, and the value that a brand can bring to someone is key. This can include focusing on product user interface elements or using imagery that is more human-focused, depending on the audience you want to speak to.

Adding motion or video into the hero block can also be effective if it adds additional value or communicates the values of a brand effectively. Brands with more playful or dynamic brand guidelines can get super creative with the introduction of the page by adding interactive elements or breaking away from the typical left and right block layout or middle alignment.

In addition to imagery that grabs someone’s attention, it is important to establish trust with the audience with a social proof statement, or awards or number of users to help guide users down the page.

Interest

The next section that typically follows the Attention block is the Interest section. Here, it is important to hone in on the value users can get by using your product or service. This means leaning into brand value props and depicting them in a way that is digestible. Typically, sets of three are always a good place to start so it does not overwhelm viewers and can focus on the main takeaways. It is important to lead with value and add supporting feature callouts and details as needed.

Based on the design system and guidelines this section can vary however in look and feel. A popular format that is also easy to follow is the right and left block text and image alternating block, such as in this Inflection AI landing page that was recreated in unbounce for Pi, and AI client. It also included a “How it works” section that explains what the company does for its users. 

Interest in conversion design

Alternatively, these blocks can include three main cards followed by bullet points or icons. This section could also be interactive with dropdowns. It is important when thinking about best performance branding and conversion practices that the information should still be clear and easy to follow so that users are not searching for the information. 

Desire

The desire section is a key component in the user journey. This section allows space for social proof, such as quotes, reviews, or partnership logos, to instill trust that the product or service truly provides value. This section can be displayed a few different ways such as a carousel slider, logos scroll, or with a connection to repost actual reviews directly from products.

In this Golde example, you can see the review section features filters by benefit, which speaks to problems that customers might be looking for. There’s also a section to add imagery or media, which adds further validity to the product. The point here is to solidify trust with the user. 

Desire in conversion design

Action

The final block helps to drive the point home with a final call-to-action block. By strategically placing another call to action button at the end of the page, it directs users to remember to take action. Oftentimes, adding a frequently asked questions section before the final action block can also help answer any common concerns users might have that might help them convert and again establish more trust. 

2. Speaking to the Right Audience

Another key principle when it comes to conversion design is always speaking to the right audience.

This could mean designing different landing pages with slightly different messaging and imagery that speaks to specific value props that an audience group is looking for.

In NoGood’s case study with Unspun, a sustainable denim wear brand, the strategy used zero party data form forms to determine some of the key values customers were looking for when shopping. For example some callouts from customers included custom fit jeans, sustainable options, or fashion-tech solutions. From there customized landing pages were created to address these different audience callouts and interests. 

Speaking to the right audience in conversion design

3. Consistency

There is also an opportunity to create a more consistent and cohesive user journey from various touchpoints that user interacts with a brand. For instance, if an ad that a user clicks on has certain visuals and messaging, the landing page they end up on can have similar messaging and should maintain a consistent look and feel. This means ensuring brand guidelines are cohesive across all digital platforms so that users start to recognize the brand’s visual presence and feel a sense of trust when they are taken to the landing page.

4. UI Visual Indicators

When thinking about conversion design in terms of best user interface (UI) design components and best practices, there are several visual indicators that can support the conversion journey.

When looking at typography, it is important to have a clear visual structure so users can quickly scan the H1 and H2s on any given landing page and extract the key items they should be focusing on. Information that needs to be emphasized might be bolded or in a different font entirely to direct users’ eyes on what to focus on.

Other design components that are critical to design for are the call to action button style that is used. This means ensuring there is enough color contrast between the foreground and background, and making sure the button is large enough so that the button can be easily accessible.

CTA  buttons to create desire in conversion design

Other design components such as icons, data visualization, and motion graphics can also be helpful as visual indicators of where users should address their attention. They also provide other routes of communicating a message quickly without someone having to read all the copy on a page. 

5. Orientation & Navigation

As users go through a landing page, it is also important that they stay oriented in terms of where they are on the page or how far along they are to complete an action. This means, for instance, if there are steps to create an account, there are steps that show progress close to completion, and the user is to keep them on track. On NoGood’s blog page, for example, there is a progress bar that lets you see how far you’ve read for a certain article.

Orientation and navigation in conversion design

Having a clear menu navigation on a page lets users quickly find what they are looking for. This means having clear parent menu options and child options. Bead crumbs are also common to let users jump back to the previous page more easily. On NoGood’s recently redesigned case study page, a sticky sidebar was implemented to act as an index for users to easily navigate to different parts of the case study page. This is especially helpful when a page is longer, and users need to orient themselves back to the top or if they want to jump directly to a section they are interested in. 

Navigation and orientation in conversion design

Conversion Design Takeaways

There are multiple ways to consider how design can support conversion. When looking at successful landing pages that convert, the most effective principles reflect the concepts above. Pages that have a strong layout and hierarchy of information always help to guide users through a page effectively and purposefully. Ensuring that both visuals and copy are speaking to audience segments helps to retain interest in the content.

Having consistent brand elements and effective visual indicators will further signal to users that the page they are looking at is trustworthy without losing interest. Being able to effectively navigate users’ attention through the page also supports the entire user experience. Keep these principles in mind when you are creating your next landing page design and see how they impact conversion. 

The post Key Conversion Design Concepts for Growth appeared first on NoGood™: Growth Marketing Agency.

]]>
https://nogood.io/2024/07/24/conversion-design/feed/ 0
Boost Conversions with Effective Ecommerce User Interface Design https://nogood.io/2023/08/06/ecommerce-user-interface/ https://nogood.io/2023/08/06/ecommerce-user-interface/#respond Sun, 06 Aug 2023 16:38:13 +0000 https://nogood.io/?p=28057 Learn the best practices for eCommerce UI design to create seamless shopping experiences that boost conversions.

The post Boost Conversions with Effective Ecommerce User Interface Design appeared first on NoGood™: Growth Marketing Agency.

]]>
When it comes to successful e-Commerce websites and brands, user interface (UI) design plays a key role in determining the success of those brands.

Ecommerce UI design site visitors allow users to have a seamless experience navigating through the website. Ensuring that your site’s conversion rates are high means users should easily find products that are best for them and ultimately checking-out in one full successful purchase. If potential customers have a positive online shopping experience overall, that is another key incentive that they will return as repeat customers.

If you want to understand some UI foundations, 6 Tips to Achieve UI Design Mastery is a helpful read for understanding the basics of what good UI entails. Let’s dive into some best UI practices to ensure your e-Commerce site converts customers and creates a pleasant shopping experience.

User Behavior & User Experience

User Experience design, or UX design and research, goes hand in hand with great UI design. UX research allows brands to break down their target audience profiles, customer pain points, and how those pain points can be solved.

There are various ways to conduct UX research methods. This can start with surveys and interviews, which allow in-depth answers to customers’ preferences, challenges, and overall experiences. You can also look at Google Analytics to understand how long users stay on a page and what are the top clicks on various pages.

Tools like Hotjar also provide insights and recordings of a user’s shopping journey on the website and how the user navigated on different pages. From these observations and research, you can get a better holistic understanding of what changes may need to be implemented on your e-Commerce website to improve the overall user experience and design.

Search & Navigation

When a customer arrives on your website, they will naturally search for where to go next. This is why having a strong menu and intuitive navigation section on your website is key for allowing users to find what they are looking for with ease.

Hive, a sustainable online grocery store, is an example of having a robust search bar. When you type in a keyword, for example, “vegan,” you see products automatically pop-up that contain the keyword you were searching for. There is also a “Top Suggestions” call out on the left that gives you their top suggestions that contain this keyword. This is a great way as well for e-commerce brands to place certain products in front of customers as well.

In regards to an e-Commerce site menu and navigation bar, the key is to keep things simple. Having main parent categories with nested subcategories that have clear differentiations helps with the organization and clarity of digital product offerings. The menu is crucial for allowing users to easily find product categories they’re looking for and to continue browsing.

Looking at Hive’s navigation, you can see there are key parent categories: Deals, Shop By, Pantry, Snacks, Beverages, and more. The Shop By section is then broken down into subcategories: Features, Dietary Needs, and Brand. Within each subcategory, you have tertiary categories, which are even more specific. Tertiary categories help direct users to more specific categories if needed, while the parent categories help keep items grouped.

Category Page

When landing on a category page on e-Commerce sites, navigational elements, search filters, and high-quality images are top of mind for best UI design practices.

If we look at one of Patagonia’s category shopping pages, for example, we see that the filters are on the left-hand side and remain sticky as you continue scrolling down the page. You can toggle between different subcategories and select your size and fit filters. There’s even a toggle button that allows the user to switch to in-store pickup and customize which location they would ideally pick up from. On the upper left, there is also a “sort by” drop-down that is organized by:

  • Recommended for you
  • Popular
  • Newest
  • Price (High to Low)
  • Price (Low to High)

These sorting features allow for more personalized options during the browsing process. The categories and sorting options can be customized to a brand’s products and understand what problems they can solve for their customers.

When it comes to product images, you can see below that the image usually changes when you’re in hover mode on desktop. For most industries, and especially for apparel industries, showing the product on a human or a lifestyle image helps customers better visualize the product in real life.

There is also a quick add call to action (CTA) or plus button mobile that allows customers to easily add the product to their cart. Infinite product scroll is a great way to see all the product options; however, if the scroll is too long, you could potentially customers in the decision process.

Product Pages

When approaching best UI design practices on product pages, thinking about how to optimize for conversions is always top of mind. Let’s take a closer look at Golde’s product page. On the right side, where the product details, name, and description are, we see that all of the key information is above the fold on the desktop view.

They’ve added the description, benefits, ingredients, and How To Use sections as toggles horizontally to optimize space above the fold. This allows for the primary Add To Cart button to be visible without getting lost in too long of a description. There’s also a highlight of the 500+ reviews that provides trust and social proof when landing on the page.

On the left side, there is a curated image gallery of the product along with a lifestyle image. Deciding what types of people are in these images can help portray the brand’s overall values and target customers. Having a baseline of strong, clear imagery is key for showing off any elements of products. Being able to zoom in on product images to get a more detailed view is also a plus. However, it’s also important to optimize image and video sizes whenever possible to not slow down the site speed.

In general, since responsive design is critical when it comes to e-commerce UI design, on mobile view, you want to ensure users have just as easy of an experience shopping. Consider having a sticky Add To Cart button so that users can quickly add products to their mobile shopping carts.

When you move below the fold on Golde’s product page, you find additional product features that help answer any questions the customer may have. It also includes an extensive customer reviews section which is important for customers to know how other people feel about the product.

The product reviews highlight the product’s taste, quality, results, and feel-good factor – which are unique callouts of Golde’s products. Overall you want the customer to feel confident in their decision and trust the brand. This can be applied across multiple eCommerce businesses.

Checkout Stage

Last but not least, having the best UI practices on the checkout page can be a make or break for a user following through with online purchases.

If we take a look at Golde’s checkout, we see that when the user clicks the Add To Cart button on a product, there is a popup checkout panel that appears on the right side of the window. You can toggle and see what’s in your shopping cart by easily navigating to the shopping cart icon in the main menu.

At checkout, you also want the user to be able to change their online purchases if they want to. In this example, you see the option to decrease the product value to 0, which would remove the item from the cart. You can also easily click out of the “Your Cart” panel and back to the product or category page to continue browsing and comparing options.

We also see there is an option to select a nonprofit of your choice that 1% of your purchase to go to. This demonstrates Golde’s brand values and is an added good feeling for users at checkout. There is also a section to upsell the user by putting similar products or top sellers in front of online shoppers to drive the average order value up.

Implementing easy-to-follow steps during the checkout process will help customers get to the finish line. Another example is Patagonia’s checkout page. They have the following user flow and key elements on their checkout page:

  1. Add Product To Bag → Your Bag Page
  2. Shopping Cart Page → Checkout Page
  3. Checkout Page → Shipping info, payment info, trust elements, FAQ section

What’s important to call out here is the use of additional value props right under the “Place Order” call to action button. They reiterate that they are ironclad, guaranteed, have free shipping, and easy returns. This helps customers know that there is limited risk with their purchase process. They even have an added dropdown FAQ section to answer any common rebuttals from customers and clarify any questions about order returns.

Overall Branding & Design

Let’s also not forget about the overall brand identity and design system for an e-commerce brand. The first thing customers notice is what impression and feeling a brand gives them. Is it an impression that lasts even after a site visit or purchase? When creating an initial design system — choosing specific color palettes, fonts, and design elements that are unique to the brand and its target customer plays a key role in creating a strong brand image that can lead to brand loyalty.

Takeaways

The key takeaway from these best e-Commerce site UI practices is ensuring that the customer journey is always top of mind. The interface elements and visual design must be simple enough that shoppers can easily find what they’re looking for.

Allowing for more personalized moments throughout the world-class shopping experience can also help users pinpoint what they’re looking for. Since the ultimate goal is to get the user to a successful purchase, it’s important to instill signs of trust throughout the conversion and checkout journey. Having strong UI principles throughout e-Commerce sites will always support the overall success of the business.

The post Boost Conversions with Effective Ecommerce User Interface Design appeared first on NoGood™: Growth Marketing Agency.

]]>
https://nogood.io/2023/08/06/ecommerce-user-interface/feed/ 0
The Only Competitive Research Tools You’ll Need as a Designer https://nogood.io/2023/03/16/competitive-research-tools-for-creative-teams/ https://nogood.io/2023/03/16/competitive-research-tools-for-creative-teams/#respond Thu, 16 Mar 2023 19:47:32 +0000 https://nogood.io/?p=26571 Competitive research tools to help creative teams create more impactful designs backed by reason.

The post The Only Competitive Research Tools You’ll Need as a Designer appeared first on NoGood™: Growth Marketing Agency.

]]>
As designers, we are often told to approach design projects with research first. This ideology carries through to performance creative and marketing. When determining what ads, emails, and landing pages will perform best, designers who do the due diligence of conducting competitive research are set up for more success. The key is utilizing competitive research to create more impactful designs backed by reason.

What does competitive research look like for creatives?

Competitor research can look different depending on the goal of the analysis and who is conducting it. The most common types of competitive analysis include website, product, paid media analysis and market research. For the purpose of creative teams, particularly in growth marketing, competitive research will be most valuable when evaluating the following from a creative point of view:

  • Paid social creatives
  • Email design
  • Website design

To kick off the design process, creative members should first research into competitors to see what types of content, ads, and overall design mark their competitors are making. It creates a starting point for what types of creative tests would be worth running in a campaign. This established a baseline on what industry standards look like and why certain creatives may have performed better than others.

While looking through competitors’ creative footprint, designers should start asking questions like:

  • What creative elements are grabbing the user’s attention?
  • What creative copy, ad post copy, CTAs are working?
  • Is there use of motion?
  • Is there a successful template or layout?
  • How cohesive is the conversion journey from the ad, to email, and/or landing page?

By conducting competitive research, designers are going beyond the surface level and tapping into the strategy behind one’s design decisions. It lets design teams hypothesize and evaluate what has worked or hasn’t worked for competitors. This will ultimately better inform a designer’s creative decisions for any campaign.

Best Competitor Analysis Tools for Creatives

There are several competitive research tools out there for creative teams to use. Here are some essential ones to get creative teams started with competitor research.

Paid social creative analysis

A tool that has become essential is Facebook Ad Library. Launched in 2019 to provide more transparency around ads, this is a free easy-to-use tool that allows you to look up any company to see what ads they have been running. This provides inspiration not only for creative storytelling but also for ad post copy. By looking at competitor ads, designers can start identifying trends, creative formats, and messaging that are popular among competitor brands. This creates a strong starting point for your next ad creatives.

It also sets the bar for what has already been created, and how you can create something different. Although the tool doesn’t let you see the performance of each of the ads, if you regularly check in on brands and see what creatives are still running, that can be an indication that the ad or style of the ad has been performing for that brand.

Facebook Ad Library for Seed

With the rise of UGC content that captures audiences in a new way, TikTok Ads Library, also known as “Top Ads” allows platform users to discover the best-performing ads within different industries, regions, and objectives. You can search by company name and TikTok shows the most relevant videos that populate with that search term.

What’s great about TikTok’s ad library is that when you click into an asset, you can see the breakdown of key metrics like CTR, CVR, and conversion. You can see where users click through on the video and where they drop off. Design teams can use inspiration for video-based assets to develop other designed ad variations with similar concepts, knowing which ones performed well on TikTok. All this knowledge can be carried into concepts for future creative campaigns for your client. 

TiKTok Ads Library

Another tool for competitor creative research is Moat which is a quick search engine for display ads. When you hover over the assets you can see when the ad was last active. Again this helps provide color into the types of messaging tests, CTAs, and formats that competitor brands may be running currently or have run in the past. It gives you a leg up in deciding what tests make sense for your brand.

Moat search engine for display ads

Email creative analysis

Competitor research doesn’t stop at ads. Competitor research should be looked at through a holistic multi-channel approach. Emails are another great way to learn more about a brand, their messaging, and creative footprint. Really Good Emails allows you to search emails by categories / industries. Although you might not always find a specific brand, it does give you a quick overview of emails in that particular industry and what an industry standard looks like from a design perspective. Similarly, Milled is another email research resource that allows you to look up companies and keywords. Although not every brand’s email repository is in the system, you can still find companies in similar industries and get baseline insight into the types of email campaigns being run.

The bootstrapping version is to simply visit competitors’ sites and sign up for their emails. This allows you to create your own analysis of competitors’ welcome flow, email frequency, and content. It also provides insight into overall design and messaging for your particular client, and ideas for campaigns that could tie back to ads and other channels.

Milled email research tool

Website creative analysis

Conducting website analysis from a creative perspective is another key tool for creative teams.

Whether you create ads or emails, users are directed to landing pages. It’s important to ensure that a brand’s site is up to industry standards and identify areas of opportunity to optimize a site for messaging, design, layout, CRO, and user experience. What does the user journey look like? Are there clear action steps and information on the page?

Competitive Creative Research

All of this information can help you identify what optimizations need to be made on your brand or client’s site. It also sparks ideas for what landing pages might be worth creating and testing. It also allows you to identify competitor value propositions and messaging, to ensure that your brand will stand out.

Competitive Research In Practice

With the range of tools available today to conduct competitive research, it is important to remember to step back and look at the analysis from a creative strategy lens.

The research done creates a strong hypothesis and starting point for experiments to run. Creative teams should build upon that research and decide what experiments and iterations are worth testing. Creative teams can then add their unique design knowledge and eye to create truly valuable creatives.

The post The Only Competitive Research Tools You’ll Need as a Designer appeared first on NoGood™: Growth Marketing Agency.

]]>
https://nogood.io/2023/03/16/competitive-research-tools-for-creative-teams/feed/ 0
6 Tips to Achieve UI Design Mastery https://nogood.io/2022/07/01/ui-design-best-practices/ https://nogood.io/2022/07/01/ui-design-best-practices/#respond Fri, 01 Jul 2022 15:10:25 +0000 https://nogood.io/?p=23553 UI design is the practice of blending form and function of design in order to create an interface that is not only beautiful, but functional.

The post 6 Tips to Achieve UI Design Mastery appeared first on NoGood™: Growth Marketing Agency.

]]>
UI often gets mixed up with user experience design, or UX, which focuses more on how an interface works and the functionality of a product. UI and UX do work hand and hand, and when done in a strategic way can create a truly effective design that resonates with the user. For now, let’s dive into the best UI design practices that are key to designing an effective interface. 

What is UI?

We currently live in a time where a majority of how we experience brands and products comes directly from our digital devices. User interface, or UI, has become essential to the growth of companies in being able to connect with their audiences. So what exactly is user interface? It involves the overall design, look, and layout of any visual interface that people interact with. This includes elements like text formatting, menu options, imagery, and more. These elements work together to create a clear form of communication in a thoughtfully designed way.

6 UI Design Best Practices

1. Layouts & Content

Defining the intention of the user. The overall content or information on any page should always be concise and presented in a logical way. To design effective UI, the overall layout sets the stage for what the true intention of an interface is, and how it will be used. When it comes to creating a layout that is eye-catching and effective, sometimes less is truly more. Having a limited amount of information and a minimal design are good practices to keep in mind. When there are constrained options, the user is more easily directed to make a decision and take the next action. If there are too many elements, copy, or distractions on a page it can lose a user’s ability to know what next step they should take.

There are certain actions to consider when it comes to mobile design like tapping and swiping. On a desktop, however, there’s clicking and hovering. Keeping the different actions a user can take in mind helps create context when designing multifaceted interface elements. A great example is a dating app, where the user easily learns that all they have to do is swipe left or right to see another potential connection. Following best UI practices can help an interface feel natural and intuitive to the user.

Content also ties back to the role clear copy plays in best UI practices. In order to notify users what will happen next, copy should clearly communicate what a button’s intention is or what that next action will lead to. You always want to give more context to the user about what will happen if they take a certain action, and also provide ways for users to undo an action or easily go back to a previous screen. An example of this would be error messages, if something isn’t filled in correctly into a field, an error message can pop up explaining it’s a requirement that the user has not yet completed. This can also apply when the user has done something that the platform wanted it to do, such as sharing an article. Positive reinforcement or change to a successful landing page lets the user know their action has been completed.

2. Understand Your Audience

Understanding your actual users of a platform or service plays a critical role in creating an effective user interface. This involves understanding the true purpose of a product and what needs or problems you are trying to solve with a platform or brand that you’re building. This might involve sending users quizzes, or feedback forms to really understand what the user’s goals are and what they’re looking for.

3. Type Hierarchy

Strategically using different sizes and weights of fonts, are important for clearly communicating what is most important to the user and what is less important. The eye naturally flows to the largest text on a page before seeking a smaller-sized text. For example, a blog title is often an H1 headline, meaning it is the largest & boldest font, whereas a subheadline could be a smaller font with a regular or less bolded weight.

4. Interface Elements

Buttons, icons, notifications, etc. of a design play a key role in creating a strong UI design. When creating these elements, it’s important to remain consistent with how each element is stylized throughout the project. This also is important when it comes to designing different states of elements, such as buttons that communicate whether a user is taking an action or not.

For instance, there are hover states and clicked states for buttons which help to clearly let the user know action has been taken. Familiarity is crucial in creating an interface that is recognizable to most people, such as using a mail icon for sending a message, or a trash can for deleting something from your cart. These cues jog a user’s frame of reference and work together to create the best UI design practices.

5. Optimized For A Range Of Devices

Is it optimized for mobile? Designers are often asked whether they are designing a social post or a site landing page. When it comes to best UI practices, making sure that a design is optimized for various device sizes is essential. With new phone sizes and devices being developed across the board from iPhones and Androids to Google phones – there are various formats to consider when designing.

For desktops, there is also a wide range of device sizes to consider from tablets to varying laptop sizes and desktops. It’s important to make sure that critical information isn’t being cut off or getting too squished in a certain screen size, otherwise, the user will want to leave the experience. This is often called breakpoints when it comes to responsive design, where certain styles will stay the same on certain device sizes, while in other sizes the spacing begins to look off or content can even fall off the frame of the interface. Having different initial design blueprints in different sizes is a best practice for creating UI that is actually responsive and optimized for various devices.

6. Accessibility

Accessibility is another important factor to consider when thinking about best user interface practices. Ensuring that the colors used, font sizes chosen, and the overall content of a site or app meets accessibility guidelines. For instance, to check color compliance there is a range of tools you can use like Userway that helps to check color contrast to ensure Web Content Accessibility Guidelines are met (AAA is best). This helps to support people who are color blind who would be interacting with the interface.

Other practices to keep in mind are adding alt text helps people who are blind are visually impaired. This helps people who are visually impaired or blind to use screen reading devices that can read out the image description to them in order to understand the content.

If there is a video playing on a page that does not have captions, it’s good practice to include a transcript of the video so people who are hearing impaired can have context as well.

Understanding Your Design Needs

There are several best UI practices one can follow in order to create a functional and design forward interface. Applying these best practices from interface elements to type hierarchy, to overall optimization and accessibility are the main starting points for designing something truly forward-thinking and effective. When a platform feels intuitive and functions easily, that gives homage to a thoughtful design process and designing with clear intention.

The post 6 Tips to Achieve UI Design Mastery appeared first on NoGood™: Growth Marketing Agency.

]]>
https://nogood.io/2022/07/01/ui-design-best-practices/feed/ 0