Alleviating ambiguity from BoothIQ
Getting lost is only fun when there aren't any consequences
BoothIQ is a technology that connects vendors to attendees at trade shows. BoothIQ vendors were getting lost in the site. They needed to refer to an instruction document to create a listing and access their leads. If vendors couldn’t access their leads, it wasted their effort.
01 / Team
I worked with two other designers, Jonathan Ezell and Nicholas Sohriakoff on this project, and we collaborated with the CEO of BoothIQ. This project was completed during a 3 week sprint.
02 / The challenge
Identify friction points on the vendor side of BoothIQ, and redesign the user experience for vendors.
03 / Research methods
Contextual inquiry
Customer success calls
Business analysis
Heuristic evaluation
Usability testing
04 / Strategy
User flows
Comparative analysis
Affinity mapping
Defining a persona
Information architecture
Branding
05 / Deliverables
A clickable prototype
Redlined wireframes
Documentation of research findings
A 30-minute presentation of our designs
A style guide with icons, fonts, color palettes and click-states
06 / Tools
Figma: wireframing, prototyping, redlining
Pen + paper: sketching
Adobe photoshop: image editing
Google slides: presenting solution
Phase 1: conduct research [duration: 6 days]
Were there different research findings for different research methods?
Our first step for user research began with a heuristic evaluation of BoothIQ.
We identified the path we wanted to heuristically evaluate and broke apart to work individually. We each wrote our findings on post-it notes, and worked together to affinity map our findings. We came up with 9 initial categories for our affinity map.
Our next step was to observe users in a contextual inquiry.
We took notes, disassembled them into more post-it notes and reassembled them into our affinity map. We came up with 3 new categories for our affinity map.
The final research method was listening in on customer success calls with the CEO of BoothIQ.
These authentic customers voiced identical concerns as users during contextual inquiry. Our research suggested similar findings throughout a variety of methods. We deepened our understanding of the problem.
Our research reflected reality.
Phase 2: synthesize research into a hypothesis statement [duration: 3 days]
Our research findings
We synthesized the themes from our affinity map down to three design goals.
1.
By furnishing form fields with descriptions, labels and directions, we can provide direction and embody the friendly and helpful nature of BoothIQ
2.
By applying visual design affordances to increase findability, we can alleviate ambiguity of features that are currently hidden
3.
By restructuring navigation, we can remove blockers that are preventing exhibitors from completing their profile in one session
The user journey of BoothIQ
Phase 3: Ideate on solutions to our problem [duration: 3 days]
70% of vendors created listings from desktop sites, but the experience was optimized for mobile.
During our research we found out that customers were likely using a desktop computer versus a tablet or mobile phone. Because BoothIQ was built for mobile, the experience created large, stretched out blank spaces.
We considered the information each page needed to display for difference devices.
When designing for mobile, the treatment for each page was intentional. Some pages used a conventional stacking design. Other screens had to be redesigned.
The layout was disorienting, so we designed BoothIQ to be responsive to device sizes.
Information is displayed according to the user’s needs. We designed according to the type of information being shown, and the device size.
Conventional stacking design
A conventional stacking design was used on the homepage because each card is also listed in the navigation drawer.
Maximizing visual cues
The “Create listings” page needed to be designed differently for mobile and desktop to cue users to add three listings.
Affordances + descriptions = clarity
The analytics page showed data on potential leads from a trade show. This is feature is crucial because it is how customers access their leads to make money. Before a trade show, the leads page was completely blank.
Erasing the confusion of blank pages.
Before: blank page
The blank page led customers to believe this page did not hold any information, so they did not feel compelled to return to this page later.
Redesigning the analytics page to include a preview of information.
After: descriptions
Text and visual elements were added to the blank page. This helped inform the user about what kind of information will be displayed later.
Key data becomes visible and easy to access.
After: data visualization
Once data populated the lead analytics page, it contained a visualisation of key information.
Phase 4: Design for our user [duration: 4 days]
Deal? Contest? What is the difference?
Our research showed that we needed to furnish BoothIQ with descriptive fields and instructions. Customers needed to refer to an instruction email to know if they should upload their listing as a deal or contest.
Lack of descriptions caused uncertainty
Before: Unclear options
Hidden navigation and lack of descriptions caused users to be unsure of their options. Users struggled with knowing what is a deal versus a contest.
Terminology was demystified
After: no instructions needed
Descriptions were clarified for each question, the save button was moved to a conventional location, and a character limit was introduced to keep the user informed of their limitations.
Hierarchy, spacing, and iconography
Accessibility
Icons were added to present information to users in a perceptible manner. This allows for information to be accessed in multiple ways without feeling redundant.
All font sizes, colors, and icons are intended to be accessible by those with low vision.
Visual design
The layout was created on a 12 column grid for desktop, and a 4 column grid for mobile to ensure consistency.
Information architecture
On desktop, the navigation was restructured to house event specific tasks on the left navigation bar. Global tasks are at the top right.
On mobile, the navigation is minimized into a hamburger menu that retains the same elements as the desktop version.
Learnings from this project: the lessons I will be taking with me
Lesson #1
Mid-fidelity is where the magic happens
My first task was to create a style guide in Figma.
Goal #1
To elevate the user-experience of designing on a team
Goal #2:
To maximize speed and efficiency of updating common design elements
Goal #3
To embody the friendly and helpful personality of BoothIQ from the start
This began with designing well-named placeholder buttons, icons, and text-boxes that I turned into components.
By using these mid-fidelity components throughout our designs, we could work smarter.
Our team also strategically grouped and named elements, so they were easy to play with. Thoughtful grouping let us quickly resize and duplicate elements.
This practice helped us experiment with designs with a similar freedom to pen and paper.
Lesson #2
Lean into as many research methods as you have time for
When we listened in on actual BoothIQ customers as one of our research methods, we didn’t discover any new findings.
But they did confirm our previous findings and helped sculpt our persona.
This gave us confidence to know our findings were valid and repeatable, and signaled that it was time to start carving out features to prioritize for our MVP.
Lesson #3
Iterations on iterations on iterations
As a team, we were most often sitting at the same table to work. We adopted a healthy practice of balancing heads-down work time with collaboration time. What worked for us was to set a timer to come up with ideas, regroup to sell our design decisions to each other. We repeated this process several times to continue pushing our ideas further.