Gemma Ecommerce App

Gemma Mobile App

UX Design / UI Design / Mobile App Design

Gemma Mobile App

Gemma Ecommerce App

OVERVIEW

Gemma is an online retailer that sells apparel, accessories, and shoes for women. This concept brand has a mobile responsive website, but several of its competitors had recently released mobile apps. The solution was to design an ecommerce app to stay competitive and top of mind.

As the UX/UI Designer, I designed an ecommerce app that was clean, modern, and easy to use.

ROLE

UX/UI Designer

DATE

2019

Ecommerce App Design

My Services

The brand was experiencing great success with its mobile-optimized website, but Gemma stakeholders sought tighter control over the user’s shopping experience as well as the ability to send push notifications for discounts. My services include requirements gathering, competitive analysis, sitemap, task flows, wireframes, usability testing, and prototypes.

Ecommerce App Wireframes

Filter

While the concept of shopping on mobile sounds convenient, it can be a daunting task due to the number of products shown.

The header on this grid page provides all of the necessary navigation, sorting, and filtering options a user needs to find the right products faster and easier.

In addition, users may swipe within the image thumbnail to see other views of a product—a feature I found competitive retailers were lacking.

Customer Photos

Seeing models wearing products is not enough for certain users. They would like to see the product on people in real life. The added benefit of having customer photos is that it further instills trust.

Displaying each customer’s measurements also allows users to quickly make a decision on whether or not the product will fit them.

Customer Photos

Add to Bag

On the product detail page, users must select a size before the Add to Bag button becomes active.

After adding an item to a bag, a sheet slides in from the bottom. The primary task is for users to check out, but they can also view their bag or continue shopping by clicking on the overlay background.

The Result

The result is an ecommerce mobile app that helps users find the right products faster and makes it easier for users to make a decision for faster checkout.

Blog Redesign Mobile Responsive

Animal Behavior College Blog

UX Design / Content Strategy / SEO

Animal Behavior College Blog

Blog Redesign Mobile Responsive

Animal Behavior College (ABC) is an online school. Their website contained dozens of valuable content, but their discoverability was low. In an effort to increase organic traffic, establish thought leadership, and improve user experience, I redesigned their blog.

Process

  • Information architecture
  • Sitemap
  • Writing
  • SEO
  • Web design
  • Social media strategy

Challenge

The challenge was redesigning the company blog with a focus on SEO and UX while ensuring it was optimized for conversions.

Process

Content Audit

Before creating new content and a team of writers, I researched any existing content they might have had on their main website. To my luck, I found a Tips of the Month section that wasn’t receiving much organic traffic.

This Tips of the Month section contained dozens of blog-like content, and they were written for the purpose of having pet owners copy and paste the RSS feed onto their own websites. Since they were used as a point of reference, the layout of the tips resembled that of a directory.

I proposed to move the tips over to the blog for increased discoverability and search engine visibility. During the migration process, I’d optimize them and include features that would engage users to stay on the website.

Information architecture

The first step was to decide on the structure of the blog.

I reviewed their Tips of the Month content and uncovered categories. One of my goals for the blog was to set the company as an authority in the pet industry, so I kept that in mind when creating the new blog sitemap.

Blog Information Architecture

Blog Sitemap

On-page SEO

Many of the tips were already well written and contained valuable information, so I simply proofread them and added keywords where necessary and appropriate. I wrote meta data, added internal links, and added high quality images to accompany the blog posts.

Blog redesign

I worked with the graphic designer to redesign the blog. Upon landing, each blog post was displayed in its entirety on the blog homepage. This created many indexing and duplicates content issues, which were severely impacting the blog’s ability to rank in search engines. Plus, it made for a less-than-ideal user experience due to the amount of information displayed at once.

Original Blog

The new blog design is mobile responsive, clean, and much more visual. Aside from the layout, I added several features to increase engagement.

Blog Redesign Mobile Responsive

Conversions

One of the major reasons the blog wasn’t a priority was due to the fear of losing conversions. It was believed that once users entered the blog, they wouldn’t return to the main website (where their money pages were) and leave the website entirely. To address this fear, I added a contact form on the blog as well as company promotional banners.

Blog Organic Traffic

Result

The blog has seen a massive growth in organic traffic. In the first year since I started working on the blog, new users increased by 670.17%. The following year saw a 102.13% increase.

Several blog posts have even appeared in Google’s featured snippets (aka answer box).

In addition, the blog is generating a regular number of leads as a result of the contact form and ads.

Featured Snippets

Knowledge Base Article

Writing an Effective Knowledge Base Article

Writing an Effective Knowledge Base Article

Writing an Effective Knowledge Base Article

Find yourself answering the same questions all the time? Consider creating a knowledge base.

A knowledge base is a self-serve center where customers can find information about your product or service. It is a database of articles that answer questions, teach customers, and provide tips. When done right, it can decrease calls to customer support, improve customer satisfaction, and even increase customer retention.

You may be thinking that knowledge bases are exclusive to big companies, but that’s not true. In fact, a knowledge base can benefit smaller companies even more since they may not have the resources to spend on 24/7 customer support or live chat. Besides, a study found that 67% of consumers prefer self-service over speaking to a company representative anyways.

Writing knowledge base articles expands on the idea of FAQ pages in that it covers a wide range of topics in depth. Check out the four tips below to writing effective knowledge base articles.

Tips for Writing an Effective Knowledge Base Article

1. Choose a relevant topic

Take those questions you find yourself constantly answering and convert them into knowledge base articles. These questions may include how customers can change their billing information or how they can add a video to their landing page.

Dedicate an article per question. When answering a question, you will most likely have other questions you can answer in the same article. Rather than bundling that information in one long article, create a new one and link to it. Customers visit your knowledge base with a specific question in mind—don’t slow them down by burying the answer under irrelevant information.

2. Format for scannability

Knowledge base articles should be formatted for scannability, allowing customers to find answers quickly. Below are a few ways you can develop scannable content:

  • Choose the appropriate format: Certain knowledge base articles may be answered in a short paragraph while others necessitate numbered lists. Once you have developed a format for a specific topic or category, stick with it. Consistent formatting helps customers find information quicker and easier.
  • Be succinct: Provide answers clearly and effectively in the least number of words. The beauty about knowledge base articles is that they don’t need to be a certain length—just enough to answer your customer’s question thoroughly.
  • Speak your customer’s language: This is especially important when writing more technical tutorials where you may be tempted to write in developer terms. Check your emails to see how customers have described their problems and incorporate those terms in your article. For terms unique to your company or industry, take the time to define those the first time you mention them in the article.
  • Include visuals: Screenshots, videos, and GIFs can enrich the learning experience for your customers. Screenshots are easy because they’re low effort and least resource-intensive. However, customers may benefit more from interactive media, such as videos and GIFs. Whichever visual you choose, always make sure it supplements the text content and does not replace it. Not everyone will wait for a video to load.

3. Test your tutorials

When writing how to tutorials, it’s important to verify the steps yourself. Aside from confirming the steps are correct, going through the tutorial yourself allows you to take screenshots along the way that can be used in the article, identify issues with the process, and generate new ideas for future articles.

4. Keep articles up-to-date

You will update the design of your website, app, or software at one point or another. Maybe it’s moving a button or a brand refresh—either way, update your knowledge base articles to reflect the changes. The purpose of knowledge base articles are to provide a source of truth. When articles become outdated, they become useless and customers are less likely to rely on your company for answers.

With these tips in mind, you can start building your knowledge base with helpful articles that instantly provide value to your customers. Writing the first few articles in the beginning will take some time, but it will make you and your team much more productive in the long run.

Data in Design

Using Data to Design

Using Data to Design

Using Data to Design

Do you often use your gut feeling when it comes to making decisions? Ever catch yourself believing that a particular button color will convert users into leads? Instead of relying on your gut feeling, consider taking a data-driven approach to design.

Using data to design is an objective way to answering your questions and guiding you to the right solution. Data can eliminate assumptions and validate your decisions. At the right stage, it can even help you identify issues with the design prior to implementation—saving you from costly development rework.

Two Types of Data

There are two types of data: quantitative and qualitative. Quantitative data are measurable metrics, such as pageview count, dwell time, and conversion rate. In contrast, qualitative data are non-numerical and cannot be measured, such as observations, feelings, and opinions.

Quantitative data shows you the numbers and qualitative data tells you why. Both have their place, but the best design solutions result from both types of data. In this article, I will discuss how you can leverage data to make smarter design decisions.

How You Can Leverage Data to Inform Your Design

Persona Development

One of the first applications for using data in design is developing a persona, or a representation of your primary user. Personas are essential to the user experience design process because they remind teams to align their work for the user instead of themselves.

Where are your users located? What are your users’ motivations for turning to your product or service? How does your business fit in with their higher-level goals? Pairing demographic information from a data analytics tool with one-on-one user interviews will reveal the type of person who will be using your product or service.

Web Design

A redesign can help increase your conversion rates when done right. While you may be dreaming up a completely new design, you should first take stock of your existing content.

If you have a database, you could ask your programmer to create a client-facing page where you can filter and sort the data yourself. You might find that a majority of your images are smaller than 1200px wide. Unless you plan to obtain larger images, a design that incorporates full-width heroes may not be feasible. Taking inventory of your existing data will help you determine the layouts that can work for the redesign and, more importantly, ones that won’t.

Information Architecture

Every website will have these standard pages: Home, About, Services and/or Products, and Contact. However, websites with hundreds of pages, such as ecommerce and editorial sites, demand second-level and third-level navigations. Where do you even begin to decide which pages to include?

Taking a look into your data analytics tool, you can sort pages by pageview count and bounce rate. If you have a search bar on your website, pulling up the top search terms may show you the pages most important to your users that they cannot easily find from your navigation.

Site Structure

Data analytics tools will show you your top pages, but it won’t tell you how to organize them. Should “refrigerator” be under the Kitchen category, or would it make more sense under Appliances? Conducting a card sorting exercise with your users can help you make that call.

During a card sorting exercise, you write down one term or topic per card. Once there’s a card for every term, users organize those cards into groups that they label. For a navigation, those group labels can serve as your categories and the cards under those categories are the pages you would include.

Content Strategy

All too often, marketing websites are filled with business jargon that no one else outside of the company or a marketing department would understand. When your copy does not resonate with your users, they won’t know what you’re selling.

Talking to your customer support or sales team will help you determine the terms your target audience use to describe your product or service. This data can contribute to higher converting landing pages, clearer labels, and helpful tooltips.

Design Priorities

Why are your users dropping off? Why do they keep asking the same question? Developing a customer journey map will help you identify areas of friction.

Customer journey maps illustrate the steps your users take to complete a task. For each step, you also include the emotion your user may be experiencing. The result of this data surfaces missed opportunities and a direction for where your efforts should be focused on next.

Data-driven design keeps your gut feeling in check, frees your work from bias, and produces results that better serve your users. When working with data, there’s always the potential to skew it, so remember to avoid leading questions during user research and to extract insights that will only guide you to build better user experiences.

Improve Your Website’s UX

11 Ways to Improve Your Website’s User Experience

11 Ways to Improve Your Website’s User Experience

11 Ways to Improve Your Website’s User Experience

If designing a website weren’t difficult enough, then designing a website that looks good and is easy to use might prove to be even more challenging. Fortunately, there are several ways to instantly improve your website’s user experience. Below are 11 UX tips for your next website redesign ranked from quickest to hardest to implement.

11 Actionable UX Tips for Your Website

1. Review your content

Read the content on your website. Does it make sense? Are you using industry or (worse) internal jargon the average user wouldn’t know? Make sure your content is easy to understand for your users. This begins with using terms they use to describe the services or products you offer.

2. Use headings and chunk content

Break up your content with headings and visuals. Blocks of text are uninviting and reduce readability. Using headings to divide your content into digestible chunks not only caters to users who skim, but those headings are also great for SEO. Images and videos are another great way to break up content so long as they are high quality and relevant.

3. Use one color for call-to-actions (CTAs)

Limit your website’s color palette to two to three colors—with the third color being your accent color that should be reserved for actions. Make your CTA buttons and links the same color to help users distinguish between clickable and static text.

4. Create contrast

Create contrast between your foreground (text) and background colors. There are other ways to make your website modern than making your content illegible. You should aim for a contrast ratio of 4.5:1 per Web Content Accessibility Guidelines (WCAG) 2.0. For more ways to make your website accessible, check out their recommendations here.

5. Have a clear navigation

Make your navigation visible and clear. Users will land on your website from various sources—from a social media post to a search engine results page. A navigation that includes the most important pages on your website helps users orient themselves, eliminating confusion. Plus, a well designed navigation can prompt them to explore your website, increasing dwell time and potential to buy.

6. Make your contact information global

Keep your contact information visible at all times. This can be quickly achieved by placing your phone number, email, and address in either the header or footer. These sections of your website are global elements that should be located in their respective areas on every page. Users may want to contact you at anytime during their experience, so make that information easily discoverable.

7. Leverage the upper right corner

Websites serve a purpose. Your users are visiting your website to complete a task whether it’s contacting you, signing up, or logging into their account. Elements in the upper right corner make for easier targets compared to elements positioned in the middle of the screen. In addition, since it’s a common design pattern, your users will know where to look to find those functions.

8. Speed up your website

Your website has three seconds to load before users leave. Compressing your images is an easy way to increase the speed of your website. My favorite tool to compress images is ImageOptim. After optimizing images for SEO in Photoshop, I drag my photos into the tool and it compresses the images while keeping the metadata intact.

Aside from image optimization, Google PageSpeed Insights is a free online tool that identifies areas of your website that could be better optimized for speed. Just enter your website’s URL and a report will be generated for you.

9. Make your website mobile responsive

There is absolutely no reason for your website to not be mobile responsive. There are frameworks that are already mobile responsive, such as Bootstrap. Content management systems, such as WordPress, also have mobile responsiveness built into their free templates. With so many devices to access your website, make sure it looks good regardless of screen size.

10. Provide system feedback

Always let your users know what’s going on. Users perform various tasks on your website, such as submitting a contact form or filtering products. They don’t know whether or not your system is registering their actions unless you tell them. Show a progress bar, loading spinner, or change in button color to reassure users their input is being recorded. Providing instant system feedback instills trust in your users, especially first-time visitors.

11. Listen to your users

Finally, one sure-fire way to make a website easy to use is by giving your users what they want. Why spend time thinking of what would improve your website’s UX when you could ask those visiting your site themselves? Ask your users for their feedback to understand what isn’t making sense to them, where they are struggling with, and how you can improve their experience. Listening to users is at the core of user experience design, and should be the first source of information before starting a redesign project.

Implementing these tips can instantly improve your website’s UX, but you shouldn’t stop here. Investing in professional UX design services can benefit you more than a faster website or longer page time—it can save you resources, development costs, and headache in the long run. If you find your users still struggling after following the above tips, it may be time to reconsider your design strategy.

Troika Dashboard

Troika Dashboard Design

UX Design / UI Design / Mobile App

Troika Dashboard Design​

Troika Dashboard

Troika is a well-known brand experience agency in Los Angeles. In my role as designer, I provided UX/UI services to support their product Fandom Connect. With some guidance from the Troika team, I designed the admin dashboard as well as the mobile mockup.

Process

  • Requirements gathering
  • Sketches
  • Wireframes
  • Prototypes

Challenge

The challenge was to create a user-friendly dashboard their clients can easily understand and use. The dashboard was to take on both the Fandom Connect and Troika branding.

Process

As with all of my projects, I first sought to understand the product’s goal. The goal was to provide clients with brand programming and content during a sports game.

Design

From there, I designed the following pages:

  • Admin dashboard
  • Admin – layout uploader
  • Admin – carousel uploader
  • Admin – menu setting
  • Admin – social uploader
  • Admin – engage uploader
  • Homepage/landing page

Admin dashboard

One of the design requirements for this product was to have a preview panel on the right side of the screen. Any changes made to the homepage (consumer-facing page) in the dashboard would be reflected in real-time in this panel.

