Jeff Kiesel to lead User Interface and User Experience Refresh

jkJeff Kiesel started a couple of weeks ago to lead efforts improving the User Interface and User Experience for both participants and race directors. Jeff worked with us part time a few years ago, and we are lucky he responded to our call for a new UI/UX Developer. Bob has worked with Jeff at two other companies in the past, and can attest to Jeff’s design and technical talent and his caring for the user experience.

We are going to flip back and forth between the UI participants see and the UI that Race Directors and Timers see. The improvements will be incremental in nature, the the goal of reducing clutter and making user’s lives simpler. We will be making small improvements and releasing them quickly so we can get feedback on our directions.

Race Website Improvements

Our first set of improvements that you will see are for Race Websites. In fact, we released the start of one set of design changes with the font on the Menu Bar. We are moving away from the Sanchez font towards sans-serif fonts to clean up the UI and make it simpler to look at. The old is on the right and the new is on the left.

Screen Shot 2017-04-18 at 8.16.26 AM

We also plan on deemphasizing the RunSignUp brand seen in race websites, and the gain some real estate to emphasize the race. We are going to offer a couple of options soon for the header. The default will place the top menu choices for Profile, My Races, Help and LogOut in the upper right corner something like this:

header-micro-1.png

We will also offer an option to keep it at the top, but greatly reduce the size:

header-mini.png

We will also be coming out with a second template option that will have a full-width image rather than the Facebook-like 1200 pixel width image.

template2-micro-header.png

That will also have a new mobile look with the image overing the whole page on initial load:

template2-mobile

Lots more changes coming like improved table layouts, simplified long pages in the race director dashboard like Customer Questions or Add-Ons. As well as some surprises as we start to roll out the new RD Scoring and Promotion Dashboards.

Expanded HTML Support in EMails and Custom Sections

We have added a number of HTML tags, attributes and styles to custom sections and emails. We limit the use of HTML tags in the HTML Tag Editor for security and consistency of the look and feel of RunSignUp.

The largest change we have made is on emails, where we now allow images in emails. The images must be stored separately on another website and be https. For example, the HTML would be something like this:
Screen Shot 2017-04-17 at 3.35.58 PM.png

To generate an image of the marines on the beach carrying the flag in the email like this:
Screen Shot 2017-04-17 at 3.32.48 PM.png

Here is a list of the HTML elements we permit in both Custom Sections as well as Emails:

  • ‘h1′,’h2′,’h3′,’h4′,’h5′,’h6’,
  • ‘p’, ‘b’, ‘i’, ‘u’,’br’, ‘hr’,
  • ‘strong’,’em’,’span’,’a’,’ul’,’ol’,’li’,’div’,’pre’,
  • ‘sup’, ‘sub’,
  • ‘table’, ‘thead’, ‘tbody’, ‘tfoot’, ‘tr’, ‘th’, ‘td’

We allow a number of styles, such as:

  • Align: center, right, left
  • Decoration: none, underline, line-through
  • Transform: none, capitalize, uppercase, lowercase, initial
  • Font Weight: normal, bold
  • Font Style: normal, italic
  • Font-size, Line height, letter spacing, border spacing
  • Margin, padding
  • White space
  • Vertical-align
  • Background-color (hex required)
  • Border (width style color)

New How To’s – Event Display, Confirmation Page, and External Links

How to Customize Event Display Options:
 

How to Add a Confirmation Page Button:

How to Include External URLs:

Mobile Race Website Header Option

We have added an option that removes the automatic race name that appears on a race website when in mobile view.

For example, the website looks like this:

Screen Shot 2017-01-04 at 11.16.33 AM.png

The “Scott Coffee Moorestown Rotary 8K Race” is the race name the system automatically puts on each race website in full view mode. That can now be hidden on mobile phones, giving a cleaner look on a smaller device (and places it below the “SignUp” button:

unnamed-1.png

Set this option on Miscellaneous Settings, and can also remove it from the name on desktop views as well:

unnamed.png

Partner Websites – Speed Bump

We have added a “speed bump” – this is a pop-up warning message that warns users they are leaving a site. One of our customers is a bank – The Fifth Third RiverBank Run – and they are required to give a pop-up when there is a link that takes the user off of their website.

Screen Shot 2016-12-20 at 2.34.28 PM.png

This is configured on the Setup page for the Partner Website on the Partner Dashboard:

6960d73a-c69d-11e6-8f02-2ad419040fbf.png

Partner Websites – Page Meta Description

We have added the capability to set the Meta Description to each page under the Advanced Page Options in each page on Partner Websites. The Meta Description is typically what is shown on a Google Search. For example:

Screen Shot 2016-12-20 at 2.25.00 PM.png

The setup is under the Advanced Page Options as you create or edit each page on your Partner Website:

Screen Shot 2016-12-20 at 2.21.18 PM.png