Designing the ValueCharts Multi-Firm Event One Page Sites

The Muli-Firm Event is a modular single page design that served as a sign up portal for a series of cross-promotional seminars. This pages was meant to be directly linked to through emails and perhaps other webinars.

Applied Concepts

Mobile First-ish:

This page is only really reachable by a direct link. One that we would provide in an email that was sent out to various lists. With the understanding that a large amount (25-40%) of email is currently opened on a smartphone,  I initially mocked up this page with mobile first in mind. I organized the page such that part of the sign in form is visible as you come to to the page on any device. As you go down,  the information on the page becomes specific in a logical order based of the users level of interest.

  • Why - Call to action
  • How - Sign Up input
  • When - Schedule
  • What - Bullets of topics covered
  • Who – Presenter’s Bios

Because of the pages relative simplicity, I felt it was a good place I could explore the concept. In hindsight, I feel like my intention of “The most important thing is the form” was correct but my execution was flawed. Aspects of the site that should have scaled in size, like the text, did not so it pushed down the screen as extra items and elements were added during its production.

What I think hurt my process was I went from Mobile Mockup —> Tablet/Desktop Mockup —> Desktop Hi-Fidelity –> Coding HTML.  During these steps aspects that were important to the original mock up were compromised because when a change was suggested or required it was not vetted against that original mock up but from one up the chain.

A Friendly Form

The primary goal of this page was to get users to sign up to attend a webinar. I made sure that the questions the form was asking were appropriate for the context. Essentially, all we needed from the attendees was a mailbox to send the link and what we should call them. So that’s all we asked for. There was some discussion on if we wanted or needed a last name field. I felt it was a small item we could include to increase the chance of user inputting their actual name. Other parties preferred having no last name field and since it went against the absolute minimum input concept it was dropped. In the end I think this was the right choice.

A concept that lost it’s way on the form was the required *’s. I think this is backwards because I have already pared down the inputs that we need for your convenience and if they are both required there is no need to say otherwise.

Wordy Content from Chronically Late Sources:

When designing this page I expected to always be waiting on the content that was going to populate it. So the content sections had to fairly broad. I used a basic hierarchy down the page based on the assumed users level of comfort and interest.

The user that will sign-up for anything proposed by the educator, it dominates the page. Scrolling down will reveal more information about the event for the more cautious clicker.


What worked

  • I think success of this project was in its clarity and re-usability. The content was able to be repopulated multiple times and was the gateway to webinars that had thousands of people attend.
  • The “Mobile First” method could to be very powerful tool to prioritize content and is a good design motivator.

What what Didn’t Work

  • I can see there is a breakdown in my review process. This may be just is no time allotted for it but items slip under the radar and attempts should be made to fix this.
  • The form is required so why make stars for 2 fields
  • The mobile layout was compromised in the end.  Mainly due to the text not re-sizing.