To Get Most Out of a Trade Show

BoothIQ Web App Renovation

Solution

To make the attendees feel comfortable providing their phone number, an on-boarding flow integrated with the log in process was created.

To make all the steps and functionalities self-explained, the navigation panel was re-designed and the information architecture was re-structured.

Outcome

BoothIQ has planned to implement our design solution into the next launch, which is expected in the end of 2018.

My Role

User research, Strategies, Visual design, Client Communication, Sketch, Prototype

Teammate

Nithya Geereddy

DISCOVER

A Little Bit More About BoothIQ

To understand current business status and challenges through meeting with our client, Prianka, the founder of BoothIQ

What The User Said

Usability test

5 participants were given the following tasks

Takeaways

DEFINE

Framing The Problems

Through affinity mapping, we synthesized the trends

The high level insights from affinity map

Mapping The Big Picture

We mapped out the user journey to understand how a trade show attendee would experience at each phase of BoothIQ service.

After discussing with BoothIQ, we decided to prioritize the first three pain points (see the yellow circles), focusing on addressing those problems in terms of our time limitation:

• Lack of onboarding Process: it’s the primary issue to solve since it not only makes users feel confused thus less willing to use the web app but also costs time the labor force at BoothIQ’s end

• Confusion on where to find the information needed: the secondary issue would be to re-structure current information architecture which cause attendee’s frustration

• Confusion on the different colors in the listing: the third challenge would be to make the existing color code more distinguished and meaningful

DEVELOP

Let’s dive into the whole experience

User flow

We created a user flow covering BoothIQ service from before to during the trade shows, within to off the web app. As indicated below, what we are addressing would be within the web app.

First of all, we built the oboarding process to make sure the users feel safe and knowledgable before log in.

Secondly, we re-organized the navigation system and added filter on the listing page “All Offers & Contents” so that the users would have easier access to the information they need.

1. Designing Onboarding Process

Paper Prototype

We first started with sketching & paper prototyping, and simultaneously getting feedback.

Feedback and Iteration for Paper Prototype

BoothIQ would like users to be able to log in on first step to save time while the users felt the brief Introduction and the tutorial pages at beginning helps in terms of understanding what this web app is for and how it works.

To reach a balance between the stakeholder and users, we decided to 

•     Combine the welcome page and the log in page

•     Add a “Learn More” button 

In this case, users can log in as soon as possible while they still have the option to know more about this app before log in

Low-Fidelity Mock-up

Feedback and Iteration for Low-Fidelity

The feedback we got from the lo-fi mock-up was that the layout of the text and icon made it not easy to read. In addition, since the on-boarding process is the facade of this app, making the style consistent with BoothIQ’s fashion. Therefore, what we would iterated in the Hi-fi mock-up are:

High-fidelity mock up

2. Evolving the Navigation and Information Structure

Paper Prototype

Feedback and Iteration for Paper Prototype

BoothIQ was convinced that the segmented control and new navigation makes sense and make the promotions easy to find.

Users reflected that the navigation was clear. But the “Pin the Exhibitor” icon was confusing at first place

Therefore, what we would like to change is:

• Add text “Pin Company” to make the icon clear

• Add company’s website and social media to ehibitor’s list

Low-Fidelity Mock-up

Feedback and Iteration

Feedback from the Sketch and the Lo-fi mock up showed positive reactions toward the new modification. Therefore, what we would iterate into the hi-fi mock up are:

1. Add detailed information and micro-adjust layout

2. Integrate with BoothIQ’s style guide

High-Fidelity Mock-up

Let’s Pull Everything Together

Reflection and Moving Forward

UX design is to balance the business goal and user needs

I understood the business need would be to get the users onboard as soon as possible while the users would like to know more about what the app is before/while they log in. To make a good design, we spent a lot of time communicating with each end and eventually reached a point that allows the users to start the logging process at first step, at the same time they also have the option to see the details on what the app is and how it works. Through this practice, I learned to prioritize the most valued needs, but never give up.

Understand the beauty of an industry by diving in the challenges it is facing

By understanding the bottlenecks of getting users onboard the web app during a bridal trade show, we also saw how huge the opportunity could be. There are so many people who need to get accurate information, and there are exhibitors ready to spread their promotions. As we getting to know the crowd size and the gap between the exhibitors and the attendees, we see a  glowing industry and our job is to build a strong and well-functioned bridge between them.