UX Design Approach For New or Existing Websites

ui design for a web site

When thinking of designing from scratch or re-designing an existing website, there are a number of important steps and stages that take place. This post will address those steps below.

Mission statement

is what your website offers to its users of and how they will benefit from it. It is important to have a clear mission statement so that you as the owner know what you’re offering your users and you don’t stray from the objective.

Conduct Interviews

Conversing with stakeholders implies that you want to be certain that everyone involved with the website has the same goal in mind. A meeting with all involved voicing opinions and jotting down needs will help to gather the information needed to see that all involved have had there say and can sign-off on a final agreement.

Personas

Personas are graphical representations that allow you to understand who you are designing for. They provide representation of your key audience segments for reference. They help to focus decisions surrounding site components by adding a layer of realism to the conversation. More information on personas found here: https://www.usability.gov/how-to-and-tools/methods/personas.html

User Flows

User Flows are a series of steps a user takes to achieve a meaningful goal (see figure 1). It includes all the pages and interactions on the website taken, to reach that goal. They aid in quickening the rate of iterations and improve communication for all team members. Most importantly, they help guide users through the site towards a goal you want them to take without getting lost along the way.

user flow diagram

Figure 1 example of an e-commerce transaction user flow.

Analytics

Website traffic statistics are crucial in detecting the health of your website and what areas can be improved. Tools like Google Analytics (free) track the traffic on a website and provide insight on how people are using or not using your site. By viewing metrics like page entry, page exit, and how far into a site a user advances you can detect pain points in a user journey to fulfill a goal. By fixing the mistakes on your site you improve the overall usefulness and success of your website. And who doesn’t want that? More information can be found here: https://analytics.google.com/analytics/web/#/report-home

Content Inventory can be used at the beginning of a Web site redesign process. They indicate what pages already exist on a website.

Sitemap

Not to be confused with the sitemap that is linked to in a footer and used by search bots for indexing a website for page links. The sitemaps goal (figure 2) is to convey a sites structure and hierarchy. Sitemaps allow the visualization of how different page types are distributed and linked together throughout a site or application. They can also indicate how a series of nodes would indicate a user path to perform a task. If not included, you can miss gaps where pages are disassociated with the existing website. More information can be found here: https://www.viget.com/articles/ux-101-the-site-map/

e-commerce site map

Figure 2 an example of sitemap.

Wire Frames

Wire Frames are low-fi drawings or simplified outlines and are a foundation of a project layout that aids in creating the design of a website. They allow for quick additions and fixes to existing site structure. They can be used to simulate how a user journey would interact with various elements within the sites structure.

wireframe of a website

Figure 3 represents an example of a wireframe.

Mock-Ups

Mock-ups are like the skin of the website. Mock-ups are strictly visual. This is the documentation where you solidify your visual decisions, experiment with variations, and (optionally) create pixel-perfect drafts. Their intended use is to be handed off to front-end coder to create an html template that can be used by a developer for functional application (angular, php etc.) coding to be applied.

Build on development environment using the design mock-ups a front-end developer will create a template that can be used to create a functional web page that is used throughout the site build. Create as many template pages needed to accommodate the different type of output pages required for the application.

Work out bugs with the newly developed pages and confirm accessibility support and validate the template pages in a validator. The website shouldn’t launch until all compliance errors are remediated.

User Testing

Setup a User testing program in order to find out how the user will be able to use the website. The test should consist of 10 to 15 questions. the user will follow these questions as they go through the application. Questions should request an action/task from a user who would then provide feedback based on the outcome.

[arve url="https://vimeo.com/168975395" align="left" parameters="start=2" /]  

Test group of 5 people based on the personas find 5 people that will qualify as a user for the website/application. The should sign a waiver and there should be a test person present to help with any issues and to assure that the questions are answered accordingly.

Compile Data

Compile data – fix – test again. After the test results have been compiled, completed and studied, the results should provide an overview of what might be issues with the website. It will provide insight in any blockages or bottlenecks that occur. They need to be rectified before the site can be moved to production.

