Jeff 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.
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:
We will also offer an option to keep it at the top, but greatly reduce the size:
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.
That will also have a new mobile look with the image overing the whole page on initial load:
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.
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:
To generate an image of the marines on the beach carrying the flag in the email like this:
Here is a list of the HTML elements we permit in both Custom Sections as well as Emails:
- ‘p’, ‘b’, ‘i’, ‘u’,’br’, ‘hr’,
- ‘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
- Background-color (hex required)
- Border (width style color)
How to Customize Event Display Options:
How to Add a Confirmation Page Button:
How to Include External URLs:
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:
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:
Set this option on Miscellaneous Settings, and can also remove it from the name on desktop views as well:
When a partner has races all in one state, then our national location map will narrow down to the single state. For example, the Ohio Challenge Series:
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.
This is configured on the Setup page for the Partner Website on the Partner Dashboard:
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:
The setup is under the Advanced Page Options as you create or edit each page on your Partner Website: