In case you missed it, last week we covered how to absolutely nail your website’s UX. This week we felt it would be equally important to explore user interface (UI) as the difference between the two can get confusing. However, when choosing a website provider it’s important to understand the difference between UX and UI and that it’s critical you have both when redesigning your advisor website.
What is User Experience (UX)?
At Twenty Over Ten, we like to think of UX as a honed in focus on the end-user’s overall experience. According to Hubspot, UX is an umbrella of sorts that covers a variety of work on your business website including ease of use, accessibility, and convenience. If your website visitors don’t find the information they’re seeking quickly they will write you off in a matter of minutes.
What is User Interface (UI)?
On the other hand we have UI, or the way a website is presented. Typically, a UI designer is responsible for more “cosmetic” website changes or updates. However, a UI designers job is much more involved then simply slapping a logo on your website and picking some stock photos.
Any visual element you see on a website — buttons, icons, color palettes, font types — these all fall under the domain of a UI designer. So, in UX design we focus on the user experience and in UI design we’re focusing on what the user sees.
How UX & UI Work Together
It’s obvious that both UI and UX are important pieces to the puzzle to create a 🔥 website but it’s also easy to see how the lines can become blurred between the two. UX without UI (and vice-versa) is just an ugly mess. However, when the two collide they help make your website thrive and give your visitors exactly what they’re looking for.
At Twenty Over Ten, we practice what we preach. That’s why our team is cross-trained and has a great deal of experience in both UI and UX to deliver our users with the best quality work.
The above example from Twenty Over Ten user, KG Advisors, illustrates a good blend of UX and UI in web design. From the video integration, the retirement check-up CTA to the FINRA BrokerCheck integration, our designers pulled out all the UX and UI stops when creating this beauty.
Although UX and UI designers work hand-in-hand the process usually begins with a UX designer first determining the different steps or scenarios a visitor may take on a website. First, they will typically spend time understanding your niche market and marketing personas. From there they’ll start prototyping and developing a sitemap and a wireframe for your website.
Once handed off to a UI designer, he or she will then build off of the sitemaps and wireframes. After reviewing brand guidelines, a UI designer will develop a look and feel that can be translated to web. They’ll use visual cues and patterns to signal to website visitors what to do and where to go.
UX vs. UI Example
Now that we understand the differences between UX and UI and how they work together you may be wondering how this would impact your advisor website. Let’s take the example goal of including a newsletter sign-up on your website. If you attended our webinar last month you know this should be a top-priority!
A UX designer would first start by designing out the user flows, or the steps that a user would take to sign up for your newsletter. They’ll likely ask themselves questions like “what steps will our site visitors follow and how will they know if they’ve signed up successfully?” He or she will also take into consideration the fields that should be included on the sign-up page and the proper placement for maximum engagement and sign-ups.
The user flow is then passed off to the UI designer. The UI designer will refine the interactions your site visitors will take by adding color and emphasis. This gives your site visitors the clues they need to successfully navigate to the newsletter sign-up and successfully sign-up.
The below example from Twenty Over Ten user, WealthKeel, is a great example of the above newsletter sign-up scenario. When placed properly on the page with limited required fields (UX) and using the right color choices (UI), WealthKeel’s site visitors are sure to sign-up for their newsletter!
Start Building Your Online Presence Today!
Work with Twenty Over Ten’s award winning design team to build a website your finally proud of. With automatic site archiving, blogging, an intuitive CMS, SSL certificates and more — we’ve got everything you need and then some.
