Contact

About

Shopify Agency

Ready to elevate your ecommerce brand?Get in touch with us at&nbsp;<a href="mailto:info@underwaterpistol.com" rel="noopener noreferrer" style="color: rgb(255, 255, 255);">info@underwaterpistol.com</a>&nbsp;or call&nbsp;<a href="tel:+442034677614" rel="noopener noreferrer" style="color: rgb(255, 255, 255);">+44 203 467 7614</a>.

Shopify Plus

Work

Resources

Design

Development

Shopify Plus migration

Branding

Content creation

Loyalty

Subscription

Tech stack consultancy

Charlie Semmence

Too often, the terms ‘UX design’ and ‘UI design’ are used interchangeably, in part because… well, they sound pretty similar, but also because they are closely linked. Yet in spite of their similarities, it’s important to understand what sets the two apart, so you can use them more effectively to enhance your ecommerce experience. 
<h2>
 So, what are the differences between UX and UI design?
</h2>
 
<ul>
<li style="font-weight: 400;">UX refers to the User Experience. How does the user feel when they’re using the product, and is the path to purchase optimised? </li>
<li style="font-weight: 400;">UI refers to the User Interface Design. How does the interface look, and how does your branding play into that?</li>
</ul>
 To make it simpler still, consider this analogy: UX Design is the architect, and UI Design is the interior design – always evolving, always progressing, but the foundations remain the same. 
<img src="https://cdn.shopify.com/s/files/1/1472/1782/files/User_Flow_1_600x600.png?v=1648565252" alt="UX vs UI design" style="display: block; margin-left: auto; margin-right: auto;">
UX is primarily problem solving. It’s understanding the behaviours of your users, and knowing their needs, wants, and frustrations when exploring your store. Meanwhile, UI is primarily visual design. It’s aligning your website with your branding, ensuring accessibility standards are met, and making your website stand out from the crowd.
 One phrase that’s paramount to UX is: “If you’re not doing research, you’re not doing UX”. Research is at the forefront of UX; it’s speaking directly with the users, testing, and studying the industry. 
 UX = critical thinking UI = creative thinking
 You need both of them to build a store that’s easy, efficient and enjoyable to use.
<h2>
  UX vs UI design: which one is more important?
</h2>
 Make no mistake; both UX and UI design are of equal importance. They work in synergy to amplify your ecommerce store and elevate conversions. 
If you offer a bad user experience, there’s a high chance your users won’t spend much time browsing your website or fulfilling the correct actions (such as a sale). Similarly, if you have an unappealing user interface, there’s also a strong possibility that users won’t buy into your branding or want to stay on your website. 
For this reason, both UX and UI are crucial for a strong, competitive product. The industry’s digital disruptors invest in each area to build stores that keep consumers engaged. 
 
<h2>If UX and UI design are so different, why do people combine them?</h2>
 It’s true that some UX designers are also UI designers – and vice versa. This is partly because they are still relatively new fields, and partly because many enjoy the fusion of creative and critical thinking. Some may be more advanced in UI and others may be more advanced in UX, but generally speaking, UX/UI designers have a passion for both. They think critically, and design creatively. They want to understand the user, understand the problem they’re facing, and find a solution that accelerates sales. 
<h2>
 What is involved in UX Design at UWP?
</h2>
<img src="https://cdn.shopify.com/s/files/1/1472/1782/files/UX_DESIGN_600x600.png?v=1648565560" alt="UX design" style="display: block; margin-left: auto; margin-right: auto;">
This research-heavy phase sees your UX designer delve deep into data to uncover a user experience that works uniquely for your brand. Stages involved include: 
 
<h3>1) Quantitative &amp; Qualitative research</h3>
 
Quantitative research is statistical-focused; research that can be displayed in charts and compared. Think surveys, online polls, questionnaires, heat maps. The results can be instant and easy to collect and understand. 
Meanwhile, qualitative research is research that can’t be compared, such as one-to-one interviews, focus groups, process of observation, and ethnographic research.
Both research methods are exceptionally important in having a well-rounded overview of customer pain points. These help determine the customer goals, needs, and wants when visiting your website. 
 
<h3>2) Information Architecture</h3>
 
Information Architecture, otherwise known as AI, is the identification and definition of your site content and functionality, which may be shown in a spreadsheet or diagram. Information Architecture informs the requirements needed for the Wireframe in order to deliver a store design that feels seamless and intuitive to consumers. 
 
<h3>3) User Flows / Flow Diagrams</h3>
<img src="https://cdn.shopify.com/s/files/1/1472/1782/files/User_Flow_600x600.png?v=1648565474" alt="User flow">
A User Flow diagram shows the many ways a user may navigate your website, so any dead ends or overextended journeys can be identified. Your UX designer should explore your existing user flow and streamline it to ensure it’s as smooth as possible or, if you’re a new brand, they will create an optimised flow for you from scratch. This allows your brand to harness the most appropriate navigation and page elements. 
 
<h3>4) User Journeys</h3>
 
While a User Flow diagram looks at the journeys within your store, the User Journeys step reviews the entire environment from which a user can find your brand and product. For example, a journey might see them travelling from social media to a product page, or from a PPC ad within Google search results to your homepage. These journeys are analysed to develop a deep understanding of consumers’ awareness of your product, and the various entry points that may need to be optimised. 
 
