When the initial idea of this project was born, we all here at Lemberg Solutions knew we had all the right ingredients. It was our sweet spot & we were so excited about it that we knew we could not but make it real.
Prehistory part here (skip if you are interested in design solely)
DrupalCon is a major annual event organized by the Drupal Community in Europe and America that brings together thousands of Drupal evaluators such as web developers & designers, business people & simply those who are deeply passionate about tech & open source. Having been involved in both Drupal & mobile apps development for more than 8 years now, inspired by the Drupal Community initiative and after some intense brainstorming, we decided to develop a mobile application for the DrupalCons that would enrich attendees’ experience, guide them through the event and much more... (*about that we`ll write further)
And so we did!
The first version of the application was developed for both iOS & Android platforms and was presented for the first time in September 2014 at DrupalCon Amsterdam, the event that gathered 3,5 k visitors and was named the largest-ever DrupalCon event in Europe.
Off to a good start...
First things first, we've started with the fact that each of DrupalCon events share a common structure, format and timelines. So we’ve come to a point where creating a common solution of a DrupalCon application would allow us to reuse this app for many DrupalCons to come by simply adapting it for each event’s specifics.
“UX First”. Every app starts with a clear understanding of what its purpose is, why it is being created, what it should bring to the end user and in what form.
Before the actual wireframing came research, which we based on our own experience attending previous DrupalCons, and also on the then upcoming DrupalCon Amsterdam 2014 official event website.
Key functionalities of the app include:
- Sessions & BoFs schedules
- Information about speakers
- Locations & maps
- Points of interest
- About the Conference information
- My schedule feature
Thinking around schedule, time and event details, we started wireframing the screenmap, highlighting the relations and transitions between screens.
The design is a very essential element of the end user experience of the information, therefore the UI part requires a very profound approach. In this particular instance, the visual style of the application was supposed to reflect the particular event location, the city or country (so we drew inspiration from Amsterdam).
Color palette selection approach
We advise using a professional tool like color.adobe.com.
In our case, the Amsterdam-themed color palette was already there, so what was left was to adopt this color palette for our screens.
These are a few typical screens for the DrupalCon
Typography
In our experience, the most appealing fonts for clear rendition of text is Helvetica family (native iOS font). A significant amount of typefaces allows to clearly place highlights in the copy. You can see that especially distinctly on the screens above.
Home screen
Since the key purpose of the app is to render the daily conference schedule to users in the most convenient form possible, we arrived at a creative and yet very informative UI. Specifically, we used thematic icons for each event type (keynote, program group photo, ...)
The Program screen design specificity is in placing much attention on each element/event of the day, you can see that from the available space, “playing” with typography and how visual elements come into play.
Program screen with all icon type
So how was it?
Our team had a great time at the DrupalCon Amsterdam. See our overview blog post “Changing Lives & Releasing Drupal 8 at DrupalCon Amsterdam”. We’ve received lots of direct and constructive feedback from users of the iOS and Android versions of the app presented at this event.
In light of the timetable of upcoming DrupalCons:
Bogotá: February 10-12, Colombia
Los Angeles: May 11-15, California, USA
Barcelona: September 21-25, Spain
we’ve reinvented the existing application and taken it to a whole new level: a completely universal, easily adaptable app. We’ve kept the blueprint, but replaced some UI elements (background, pattern, …), and the color scheme of course.
The key changes have touched upon how the daily event list is displayed (Sessions)., and 2 new screens had to be added: Point of Interest and Info.
Old and new design version
In the latest version, we have done away with a specific display of the event time, changing the overall screen composition. The screen has been divided into 2 conceptual parts: on the left, we’ve placed the time and, if necessary, a small theme icon; on the right hand side, the event details are displayed, including the topic, speakers, complexity level. The complexity level is reflected by a special icon, which symbolically reminds of the network level in mobile devices.
Pros and cons:
The upside is that some blocks will have better visual perception (day events). The standard table view of information is better perceived by user on first screen launch.
The downside is not making it possible to add an event to the Favorites list from the general list, less stress on the visual elements (icons), the more copy there is - the less blank space is left.
New screens: Point of Interest, Info.
What prompted us to add the Point of Interest screen was the idea to offer users a concise list of the host city’s best landmarks and places of interest. So that visitors can also check out the list (with separate articles) and visit certain places they’d like to see.
The Info screen sums up the new functionality, connecting the app with the information on the event’s main website.
New screens: Point of Interest, info.
Bogota UI Design style
Barcelona UI Design style
Los Angeles UI Design style
In a nutshell
Since DrupalCon Amsterdam, our app has evolved into a universal platform that can be modified for many DrupalCons to come. We’ve digested Amsterdam’s feedback and nice-to-have list, and the outcome is a full-fledged app that informs about all the aspects of the conference, and more.
Thanks to its high adaptability, the app can change UI patterns and become a stylish and customised solution for virtually every venue across the globe. This time, it’s DrupalCon Bogota: the app has a flat geometric pattern, and the color scheme was inspired by proximity to nature.
The Android version of the app can be downloaded here.
Lots of ideas are in the pipeline for this app. To give you a hint, we're planning to open-source the both iOS & Android versions of the applications soon. So keep your heads up and follow @lemberg_co_uk to be the first to find out.
I hope you’ll enjoy the result of our efforts. Try out the app and send us your feedback!
SEE ALSO: