Go back to all projects

Colorado DORA

UX Critique

DORA

Overview

The State of Colorado's DORA web-portal exists for people to apply for and renew existing licenses in several different divisions such as: Banking, Insurance, Real Estate, General Contract work, etc... This web-portal receives close to 200,000 online renewals annually and close to 50 different occupational categories. Over the last few years, the current state of the site has been receiving plenty of disapproval because the user's journey to find and pay for a license has become bloated and difficult to navigate.

Target Audience

DORA sees large amounts of traffic in several different waves year round as people renew existing licenses as well as sign up for new ones. With such a wide array of professions and people logging in across the entire state, there is no one segmented demographic to deem a target market. The best way to approach the question of who is visiting this site is everyone. Viewing the analytics of which professions have more traffic does help breakdown the top 5 highest renewed licenses annually though. The following are 5 personas or the 5 different people who log on to the DORA website to renew their licenses.

    Top 5 Average Annual License Renewals:

  • Accounting ~ 17,000
  • Architect/Engineer ~ 12,000
  • Barber/Cosmetologist ~33,500
  • Electrician ~15,500
  • Nursing ~37,000

Personas

Accountant
  • Name: Thomas Martin
  • Age: 39
  • Occupation: Corporate Accountant
  • Experience: 10 Years
  • Income: $67,000
  • Background: Thomas graduated from University of Oklahoma with a major in Account­ing and Finance. He considers himself to be a "techie" and enjoys reading daily articles on The Verge, Tech Crunch and Gizmodo. He's been happily married to his wife Patricia for 13 years, they have 2 children in elementary school.
  • Tech Background: As a tech-lover, Thomas enjoys purchasing the latest and greatest devices and toys. He is on a computer all day at work and uses Windows OS on his PC, an iPhone as a personal device and a "new retro" blackberry for work.
Electrician
  • Name: Mike Leonard
  • Age: 33
  • Occupation: Electrician (Self-employed)
  • Experience: 6 Years
  • Income: $51,000
  • Background: Mike Loves fixing things, always has. Growing up in Colorado, he tried out Colorado State University after high school only to last 1 semester before enrolling in a trade school and pursuit his passion for electrical work. He began doing contract work with a friend a few years ago but has since branched out on his own to get more work that fits his schedule. He is very outdoorsy and loves to camp and fish with his dog Jax.
  • Tech Background: Mike uses his iPhone 8 on a moderate basis but mainly as a basic text, call and email device. He will occasionally use it for gps directs to a job or to stream music when can. He does not own a personal computer and so this is his only means to connect to the Internet.
Medical Assistant
  • Name: Meredith Jones
  • Age: 64
  • Occupation: Clinical Medical Assistant
  • Experience: 31 Years
  • Income: $47,000
  • Background: Meredith graduated high school in Florida and worked as a waitress for 2 years before marrying Jerry and deciding to become a stay-at-home mother. They had twin daughters and a son. Meredith loved her time as a stay-at-home mother but started taking night classes once her children all reached high school to become a medical assistant.
  • Tech Background: Meredith has very little experience with technology. Her children are start­ing to get her into texting but with much hesitancy. Her and her husband own a home computer but she rarely uses it as she prefers to read and write or regularly volunteer at her church. Her husband and children help her out with anything technical.
Engineer
  • Name: Nathan Zimmerman
  • Age: 29
  • Occupation: Engineer
  • Experience: 5 Years
  • Income: $78,000
  • Background: Nathan attended the School of Mines in Golden and studied civil engineer­ing. He works for Louis Berger Group downtown and has a passion for their motto, "Solutions for a better world.' He's recently married and they just traveled to Croatia and Greece for their honeymoon. Nathan winds down with sci-fi books and video games but has a passion for anything out­doors.
  • Tech Background: While he is an avid explorer and outdoorsman, Nate enjoys staying up to date one what's going on in the tech world. He doesn't buy the newest de­vices always but is always curious what technological marvels are be un­veiled. He owns multiple devices like an iPhone, iPad and a work issues Dell laptop.
Hairstylist
  • Name: Nicole Vogts
  • Age: 22
  • Occupation: Hairstylist
  • Experience: 3 Years
  • Income: $32,000
  • Background: Nicole prides herself on her individuality and her ability to make it on her own. She started cutting her friends hair in high school and found a pas­sion for styling hair that reflects the personality of the person sporting it. She loves fashion but is thrifty as she does not like to wear brand names or tout mainstream trends, she sees herself as ahead of the fashion curve. She's single and living with 2 roommates in the Capitol Hill area.
  • Tech Background: While she enjoys staying connected although she has limited funds to afford a laptop right now. She is on a family plan with her roommates to make it more affordable but uses her iPhone as much as possible to stay up to date with friends and surf the web. She loves social media outlets such as twitter, pinterest and snapchat and downloadsnew apps as needed for the specific activities she's currently interested in.

Entry Navigation

With 2 links showing high on the page, they are in a great location with lots of easy visibility. The navigation bar location is also a great position as it's a natural spot for the eye to go after viewing the logo.

Step 1
Step 2

Renew a License

Still maintaining good aestetics by making the left nav simple with only 3 options. Nice easy to read table nearly centered on page. There is quite a bit of white space on the right, especially on widescreen monitors. Perhaps directly centering the table or expanding the width to 100% of that area is worth trying (making sure to add some margin from the left nav as well).

Disclaimers & Login

This is where the major pain points begin with testing and readability. The structure of the page in its current state is just floating. Thee easiest initial, low maintenance change to make is centering the entire site and adding adding a fixed height of the main content to push the footer down. It's compacted in the upper left corner and the vertical height is also cramped so the content runs together. Spread the content areas, add margins and padding consistent between left navigation and header, stretch horizontally close to 960px width.

Step 3
Step 3b

Optional Help Page

This section adds a nice touch of functionality and design. Easily readable and concise, good use of the accordian function.

Login Page

Gets the point across in a login page but isn't necessary to have it occupy it's own page. I think putting a login dropdown in the upper right hand corner would be a far more effective placement with more visibility and will reduce unnecessary clicks.

Step 4
Step 5

Welcome Page

Another bloated page. Thee warnings at the top can be more easily addressed by IE11 compatibility view or a redirect message like: "<--[if !IE]> please click here to download a more up to date browser."

The amount of different colors on this page creates an eye ache as well. 3 or 4 different blues, yellow navigation background, beige message background in bottom half, red warning message in middle, black and light blue header tags.

Organizing the links as lists might help the readability as well, there are too many interwoven in the plain sentence. Another option on this page would be to add icons or small images to represent each section/link. Most users aren􀇭t going to read most of this information anyways… any visual representations you can add will cut down on people􀇭s search time and create a better experience. The information you want to be read the most is at the bottom of the page, Try having it under the header to gain more exposure.

I would also consider either indenting the links on the left nav and/or adding bullet points if you don't want to create a more robust navigation. It still run together with the bolding and line break.

Renew Existing License

Is it possible to have this added as part of the table on the previous page? This seems like it should be summed up in 1 or 2 buttons and not have a while page dedicated to it. Add as many duplicate tables underneath for additional licences as well. Cut down the pages, cut down the clicks…

Step 6
Step 6b

Example

Featuring a prominent CTA on the left would be a great addition to help attract the user's eye.

Questionaire

Another example of wasting space. I feel like many of these questions could be on the same page (simple yes or no with no alternate comment answers) and just show as a list. Place the check boxed to the left and have the question fall inline like a quick traditional survey. Having an entire page dedicated to a one sentence question and then requiring them to scan to the bottom of the section and hit next double the time and click count when it could easily be streamlined.

Step 7
Step 7b

Example

Condensing the questionaire to one form instead for individually clicking through 10-15 questions will speed up the process and make for a happier user.

Review

I would create a button, text can be interpreted as a passive suggestion and buttons demand more of a call-to-action like traditional eCommerce sites. If your goal is to get them to print this screen, place it in 2 sections, similar location at top with more noticeability and at the bottom next to the "proceed to payment" button.

Step 8
Step 9

Pay Invoice

Again, the red outline helps a little but maybe change the whole background and/or center it above the header. Users are used to having content in the upper right so they look over it very easy. If it's your goal on this page to do that, make it glaringly visible.

Payment

This is the part of the process I have no issues with. If it􀇭s possible, making it a full 1-page checkout would help a bit but it's clear what you want them to do from this point. Big button options and breadcrumbs showing them at what step they're at.

Step 10