Move to Production

Move to production- iterate – check analytics – make changes phase 2 launch – continue. Now that all issues are resolved, and the site is in production, the site needs to be monitored for effectiveness. Analytics should be in place and used to find out how the site is being used. Another test group should be acquired for another round of testing. Use the test results to fix issues and reiterate again 3-6 months down the road.


Solving a web design/App usability issue

What is User Experience?

person using website on a tablet

It is the satisfaction someone gets from using a product, more specifically a website or app for our purposes.

Do you have a current website that is in need of an update? Take a look at it and try to find out how you can make it better for your users. Put yourself into there position and try to see if improvements can be made. Some of the questions you can ask yourself are:

  • how easy is the site to use/navigate?
  • can you find information that is required?
  • did you encounter any problems using the website?
  • would you use the website again?
  • any recommendations on how to improve the user experience?

Information Architecture:

the overall organization of navigation and content on a website or user iinterface. It is a logical pattern of elements eg) Nav, breadcrumb, sidebar menu, footer menu

Interaction Design:

The overall experience moving through a series of actions/tasks on a website. eg) A user completes a series of tasks of inputting information into a form which updates a database. The amount of steps it takes before a user completes a “call to action” such as, signing up for a newsletter or buying an item from your website.

Separating Visual Design:

The overall look and feel of the website including elements pictures, colors, textures etc. Of all ofthese elements are used to complete the design of the UI and how it can affect the user experience. eg) a webpage that has poor contrast for readability like green text on a black background. Tools like WebAim can help with testing contrast.

Testing the Ui:

Find a group of users that fit your target market. Information from the group will provide an indepth view from UI/UX. Testing is ongoing and iterative. Watch them as they go through the UI and record any issues, questions or concerns they have regarding the interface. Ask questions specific to the goals that you want your app to accomplish. This will help you when designing and save you from having to fix and redo the design.

[arve url="https://vimeo.com/168975395" align="left" parameters="start=2" /]  

Gather metrics on your current website/app

Tools for gathering metrics include PIWIK, KISS Metrics, Google analytics. It is free and can provide a multitude of information like where are your users coming from. What entry pages. How long are they staying for? How far are they moving into the site? What is the bounce rate? What is the browser and version. What OS, device type and screen resolution?

All of this information is valuable and should be used when improving the UI for your design.

Remember, it’s not about you, its about your users.

2019 Website Wishlist

wishlist with pen

With the new year in full swing many of you may have made plans to make updates to your websites or are in the process of assessing what improvements can be made. After viewing user statistics, having a user review session and discussing the the website needs with your team you have decided what can be done to make your website as efficient for users as possible.

I have been going through my own wish list and with the constantly changing technologies on the web it is not always easy to stay up to date. I make it a habit of reading and learning on a daily basis so that I am in the know. The following are upgrade suggestions myself and co-workers have mulled over.

Bootstrap4/Flexbox with LESS

With a good many sites now powered by the bootstrap/flexbox framework it makes sense to incorporate technologies that are widely used and integrated into the web. Bootstrap allows for quick building and maintenance of sites as well as flexbox integrates responsive features to allow your site to be viewed in a wide array of devices and resolutions.

SVG

Most modern browsers now support SVG, making it easier to implement in your designs. They are scalable, which makes them appropriate for responsive design. They are smaller in size up to 5 times compared to a png which reduces page weight and improves performance. Since they are not raster files they can be modified with css and javascript.

Retina Displays

This hasn’t been fully addressed on our websites and we need to be certain that any graphics used can take advantage of high resolutions displays. SVG will help with this but PNG, Jpgs need to be addressed to take full advantage of new devices.

Chat Bot help desks

Although not entirely in the breadth of services offered on the company website, chatbots provide real-time customer engagement.They are relatively easy to install, run 24 hours and are an inexpensive way to provide customer support.

MVP Minimal Viable Product

Is one component of lean software delivery and is better referred to as ‘continuous delivery’. By releasing any new features and functionality as soon as they are ready to realise their value, you create a better experience for end users, more revenue for the business, or both.

HTML 5.3 Payment Request API

The current 3rd party payment system being utilised at my current job is outdated, has a poor UX/UI experience and too many screens to step through. Using an HTML 5 could make payment transactions far easier and reduces risks of user mistakes or unscrupulous hijack attempts. The new feature Content Security Policy protects users and incorporated accessibility standards is more inclusive.

These are just some of the newer technologies I would like to see implemented with my current jobs website. Sure some of them have been around but it is not always easy introducing changes to legacy systems, nor is it easy to convince op level managers that changes are required. However, if you stay up to date on the latest and greatest it’s always best to implement updates on a regular basis.

Website questions to ask a client in a discovery session

webdesign meeting

So you’ve just landed a client that needs a new website re-design. Depending on what they already have in place, you probably are going to need a discovery session with them in order to understand what it is they’re going to need to meet their business needs. These sessions can be very in depth requiring vast amounts of wireframes, mock-ups, user surveys etc. Unfortunately not all clients have big budgets and can afford to take all these aspects of production into consideration. I think they are all important in the design and maintenance of a web product but lets face a lot of small businesses only have $1500 for their website and that is not enough to cover the breadth of design and development specificatiosn previously mentioned.

Below I have compiled a short list of questions you can ask the client in order to identify the needs and requirements. If timelines are tight you can email them the list and ask them to fill out as much as possible. Let them know that the more information they give, the better chance of launching a succcessful product will occur.

Company-related questions

  1. Do you currently have a website? What is the URL?
  2. Describe the products/services you sell.
  3. Who are your main competitors? How do you differ?
  4. What are your top 3 frustrations with your current website?
  5. What do you like most about your current website?
  6. What do your current competitors website have that you aspire to?
  7. Age range of your target client base?

Project-related questions

  1. Technical skill level of your client base. Have a scale ranging from zero to ten with zero being the least technologically skilled and ten being the best.
  2. Will your visitors require any special needs? Mobile version of site, multiple language support, larger type for easier reading, etc.)
  3. Imagine your website in 5 years from now. Complete the sentence: I know my website works because…
  4. Name 3 things that are most important about the design of your new website.
  5. Name 3 things that is least important in the design of your new website.
  6. Do you have any color preferences, existing brand colors, and/or colors you do/not wish to include?
  7. What are some existing websites that appeal to you? Provide links if possible.
  8. Deadline, timing or exact date of completion for your website?
  9. Do you have a budget you are trying to meet?

Additional questions

  1. Do you need to be able to update the website on your own? (ie: CMS)
  2. Will this be an e-commerce website? Will you be selling any products or taking payments on your website?
  3. Do you need a copywriter? If you are using existing copy on your current website, will it need to be modified in any way?
  4. Is your logo and other imagery web ready?
  5. Do you have all images that you would like to be included in your website or would you like the designer to use imagery where appropriate?
  6. How will you be updating the site in the future (if they are not using a CMS)?
  7. Will you be needing an additional SEO help (registering with search engines, adding businesses to Google Business Center, Analytic setup, etc.)?
  8. Do you already have a domain and host setup for your new website? If so, do you have the FTP and host log in information accessible?
  9. Any specific features you would like included? Log in ability, calendars, forums, blog, subscription services (RSS, email or newsletters)?

So as you can see this list of questions should help get a website project started and moving along. Nothing here is written in stone and every client will have different needs. But it helps to get a core set of questions in place.

Handy CSS and code snippets to use in your development

Handy code snippets for front-end development

CODE SNIPPETS:

HIDE LINK FOR VISUAL IMPAIRED OFF SCREEN

[php]<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<style>
.hidden {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
</style>
</head>
<body>
<div class="hidden"><p><a href="http://www.google.com">For the visually impaired, please click this link to launch the search tool</a></p></div>
</body>
</html>
[/php]

CENTER DIV

.centerContent{
margin: 0 auto;
display:flex;
justify-content: center;
}
*************ADD EXTERNAL LINK ICON****************
[php]<a href="">
<sup><abbrv title="opens in new window" class="smaller">
<span class="icon-share small">
<<pseudo:before>></<pseudo:before>>
</span>
</abbr>
</sup>
</a>
[/php]

TABLE list

[php]<ul>
<li>foo<br>foo</li>
<li>barbar</li>
<li>baz</li>
</ul>

ul {
width: 100%;
display: table;
table-layout: fixed; /* optional, for equal spacing */
border-collapse: collapse;
}
li {
display: table-cell;
text-align: center;
border: 1px solid pink;
vertical-align: middle;
}
[/php]

JQUERY Word Swap

[php]//$("#sort label").text($("#sort label").text().replace("Search:", "Filter:"));//replace the default word ‘Search’ with filter

function replaceNodeText() {
if (this.nodeType === 3) {
this.nodeValue = this.nodeValue.replace(replaceNodeText.find,
replaceNodeText.replace);
} else {
$(this).contents().each(replaceNodeText);
}
}
replaceNodeText.find = "Search";
replaceNodeText.replace = "Filter";
$("#sort_filter").contents().each(replaceNodeText);

<h3>center content in div:</h3>
.box{
display: flex;
flex-direction: column;
align-items: center;
}[/php]

RESPONSIVE TEXT CSS

[php]body {
font-size: calc(.7vw + 14px);
line-height: 1.5;
font-family: ‘Source Serif Pro’, serif;
font-style: normal;
font-weight: 400;
}

* {
box-sizing: border-box;
}

.content{
font-size:100%;
}
.wrapper {
margin: 0 auto;
padding: 2em 1em;
max-width: 45em;
}

h1 {
font-size: calc(4em – 1rem);
line-height: 1;
margin-bottom: 2rem;
}

p {
margin: 0;
margin-bottom: 1em;
}

p.pullquote {
font-size: 1.3em;
margin-bottom: 1em;
padding-left: 1.5em;
border-width: 0px 0px 0px 3px;
border-style: solid;
font-weight: 700;
margin-left: -1.5em;
}

.content .content{
font-size:66%;
width:66%;
background:yellow;
padding:1em;
}
[/php]

2 elements on the same line

[php]<div class="wrapSame">
<div class="memberName"><input name="member_name" label="member name" value="member name" title="member name" size="25"></textarea></div>
<div class="sameLine"><input id="searchBox" size="25"><input type="image" src="/site-resources/resource-files/img/magnify-22w.png" onsubmit="submit-form();" /></div>
</div>

.sameLine {
padding-right:40px;
display: inline;
float:right;
vertical-align:top;
}
.sameLinetext {
padding-right:40px;
display: inline;
float:right;
width:80%;
vertical-align:top;
}
.wrapSame{
display:block;
margin-bottom:20px;
clear:both;
}
[/php]

Have Two boxes side by side

[php].wrapCompany{
width:100%;
border-bottom:0px solid #000;
overflow: hidden; /* add this to contain floated children */
margin-bottom:60px;
}
.boxList{
width:45%;
float:left;
margin-left:2%;

}
.boxList2{
margin:0 auto;
width:45%;
float:left;
}[/php]

Alternate Table ROW background colour css3 Zebra Stripes

[php]
.profileTable{
width:100%;
border-collapse:collapse;
}
.profileTable td{
padding:7px; border:#4e95f4 1px solid;
}
/* provide some minimal visual accomodation for IE8 and below */
.profileTable tr{
background: #b8d1f3;
}
/* Define the background color for all the ODD background rows */
.profileTable tr:nth-child(odd){
background: #b8d1f3;
font-weight:600;
}
/* Define the background color for all the EVEN background rows */
.profileTable tr:nth-child(even){
background: #dae5f4;
}
[/php]

Hide h2 text from render

[php] nav header {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
padding:0 !important;
border:0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}[/php]

Prevent Googlebot from indexing web service pages:

[php]User-agent: googlebot
Disallow: /Office/LocationDetails.aspx
Disallow: /office/default.aspx
Disallow: /Electronics/Communitylist.aspx
Disallow: /electronics/locationdetails.aspx
Disallow: /electronics/Communitydetails.aspx
Disallow: /electronics/communitydetails.aspx
[/php]

Styling hyperlinks in a paragraph contained within a div with a class of sfContentBlock

[php].sfContentBlock p a, .sfContentBlock p a:link{
text-decoration:underline;
color:#0000ff;
}
.sfContentBlock p a:visited,.sfContentBlock p a:hover, .sfContentBlock p a:active{
text-decoration:none;
}
[/php]

Tool Tip with CSS used on Page Portal

[php]
a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;}
a.tooltip span {
z-index:10;display:none; padding:14px 20px;
margin-top:-30px; margin-left:28px;
width:300px; line-height:16px;
}
a.tooltip:hover span{
display:inline; position:absolute; color:#111;
border:1px solid #DCA; background:#fffAF0;}
.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}

