Content Portal – Mobile + Desktop Trade-show Content Management

Project Summary

Create a suite of products for Freeman that make it easier for attendees to browse, save, and revisit exhibitor content during and after trade-show conferences as well as the exhibitor content management systems.

Project Stats

Role: UX Designer – research, wireframes, UI design, interaction design, information architecture, user testing, paper prototyping, feature creation and prioritization, stakeholder presentation and interviews

Team: 01 UX Designer, 01 UI Designer, 02 Product Managers, 01 Back-end Developer, 02 Front-end Developers

project ongoing…

UX Challenges

  • Create a seamless and responsive experience for users both on mobile and desktop hardware
  • Balance product design between minimally viable features and scalable growth
  • Design within the “Tangible Guidelines” for all Freeman products

Personas:

Exhibitors

  • People who have purchased booth space to show their product, brand, or service at a trade-show
    • Pain points:
      • Booths can get too crowded to give each attendee individual attention
      • Physically printing out information is bulky, time intensive, and not environmentally friendly
    • Needs:
      • Upload and manage their content, as well as associate that content with QR codes that attendees can scan while at their booths

Attendees

  • People who come to trade-shows to learn about and connect with exhibitors
    • Pain points:
      • Conferences are crowded so it can be hard to visit all the exhibitors you want to see
      • Remembering every exhibitor you saw and what they presented in their booth can be difficult
      • Viewing interesting information and content post-conference can be done in a myriad of different formats: physical flyers, bookmarked websites, white-paper links
    • Needs:
      • An easy way to select and view content both during and after trade-shows

Onboarding

Or, How do you teach someone to how to scan a QR code when the application itself begins after the code has been scanned?

One of the interesting problems of this product was its lack of dedicated tutorial steps.

The solution: Iconographic instructions on the code itself

Initial paper sketch of instruction location and icons

The final design was arrived at for a number of reasons:

  • Stroke weight was a less overpowering way to highlight the intended interaction for each step
  • Having real QR codes at that small a size created visual confusion
  • Arrows were added to reinforce the linearity of the process
  • Written instructions were shortened to their simplest forms

Exhibitor CMS

Testing and Design

Wireflow for Exhibitor CMS v01

After designing the initial content management system for Exhibitors and reviewing with the internal team, I set out to confirm our assumptions with informal paper prototyping.

Interview Methodology for Paper Prototyping

Tools for user testing: CMS wireframe printouts and trust notebooks for recording responses

I created a simple interview script that would tell volunteers the key points of the testing session:

  • The persona they would be role playing during testing (an Exhibitor)
  • The tasks they needed to perform (use the CMS to upload content and associate that content with a QR code)

I asked volunteers to complete these tasks using printouts of the 4 main pages of the CMS wireframes:

Survey Responses

Overall some very interesting and useful feedback was given by our volunteers. Some feedback:


“I’m looking all around at the instructions and cannot find the buttons”


“Adding content to a QR code is confusing! There’s too many buttons and options on this page.”

After reviewing the full survey responses with the team, we arrived at these solutions:

  • Add descriptive labels and iconography on all buttons to make actions more clear
    • This had the added benefit of reducing the amount of instruction text on pages
  • Make the QR Code Editing/Content Association layout easier to use by changing the position of key UI elements

Redesigned CMS after Incorporating Testing Feedback

UI Designs

Tangible UI colors
Button types

Attendee Mobile Designs

Broad attendee mobile content browsing wireflow

The mobile experience for the attendees parallels the experience for exhibitors using their CMS. Starting with the events, attendees can from there browse all their exhibitors, view all of the saved content, or they can specifically view content saved from one exhibitor.

Mobile Content UI and Functions

Wireframes for mobile content browsing and associated functions, designed to be in-line with feedback from the exhibitor CMS paper prototyping.

Interaction + UI Prototypes

Clickable UI prototype

Mobile instructions expand/collapse behavior

https://projects.invisionapp.com/prototype/PEGASUS-attendee-mobile-instructions-cjrgspc36000aq501bihbdkwm/play/3fc91a23

Exhibitor information expand/collapse behavior

https://projects.invisionapp.com/prototype/PEGASUS-attendee-mobile-ExhibitorInfo-cjri2jybx003wrm01a4o7x0rf/play/80d2afb9

https://projects.invisionapp.com/prototype/cjri374lk004zq5016p2t4ecx/play


Responsive desktop CMS designs forthcoming…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s