<h3>5) Wireframing</h3>
 
This is where your UX designer puts pen to paper and starts visualising. Drawing on the rich research they have gathered and their own understanding of best practices, they will ideate the layout structure, navigation, margins, and page elements. Wireframing is an integral part of both the UX and the UI design process, as it gives you the chance to focus on the overall structure and bring all the page elements together. 
 
<h3>6) Development Briefing</h3>
 
As your wireframe is finalised, your team of developers should be looped into the project, so they know what will be required of them when the store is built. They can also make recommendations that will further enhance the finished layout, while ensuring your brand’s goals are at the forefront of every decision that’s made. 
<h2>
 What is involved in UI Design at UWP?
</h2>
<img src="https://cdn.shopify.com/s/files/1/1472/1782/files/UI_Design_600x600.png?v=1648565625" alt="UI design" style="display: block; margin-left: auto; margin-right: auto;">
While your UX research is being carried out and new wireframes are developed, your UI designer will get to work on creating an eye-catching look and feel. The goal here is to produce a design that reflects your brand values and messaging, while making sure that any conversion-driving UX elements tie seamlessly into the final store. The steps include:
 
<h3>1) Design Exploration</h3>
 Here is where your UI designer explores the more general look and feel of the designs. They will consolidate competitor research, mood boards, brand goals and values, and collate them together with best practice UI techniques to imagine what’s possible. 
 
<h3>2) Design Direction</h3>
 Following on from the Design Exploration, your designer will begin to finalise the design routes; this is where the overall structure of your store begins to take shape. Everything from navigation styles to call-to-action buttons is covered here. 
 
<h3>3) Typography</h3>
 
<img src="https://cdn.shopify.com/s/files/1/1472/1782/files/UI_600x600.png?v=1648568694" alt="UI design " style="display: block; margin-left: auto; margin-right: auto;">
 Typography is extremely important in user interface design. It allows your brand to establish a strong visual hierarchy, provides a graphic balance to the website, and sets the product's overall tone. At UWP, we also ensure all type styles, sizes, and weights are aligned with accessibility standards. 
 
<h3>4) Colour Palette</h3>
 Your brand’s colour palette goes hand-in-hand with typography. Even if you already have a strong brand palette, a UI designer will take it one step further by using the colours strategically across your store. Tactical placement of varying shades can sway thinking, amplify the copywriting, and set a balance to the design. 
 
<h3>5) Imagery</h3>
 They say a picture is worth a thousand words, but in user interface design, they’re worth millions. It goes without saying that imagery is very powerful, and how you use it in your store is crucial to success. Your UI designer can ensure that it’s utilised for maximum impact, so that it tells a story, increases conversions, and ties in flawlessly with other elements, such as your typography and colour palette.
 
<h3>6) Prototyping</h3>
 Here your UI designer takes the architecture and begins to fill it with beautiful furniture. They turn the wireframes into fully functional prototypes of your new website. At UWP, we take a mobile-first approach to all of our prototypes so all designs can be built out with no restrictions – no matter the device your consumers are using 
 
<h3>7) Interaction</h3>
 This is the stage where we explore rollovers, hover states, micro-animations, and more. Think of these as your home accessories; the final touches that make all the difference to the final look and feel. 
 
<h3>8) Development Handover</h3>
 Just as it’s crucial for your development team to be looped in during the UX process, your UI design must also be handed over so those stunning visuals can be brought to life. Designers and developers must work in tandem to make sure every detail is user-friendly and, well, possible. At UWP, we have all capabilities in-house, meaning there’s continuous communication and a feedback loop that ensures a frictionless process for your brand. 
<h2>
 In conclusion
</h2>
 As you can see, UX and UI design are two very different disciplines, but one without the other can lead to less-than-perfect ecommerce results. By harnessing both services, you can supercharge your success metrics and create a store that customers will want to keep coming back to time and time again. 
 Find out how <a href="https://www.underwaterpistol.com/" target="_blank" rel="noopener noreferrer">Underwaterpistol</a> can tie your <a href="https://www.underwaterpistol.com/pages/ecommerce-design-build">UX, UI and development</a> together for a stress-free approach to building your store; one that’s driven by data and guaranteed to boost sales.  
<meta charset="utf-8">
 And don't forget to check out our free ad creative guide. We’ve packed it full with creative advice from our Art Director, Francesca Boyd, our Design Lead, Sara Azmy, and our Copywriter, Zara Kenyon. We'll reveal the cost-efficient tricks and tactics that elevate your brand across every platform, so you can scale up your ROI and ROAS to achieve your best year yet. <a href="https://www.underwaterpistol.com/pages/creative-content-ebook" target="_blank" rel="noopener noreferrer">Download your copy now!</a>
 
<div style="text-align: start;"><a href="https://www.underwaterpistol.com/pages/creative-content-ebook" target="_blank" rel="noopener noreferrer"><img src="https://cdn.shopify.com/s/files/1/1472/1782/files/ebook-spreads-design_f2939621-aaec-41d3-a9cb-72669663599f_600x600.png?v=1637683954" alt="" style="float: none; display: block; margin-left: auto; margin-right: auto;"></a></div>

UX vs. UI Design: What’s the difference?