<h3>CSS3 extras</h3>
a.tooltip span
{
border-radius:4px;
box-shadow: 5px 5px 8px #CCC;
}
HTML:
<a href="#" title="tool tip" class="tooltip">skills
<span> <img alt="" src="https://crmportalqa.ola.org/images/default-source/default-album/callout.gif" class="callout" />
*Hint These could be academic, volunteer or work done in your community and at home.</span> </a>
[/php]

CSS Button used on Page Portal

[php].appButton {
background-color:#74ad5a;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border:3px solid #3b6e22;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Trebuchet MS;
font-size:17px;
padding:10px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #92b879;
}
.appButton:hover {
background-color:#68a54b;
}
.appButton:active {
position:relative;
top:1px;
}
HTML:
<p><a href="/portal-secure-pages/Application" class="appButton">Start Your Application</a></p>
[/php]

No Page Cache

Put in head tags:
[php]<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
[/php]

Customizing the WordPress theme ‘Studio Pro’: a few tricks to get you up and running

coding on a laptop
Customizing a wordpress child theme can be challenging involving coding and design expertise makes it much easier.
Not every designer has the coding expertise required to take a child-theme and make the required changes to apply all branding design and functionality to create a website that is going to meet your objective needs.

Add widgets and sort widgets on front-page.php

Remove:

[php]<?php else :
genesis_widget_area(
"front-page-$i", array(
‘before’ =>
sprintf( ‘<div class="front-page-%s widget-area">%s’, $i, 3
!== $i ? ‘<div class="wrap">’ : ” ),/*—SW WIDGETS GO HERE—-*/
‘after’ =>

sprintf( ‘</div>%s’, 3 !== $i ? ‘</div>’ : ” ),
) );
endif;
}
}[/php]

And replace with:

[php]<?php
// PORTFOLIO WIDGET
genesis_widget_area( "front-page-3", array(
‘before’ => ‘<div class="front-page-3
widget-area">’,
‘after’ => ‘</div>’,
) );
genesis_widget_area( "front-page-2", array(
‘before’ => ‘<div class="front-page-2
widget-area"><div class="wrap">’,
‘after’ => ‘</div></div>’,
) );
genesis_widget_area( "front-page-4", array(
‘before’ => ‘<div class="front-page-4

widget-area"><div class="wrap">’,
‘after’ => ‘</div></div>’,
) );
genesis_widget_area( "front-page-5", array(
‘before’ => ‘<div class="front-page-5
widget-area"><div class="wrap">’,
‘after’ => ‘</div></div>’,
) );
genesis_widget_area( "front-page-6", array(
‘before’ => ‘<div class="front-page-6
widget-area"><div class="wrap">’,
‘after’ => ‘</div></div>’,
) );
}[/php]

You can then swap the widgets around

[php]genesis_widget_area( "front-page-6", array(
‘before’ => ‘<div class="front-page-6
widget-area"><div class="wrap">’,
‘after’ => ‘</div></div>’,
) );[/php]

Contact Us
Change the map location under Dashboard>Settings>Google Maps