Admin carousel uploader

I made the center of this page a drag-and-drop area, allowing users to easily upload images. They can switch between media uploaders by selecting “Images” or “Video” on the left side of the main content area.

Image Carousel Uploader

Carousel Uploader List

Admin menu setting

Pairs of upward and downward arrows allow users to move a navigation item between positions.

Admin Menu UI

Mobile mockup

Below is an example of how the final homepage would appear on mobile.

Fandom Connect Mobile

Result

The result is a simple-to-use dashboard that matches the look and feel of Fandom Connect as well as Troika’s brand. If the scope extended beyond the deliverables, I’d be interested in testing the prototypes with users and collaborating with programmers to ensure the designs are feasible.

“Rachel helped us on a project that required UX/UI expertise. Even though it was a short period of time, she understood our need, the request we were asking for in our brief, and asked great questions that helped move the design process along! She also delivered rough drafts and final edits on our timetable. It was great working with her!” – Jaja Hsu, Associate Producer

MBA Portal Design

MBA Portal Design

UX Design / UI Design / Design System

MBA Portal Design

MBA Portal Design

Due to the nature of this work, designs are not shown below.

FCTI operates a network of multi-bank ATMs (MBAs) that provide cardholders of small banks and credit unions access to their accounts. On these ATMs, partners also have the option to run campaigns or display advertisements. Creating these campaigns, however, was a manual and time-consuming process. Seeking a way to automate the campaign creation process, they hired me as their first UX/UI Designer to design the end-to-end user experience of the MBA Portal.

Process

  • Requirements gathering
  • Information architecture
  • Sketches
  • Wireframes
  • Prototypes
  • Design system

Requirements gathering

After interviewing stakeholders and internal team members, the objective of the portal boiled down to two tasks: 1) Provide users a self-serve platform to submit their campaigns and 2) Allow FCTI to review campaign submissions. The portal was to be simple and straightforward enough for their wide range of users.

Requirements Gathering

A picture worth too many words

User research and internal interviews revealed graphics to be the biggest pain point for both personas. To address this, I designed several reminders in the Content step of the multi-page campaign creation flow. Placeholders are thumbnail versions of the actual graphic size and orientation, providing a visual cue to partners. Size dimensions are explicitly written beneath each label. As an extra layer of prevention, I suggested the system reject graphics that don’t meet the dimension requirements and trigger an error message to users if unqualified graphics are still uploaded.

Wireframe Examples

Scalable design

As part of the project, I supplied a style guide for this new product. Using the marketing website as a base, I extended beyond its colors and components to develop a scalable style guide for the MBA Portal.

Scalable Design System

Result

After several sessions of usability tests and design iterations later, I delivered high-fidelity mockups of the MBA Portal. FCTI regains the hours previously lost to submitting campaigns on behalf of partners. In addition, users are given more control over the campaign creation process and have more insight on when their campaigns will be reviewed and published. The result is increased operational efficiency, higher ratio of correct graphics being submitted, and more satisfied partners.

Portal Design Result

Contact Form Design

Contact Form Redesign

UX Design / Marketing Design / WordPress

Contact Form Redesign​

Contact Form Design

I led a responsive redesign of the contact form task flow for Animal Behavior College. A major source of their student enrollments comes from users filling out the contact form. I worked with stakeholders and programmers and used user data to design their contact form process to be responsive.

Process

  • Design review
  • Stakeholder interviews
  • Conversion rate optimization
  • Wireframes
  • Content writing

Background

The process of getting their information is split into two contact forms or screens.

The process begins with the first contact form. After users fill it out, they’re taken to another page with a second contact form. Any input on this page is optional. However, as an incentive for users to submit this second form, this page says it will check whether or not there is an externship location in their area.

If the zip code is valid, they’re taken to the second (and final) Thank You page. If the zip code is invalid, users are directed to an error page where they can try again.

Contact Form Flow Chart

Challenge

An agency had previously provided desktop and mobile mockups for essentially two templates: one for the homepage and one for a content page. Also included was their redesign of the first contact form. They didn’t include annotations, so the challenge was designing contact forms and Thank You pages that were in line with their design, but also met business goals.

