Combining UX and UI to Create Converting Websites
A successful website that generates a high conversion rate (actions) from its users will always have a harmonious synergy between UX and UI, to create a smooth user path.
What is UX?
UX ‘User Experience’, is a human focused way of designing - it considers the user journey before anything else, to make a cohesive, natural flow for the user to follow.
UX encompasses factors such as the user’s perception of the brand, if they have any attitudes attached to the product or market, and how they are predicted to move through the site.
For example, a logical response to a website that requires a login is to have a ‘log in’ or ‘sign in’ popup upon entering the site. From there, a user can either log in, sign up, or recover their password. This image from UX Planet shows the typical user path.
Actions such as these are commonplace, but as the understanding of user paths grows, so does the potential of making actions clearer and even more simple.
Understanding UI
UI (User Interface), is similar to UX in that it is human centred design. The user interface considers the look and feel of the website experience, as well as how the user will interact with the site - what semiotic meaning can be pulled from colour, typography and layout? Will your user visit your site on a touchscreen device or PC?.
The more you know about your target demographic, the easier it is to design sites that make sense both navigationally and psychologically for the end user. UI comes down heavily to consumer behaviour, and any bias or previous experience they may have.
UX is the overall feel of the experience and path. UI is the actual interactivity, look and layout of the site.
Both must work hand in hand for a website to function at its best potential. Your user should be able to enter the website and follow a clear path to conversion.
Designing With Humans (and Goals) in Mind
Determine Your Business Goals
What are you bringing customers to your site to do? Join a mailing list, purchase a product, subscribe to a service or simply learn about your brand? You should also consider the value of a conversion on your site.
A one-off purchase might be worth $10, but a signed up customer with a personal login may come back multiple times and end up with a lifetime value of $500.
With your data researched, you may consider a sign up goal to be more valuable than a purchase goal, which in turn affects your entire user flow. It’s important to consider these data points before you begin nutting out the design and flow of your site.
Photo by Alvaro Reyes on Unsplash
Flow Outline Considering Entry Points
Before you even begin to think about the look of your site, you should create a Flow Outline, showing possible user routes and options available.
A Flow Outline is pretty much what it sounds like. Remember what a traffic funnel is? Well a Flow Outline is a clearly mapped out funnel. Consider the entry points for your site - (direct, social, organic, paid) and create a flow diagram for each, leading from entry point to conversion point. Eg: Someone looking directly for your site might be greeted with a sign in page straight away, and from there they can sign in, sign up or exit. Whereas someone coming from a Facebook targeted ad may be greeted with a landing page more specific to the ad they clicked on.
As UX Pin describe, outlining the steps upon entry will help you to develop the style and look of the website as you continue.
This is already considering the UX in your site. Your Flow Outline should take into account multiple pathways and options available to your user, whilst accounting for UI as well. The two are so intertwined it can become difficult to separate them sometimes!
Creating Your WireFlow For Optimum Conversions
Simplified Checkout Process by Michael Pons
A Wireflow is a modern term for web designers (created by NN Group), being a hybrid of a traditional WireFrame (sitemap) and a Flow Chart (actions taken).
A Wireflow is a much more detailed representation of how your user will get from A to B. Both UI and UX factors are strongly in play here - you may have already added colours, font choices and layout options according to which technology is being used to access the site, you have considered mobile optimised and tablet-friendly versions, you have thought about consumer bias in placements and how they want to interact with your site.
Keep in mind that the aim of your user journey is to keep them travelling through your sales funnel until they complete an action. With that in mind, map out your messaging appropriately as well. When is it relevant to show a Welcome message as opposed to a Welcome Back? Should you be suggesting additional items or pages to flow through to, or should you implement an ‘easy checkout’ option?
Combine UX, UI and Research For a Highly Converting Website
A successfully converting website does it research. The designer should know who they’re talking to and designing for at all times, the copywriter should be writing for the same person. For a consistent brand and a voice, take the time to create a Purpose Chart
The initial research you undertake will save you an immense amount of time on edits, redesigns and restructures. If we can give you any advice when creating a new business, it will be this: Do. Your. Premilimary. Research.
If you are thinking of creating a website or an app, and have an end user in mind, get in touch with our team today.
