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.