Process

The first step was to take their design of the first contact form and improve on it based on stakeholder preference and usability. Their design had a couple of usability issues. First, the proximity between the radio buttons was too narrow. The form displayed radio button options on a single line. Not only does this decrease the tap target size of each option, but also the burden was then on the user to accurately select his desired option on his mobile device.

The second issue were the field names. While having field names within the field makes for a shorter form and cleaner look, it can become a frustrating experience for the user. When field names are within the field where placeholder text would be, they disappear upon selection of the field. This may lead users to forget the information they should enter and potentially leave the form altogether.

Working off of the agency’s mockup, I created wireframes for the:

  • First contact form
  • Second contact form
  • First Thank You page
  • Invalid zip code page

 

First contact form

Aside from displaying the radio buttons vertically and moving the field names above the fields, I also designed one field per line as opposed to having two fields on the same line. I did this to help make filling out the fields easier for users on mobile. I also changed “What program interests you most?” to “Which program interests you most” for grammatical purposes.

Contact Form Iterations

Second contact form and first Thank You page

The existing second contact form included some text I felt were unnecessary. For example, above the fields read: “Please fill in the fields below.” Another bit of unnecessary microcopy was the “Almost Done!” text after the Country field.

I removed these from my wire and instead wrote “Meanwhile, see if we have a location near you by telling us a little more about yourself” above the second form.

From past experience with this company, I knew the original microcopy was added to get users to fill out the form, so I reworded it and placed it outside of the form on top.

I also switched the red font color to the brand’s navy blue color because users might mistake the red text for an error message.

Previous First Thank You Page

Thank You Page Design

Second Thank You page

If users enter a valid zip code into the second form, they’re directed to this page. This one needed the most improvement because it was the final page in the taskflow and a great opportunity to improve the conversion rate.

Old Second Thank You Page

The existing second Thank You page read “Congratulations! We have locations that provide hands-on training for ABC students residing in zip code _____.” Then, in red again, “Please contact us at (800) 795-3294.”

After users get to this page, they receive a call from the company. To help prepare them for the conversation, stakeholders suggested creating a list of topics users should discuss with the Admissions Counselors. They had brainstormed other ideas, but nothing was ever set in place.

I looked at their list of ideas, selected the ones I felt would be best for conversions and provide value to users, and included my own ideas. For the second Thank You page, I:

  • Wrote new copy
  • Added a click-to-call phone number
  • Made a bullet point list of topics the user should discuss
  • Selected an image
  • Added a few testimonials
  • Added social media buttons
  • Included a carousel of student images

The result was a content-rich Thank You page designed to keep the user engaged and excited about his chosen course.

New Second Thank You Page

Invalid zip code page

If users enter an invalid zip code on the second contact form, they’re directed to this page. For this wire, I edited the copy to have a warmer, human-like voice. The existing error page read: “I am sorry the zip code you have entered is not valid or is currently not in our database. Please try again.” I changed that to “Unfortunately, we don’t have externship locations for students residing in _____.” I mentioned externship locations to remind the user why he had entered his zip code in the first place.

 

Review

From my wires, the graphic designer made mockups, which we presented for review. Stakeholders preferred to preserve the colors of the original forms (i.e. yellow top bar and red button). They also wanted to keep most of the original copy on the first Thank You page and invalid zip code error page.

The second Thank You page was completely approved. However, they requested a few more changes to our mockups.

After a few iterations, we had our final designs.

Design Iterations

In the beginning of this process, I had originally suggested having an inline error message on both contact forms. Rather than the user selecting the button and then seeing error messages for either missing fields or invalid data entries afterwards, I suggested having a tooltip display during the form filling process.

This would help users fill out or correct any fields on the spot, which may reduce the time it takes for them to fill out the form. Furthermore, this feature would eliminate the need for an invalid zip code error page.

I had presented a wireframe for this tooltip as well as a video demonstrating the behavior of the tooltip to the developer and stakeholder. While the idea was approved, it didn’t make it in the final design due to programming issues.

Result

With a contact form that is responsive on all devices, users have an easier time filling out the form, which increases the potential for more enrollments.

Contact Form Responsive Design

Ecommerce Interaction Design

Epiphone Website

Web Design / Mobile Responsive / Landing Page

Epiphone Website

Ecommerce Interaction Design

Epiphone is an American musical instrument manufacturer known for their acoustic and electric guitars. Their website was dated and due for a modern upgrade. For this ecommerce design, I focused on redesigning the ecommerce grid and product detail pages with consideration to mobile responsiveness and usability.

Process

  • Heuristic evaluation
  • Competitive analysis
  • Sketches
  • Wireframes
  • Prototypes

Filters, no fillers

An important feature of any ecommerce site is the ability to filter products to avoid decision fatigue. After reviewing Epiphone’s current products and conducting competitive analysis, I designed a filter for the ecommerce grid page. Filter options include the product type, brand, and price. Set to “Featured” products by default, the sort feature allows users to view the latest products or products in ascending or descending order of price.

Ecommerce Grid UI Design

Taking center stage

The product detail page gives each guitar the stage it demands. A bold hero sparks interest and a balance between words and imagery, modern layout, and smart use of trendy UI elements pull the user further down the page. Paragraphs accompanied with bulleted summaries aid with skimming and paginated reviews save vertical real estate.

Ecommerce Landing Page Design

Result

Modern and mobile responsive, this ecommerce design concept for Epiphone highlights the qualities of its products and makes it easier for users to find the perfect guitar for their musical needs.

How UX Can Amplify Your Digital Marketing Efforts

How UX Can Amplify Your Digital Marketing Efforts

How UX Can Amplify Your Digital Marketing Efforts

How UX Can Amplify Your Digital Marketing Efforts

Looking to boost sales? Are your digital marketing efforts not working? You may need to take a deep look at your product or service and optimize its user experience.

User experience refers to the overall experience your customer has during their interaction with your product or service. UX encompasses a person’s emotions, attitudes, and opinions about her experience using your website or app.

Web Designer vs. UX/UI Designer

Unlike a traditional web designer, a UX/UI designer identifies the problem and takes a user-centered approach to solve it. The UX design process includes: talking to customers, using research to inform decisions, testing and iterating designs, and ensuring business requirements are met and technical constraints are considered to produce a win-win solution for everyone.

What Does UX Design Have to Do With Marketing?

You might be asking, “What does UX design have to do with marketing?” It’s simple. The goal of UX design is to design products that make your customers happy. What makes them happy? Intuitive interfaces that help them accomplish their tasks. It also helps if the interface is easy on the eyes and maybe even delightful to use.

One way to think of UX is Yelp. Companies with a good Yelp rating often reflect positive user experience and, conversely, those with a bad Yelp rating reflect a negative one. No amount of marketing can turn those negative reviews into positive ones. Those customers have already had first-hand experience with a company’s offering. If that’s the case for you, it’s time to step back and understand how you can improve their experiences.

Why are your customers hesitant to purchase? What is preventing them from submitting a contact form? Getting to the root of the problem—why your customers are frustrated—will guide you to the solution. Perhaps you had too many competing CTAs on your landing page or your error messages weren’t specific enough. Listening to your customers and providing solutions to their problems set your business up for success. Designing a website, app, or product from a usability standpoint lets users know you care to address their pain points and goals and that your product or service can meet their needs.

UX Working With Marketing

Marketing is great at driving traffic to your website and conversion rate optimization (CRO) excels in closing those leads into sales, but both of these tactics end there. They don’t take into consideration what happens to users after they become customers. UX bridges this gap and delivers on what you’re promising in your marketing campaigns.

When you invest time improving the product or service you’re marketing, you’re giving a reason for your customers to talk positively about you. Given that people are 4 times more likely to buy when referred by friends, these word-of-mouth recommendations can cut your marketing spend and increase customer retention.

UX is an important part of your digital marketing strategy. Aside from creating an inherently marketable website or app, it can also positively impact the rest of your organization, including your customer service and engineering teams. Before spending another dollar on a paid ad or commercial, look internally at your product or service. It may be time for an update.