User Experience (UX) v. User Interface (UI) Design — Process & Trends

Battle of Designers — Which is more important?

There is nothing that makes me feel more satisfied in Product Design than a perfect balance of data-driven user experience (UX) and visually-stimulating user interface (UI) design. What a nerd, right?!

But if the two stepped into the ring, which they often do, who do you think would win the bout? While we hope for 18 rounds and a perfect blend of the two, at the end of the day, user experience outweighs visual design.

The User Experience Value Proposition

If not for the simple reason that if something is not functional, it doesn’t matter how pretty is, let’s take a look at the importance of User Experience Design and the trends we will continue to watch grow in 2019.

Digital Storytelling

User experience is storytelling. Remove the fonts, colors, and graphics, and find a way to guide the user through a journey. How should they feel when they land on a webpage? What do you want them to know? What action do you want them to take? It’s like a digital grocery store. We guide the users to the dairy section so that they pass the bread and cereal on their way. If you have an important message to express or an action for people to take, don’t let visual design prevent you from sticking to the basics.

UX Drives Business

User experience has been generally accepted as the key to a business’ online success. Amazon? Ebay? Google? Yaa-hoooOoo? These companies spend millions split testing the size and placement of buttons to maximize user experience and optimize their key funnels. User experience is what separates the good brands from the unicorn tech companies in e-commerce like AllBirds, MeUndies, Harry’s and Dollar Shave Club.

“Design is more than a feeling; it is a CEO-level priority for growth and long-term performance.” — McKinsey Design

The Rise of the UX Writer

User experience and online storytelling have become so integral to a company's marketing plan that brands are seeking “user experience writers” to use a data-driven approach to copywriting. The same way you A/B test online ads, brands hire user experience writers to ensure copy is on brand, while optimized for search engines and click-through rates. Don’t believe me? See for yourself.

The Beauty of Visual Design

Don’t be fooled though. I’m a creative guy and visual design is my forte, which may be why I’m so attracted to user experience — it’s unfamiliar. If you can strike a balance between visually-stimulating and data-driven design than you’re the bee's knees. If you can do some front-end development on top of that then you’re a unicorn. These skills are highly valuable in the digital frontier and you should push yourself out of your comfort zone to hone them.

“Good design goes to heaven; bad design goes everywhere.” — Mieke Gerritzen

José Aires @ Unsplash

Part II: The User Experience Design Process

Before beginning a project, and every moment throughout the project execution, you need to remind yourself of the primary goal for the project. If your goals don’t include the user taking an action, but rather embracing a feeling, then let the right side of your brain fire on all synapses. Get creative! However, if you defined your goals to generate more leads, increase time on site, or grow revenue, good UX Design is the answer for these goals.

  1. Define: The first step in user experience is to understand the problem you hope design will solve. In order to do this, I suggest surveying the stakeholders for the business, understanding the different users and their requirements.
  • User Personas: A representation of a type of customer.
  • User Stories: A natural example of a feature that persona may need.
  • Use Cases / User Flows: The path taken by the user to complete this task.
“Rule of thumb for UX: More options, more problems.” — Scott Belsky, Chief Product Officer

2. Research: The natural next step in a design workflow is the gather some inspiration. This is a critical step that should save you a lot of time. Good research can really stimulate your ideas.

  • Research your competitors
  • Learn about your industry
  • Get inspiration from competitors and other companies in similar industries
“Good artists copy, great artists steal” — Picasso (… and every person, ever)

Resources: Behance, Dribbble, Pinterest, Awwwards

3. Sketch: Once you’ve got clear objectives and your inspiration, it’s time to do some basic mockups. One option is never enough. Start by drawing some basic flows using pen & paper, then move to a prototyping software like Sketch or InVision. Generate a few ideas to test and validate, and get feedback from your stakeholders.

“Digital design is like painting, except the paint never dries.” — Neville Brody

4. Design: With the sketches complete and clear agreement on which user experience wireframes are liked by all stakeholders, it’s time to do full UX wireframes for the project. Use Sketch & Craft integration with Invision app to build a prototype for people to use. This gives developers the ability to implement this with code easily using Inspect.

“Design is not just what it looks like and feels like. Design is how it works.” — Steve Jobs

5. Test & Evaluate: Now that the product is in the wild, test and evaluate the success of the user experience using analytics tools like Google Analytics. Get customer feedback with forms so you can see the effectiveness of the product, and constantly improve the overall UX.

“Good design is like a refrigerator — when it works, no one notices, but when it doesn’t, it sure stinks.” — Irene Au

Thanks for reading! Let me know if you have any questions or feedback regarding user experience of visual design! I’d love to hear your thoughts.

This story is published in The Startup, Medium’s largest entrepreneurship publication followed by +411,714 people.

Subscribe to receive our top stories here.