Noisette Event Template
Noisette was one of the first templates developed for the EventBank Platform. It’s promise was a simple one-pager to highlight information about a small event for organizations that did not need a complex layout or a heavy use of pictures. The common usage was regular or periodic one topic discussion events.
Besides the main hero picture, as in other templates, the user can customize elements of the layout, redistribute or hide/show some box elements as well as choose 2 colors, a main color for highlights and a secondary for other items.
Here there are examples of Italian Chamber of Commerce in Hong Kong and some of their events using Noisette template on May 2019.
When addressing the optimization of this template the first impression that I had was that it look quite old-fashioned. Not only in the aesthetic sense, but in its limited functionality. So the first order of business was, after feedback collected over the years, both internally and externally, to assest the damage and shortlist some items that could be improved.
For User Research, in this case, as the template was developed in close relationship with one of the first organizations to use EventBank, the American Chamber of Commerce in China, it was focused on their user persona and their needs. Of course they felt the need to change nothing but still I wanted to hear what were their concerns. It was the choice of many mid-to-large organizations event template by its simplicity, so also learning the keys of what was working was also a large part of the mission at this stage.
Amcham China, as a user, percieved the template proposed usage very well. The small event, regular or semi regular, with slow impact on their workflow, easy to manage and with good experience for small amouts of content. The low-graphic strategy, with a simple hero picture was the key that defined their preference here. A point to keep, then – a template that didnt require a large display or banner but could focus on one topic and do it well.
As mentioned, other organizations using the template fell, as well, under the category of Chambers of Commerce and Associations, mostly, because they have similar requirements and the same type of events.
One item that caught my attention after interviewing these organizations using the template was that for the type of organization and the types of events, the average final user age was among the 40-70 years of age, from the membership base business industries.
One item also at study during the research phase was how other simple, one pagers, were use in the event management industry. Mostly solutions based on a freemium model or by a percentage of the ticket sale were using a one-page template with similar capabilities but focusing the experience into selling tickets, which the layout at the moment in this case, failed.
After the user research and interviews and analyzing which aspects worked and which didn’t, we proceed to present the wireframe of the new version. Some of the elements I wanted to include here:
- Clear Call-to-Action, always visible during navigation
- Combine and offer relevant information in a comprehensive and less time-consuming way
- Optimize the look and feel more in line with current UI standards.
- Include a location element, as the location was missing on the previous version, a map with a pin was introduced to help the user get the most of the information about the event.
During this stage, the wireframes were discussed with several parties involved, and it was a user, from the Italian Chamber of Commerce that coined the term “elevator” for the fixed navigation on the left.
I would like to mention here that the introduction of the map widget in the default mode (before the user customizes the elements of the page and just as you create the event) was highly criticized by some users. They felt their user-base knew well enough the location of their usual centers, as those small types of events were usually hosted at their HQ. As one of the missions of Version 2 was to expand the usage of a “popular” template beyond their normal users I felt that as an option it was nice to have the ability to display a map with a location. It made it to the final version then.
The point of this navigation was to conceive all important information for the attendee into a simple box that accompanied him/her through the content flow and reminded to take action.
After validating and adjusting the wireframe the UI was introduced.
One of the aspects to be careful with concentrating the main information on the “elevator” was to make sure it was available to all resolutions. Therefore the presence of the image on the simplified version was limited to the number of characters of either the title or the subtitle or both combined.
In the picture above it is shown the 3 stages of normal simplified navigation and hiding the image when the text was too long.
Here we can see some events with the new version by Amcham Shanghai and Amcham China, showing the landing status (above the fold) and during scroll.
As the layout was adapted to Bootstrap style columns, the phone version featured 1 column display with no major changes on the layout. Call-to-Action was fixed at the bottom as well.