Earlier this year in May, the Richmond Technology Council (rvatech) hosted their annual Gala event, where they celebrated the many breakthroughs, advancements, and technologists which are driving our technology-based economy. With significant growth each year, rvatech recognized that they needed to provide their members with an easy way to access and manage the event details, a way to network with other members, and promote rvatech as a brand. rvatech reached out to Shockoe and challenged us to come up with an intuitive app to meet these needs. We also had to keep in mind that the app would need the ability to grow with each event.
Rvatech requested the following for their Gala event app:
- Eventbrite Sign-in
- Event Details
- Links to Social Media
- List of Sponsors and Finalists
- Searchable Attendee List
- Connect on LinkedIn
- Searchable Map to Find Their Table
- User Profile
As I dove into the designs, I received a lot of feedback that the app should have a white background, as it provided a clean look and is easier on the eyes for reading and scanning information, and all of that was true. My biggest concern was that this event would predominantly be dark, as it was an award ceremony with most of the lighting focused on the stage. In my mind, I was picturing 80 tables full of bright glowing white screens causing distractions during the event. I had some concerns with where the designs were going. I decided to meet with another designer who encouraged me to stand up for my ideas and voice my concerns. It worked. Using rvatech’s brand colors for the event, we went dark, using white only for navigation and text and I believe it worked better in the long run.
One of our biggest challenges was creating a searchable map of the event so members were able to find their table out of over 80 tables. Designing the actual map was the easy part, but designing the interactive portion of it was something that demanded a great deal of collaboration with the developers recreating it. This was also a wonderful learning experience as a designer to know what my limitations were considering the small window of time we had to complete the designs and development before we launched the product for the event.
Some things to consider for designing an event map, making sure users are able to identify where they are in relation to labeled landmarks, like a stage or the main entrance. Letting users know where restrooms are located is also something to consider.
To bring networking in, rvatech requested that we have users sync their LinkedIn accounts with the app. This actually worked in our favor. When users synced their LinkedIn accounts it provided our searchable networking tab with their name, company they worked for, and career title from their account. It also populated the profile page we created with their profile image and career data from LinkedIn. We also provided an on/off switch for any users who did not want to share this information or if they didn’t have a LinkedIn account, for those instances we allotted users to manually enter their personal and career information. In addition, when users synced their LinkedIn accounts, when they selected the networking tab, they had the option to connect on LinkedIn.
4. Event Schedule
The event details, sponsors, and finalists were designed as scrollable lists so users could keep track of the event and educate themselves about supportive technology-driven companies and technology leaders in the Central Virginia community.
Rvatech’s Gala event went off without a hitch. Users were delighted with being able to manage the schedule of events, network with their peers, and easily find their table by entering their company’s name. Shockoe was also honored with an award for a non-related app we created for one of the largest electronics distributors in the world where the lead developer of that project, Jay Soumphont, gave a moving speech about his work developing the app and working closely with the client.
Updating For a New Event
After designing the rvatech/Gala app I was asked to work on the rvatech/women’s app. This presented the opportunity to maintain consistency while redesigning a new look geared towards an entirely different event.
Rvatech/Women is Virginia’s premier conference on women in technology, hosted by the Richmond Technology Council’s WIT forum, bringing together professionals on a wide range of technology topics to learn, network, and collaborate.
Rvatech requested the following for their Women’s event:
- LinkedIn sign-in
- Event Details
- Biographies of Keynote Speakers
- Workshop Descriptions
- Links to Social Media
- Searchable Map
- Searchable Attendees
- Connect on LinkedIn
- Augmented Reality (AR) Featuring Designs From t-shirt Contest Winner
- User Profile
For their October event, the rvatech/women’s conference, Shockoe had a firm foundation in place from our work on the Gala app, but little did I know how a simple color change would change everything. For this event, everything about the user interface (UI) had to be in the reverse from the Gala app. The app needed to be bright and visible, and easy to read and scan information. The women’s conference colors are light blue and purple, which are wonderful colors, but we didn’t want it to look like the Gala app at first glance, we wanted it to look like the rvatech/women’s conference app.
One of our initial challenges was meeting accessibility standards. At first, I was trying to swap the Gala’s dark purple background with Women’s light blue, but it failed WCGA standards miserably. While collaborating with another designer, they suggested keeping the light blue background but placing all the event details on white cards using black text. Brilliant problem-solving right? Not exactly. While the designs were clean and made the app stand out on its own, it was no longer the same app. It was an app with expandable cards based on the data that was being entered. We had provided estimates based on the fact that it was the same app, but now I was giving the developers a new app with new design behaviors that were nothing like the previous app.
Luckily our developers were able to adapt and problem solve these new features and recreate the designs without flaw. I was amazed at the networking tab, where users were able to scroll attendees by alphabet, with each alphabet being on its own card. And when users searched for a specific attendee it narrowed the cards to a single card for the letter they typed. It was beautiful, clean, and intuitive. I can’t thank the developers enough for their hard work.
For the map features, we tried something a little different for the navigation. Since the only thing to search for was speakers and workshops, we decided to move the map access to a call to actions (CTA) button in a card associated with the workshops and the speakers, rather than having its own tab. We replaced the map tab with the speaker’s tab, where users could search for the speakers or workshops of their choice. In the search results, users had the option to view the speaker or workshop on the map, where the location would be highlighted in purple and users pinch to zoom in and out and scroll the map as necessary.
7. Solving a Problem
An app should always solve a problem. Since this event was primarily a series of keynote speakers and workshops we wanted users to be able to make sure they could manage their time with the topics that interested them most. With the schedule in place, we were able to give a user access to the speaker’s portrait, biography, and workshop details. With these details downloaded ahead of the event users were able to decide which speaker or workshop interested them most.
8. Immersive Media
The beauty of this beast emerged as an augmented reality (AR) experience we created with the help of our Immersive Media Director, Dan Cotting. Originally rvatech wanted to incorporate AR in the initial Gala app, but time was not on our side. But for the Women’s app, since we had most of the framework in place, and the designs and development stayed ahead of schedule, we had more than enough time to design and iterate a themed AR experience based on rvatech’s own t-shirt design contest. Dan suggested we use Facebook’s new AR Studio to save both time and money and give users access to the seemingly endless volume of AR featured. We were hesitant at first to use a 3rd party for the experience because we were concerned about sending users to another app, but users seemed to embrace the exciting feature and shared their selfies all over social media.
For the rvatech conference apps, one of the most important goals was communicating the brand. Images, colors, font style, content, and designs leave a lasting impression. It is our job as designers to make sure it’s a positive impression we’re leaving.
For the Gala app, I used a draped red curtain in the background of the header to give a prestigious look. The Gala event has two brand colors. Their main color, a dark purple #0F0F2D, was used as the background of the entire app. Their other color, teal #189579, was used an accent color and design element throughout the app to provide contrast.
For the Women in Tech conference app, I replaced the standard default profile image of a human head outline with an outline of a woman’s head. Since this was predominantly a networking event I created a networking design in the main header. As I discussed before, we used their light blue #6BCCDB for the background, and purple #46479D was used for all CTA’s. In addition, I switched from 90º corners from the first app to subtle rounded edges for content cards, and circles for the scheduled events to match the theme of the networking header. These two apps may have similar frameworks, but they’ve been branded completely different.
We look forward to designing a new experience for rvatech’s next big event. Now we’ll be able to not only provide them with a unique experience with cutting-edge immersive technology, but we’ll be helping rvatech strengthen their brand name, improving their member’s brand loyalty with a customizable experience true to each event.
What does it take to build true loyalty through design? Our dynamic mobile solutions will invigorate how people engage with your brand. If you’re interested in learning more about other personalized solutions we’ve designed with the customer in mind, take a look at our latest examples of work here.