My Role
SaaS Platform Development - 2023
SmartConnX
Wireframing, UI Design
Team
Tools
Figma, ClickUp
Software Engineer (1) Co-Founder (2)
Timeline
3 Months
Background
Project Summary
SmartConnX is an all-new networking platform that helps exhibitors find, score, and connect with the best prospects at their events. It takes the guesswork out of exhibit return on investment with a personalized lead generation, scoring, and recommendation engine.
Working with the team which included engineers and product managers, I designed and helped launch the platform that would soon be available to SmartConnX’s clients.
The Problem
When exhibitors and marketers attend trade shows, their success measures are badge scans and booth sizes. But the new generation of attendees values measuring and monetizing quality connections. How might we use technology to help exhibitors make the best connections at trade shows?
Goal
Design a SaaS platform that can effectively leverage technology for exhibitors to get the most out of tradeshows, by connecting them with potential leads and prospects.
Research
Secondary Research
Prior to joining, the team had conducted research surrounding the event space to determine key problems facing exhibitors. The team derived their data from the Freeman Trends Report Q2 2023.
67% New Younger Exhibitors
80% Going To The Same/More Events
50% Unhappy with low quality of connections made
#1 reason to exhibit - lead generation
Ideate
Digitizing Wireframes
After I presented my initial sketches to the team and we aligned on the direction for the platform, I moved forward with bringing the designs into Figma.
The team enjoyed the simple and clean UI of the SaaS platform. This included the card display and well-organized information.
With the platform pages previously mapped out by the team in ClickUp, I designed the mid-fidelity wireframes , starting from high to low-priority.
Sketching Wireframes
To kick off the wireframing process, I went to my sketchbook to start visualizing what the platform would look like. I incorporated the features that the team had already developed into the sketches. These included adding company leads into the platform and score calculation for determining the most viable prospects.
I also took inspiration from other SaaS platforms, including Salesforce, Zluri, and Productiv.
Why: Starting with sketches instead of jumping right into Figma helped simplify the designs before the platform could become too complicated
Leads Overview Page
Company Leads Page
Design
Branding Kit
The team had previously used a freelance graphic designer to create a brand kit for the platform. The kit included color, font, and a logo.
This was helpful when bringing the wireframes into high-fidelity, as I could pull from the already existing brand kit and apply it to my designs.
High-Fidelity Wireframes
In order to create a more seamless and cohesive design system, the team decided to use the Tailwinds UI kit, instead of having to create one from scratch
1. Navigation for the platform is a hamburger menu that is left aligned to the page
Why: To keep with the common layout of a SaaS platform and not confuse users
2. Event info is displayed at the top of the page in a hierarchy of importance
Why: Users can easily find information for their event
3. Information is displayed in a card format to make it easier for users to read
Why: All important information is grouped together for a scannable interface
4. Users can switch between events with a dropdown menu
Why: Using a component like a dropdown menu helps the user switch between which categories they would like to see
5. Score icon is highlighted with primary orange to draw user’s eye to important information
Why: Color is a useful tool that can help accentuate information when utilized properly
Iterations
Following the design presentations to the team, feedback was incorporated into the final round of iterations.
Add Lead button moved off of header and next to page title to gain attention
Score icon was redesigned into a chart format to make for a more dynamic UI
After team discussion, leads process was incorporated into the page so users will have information readily available
Tier selector and events dropdown changed to primary orange in order to match components with important information
Company Leads Page
Leads Overview Page
My Company Page
Sign In Page
Mobile Design
For the responsive design, the column layout was sized down from 16 to 4
All components were scaled down in size to fit the mobile column layout
The card was resized for mobile based off of design breakpoints
Challenges & Constraints
SmartConnX is currently in the process of acquiring a first wave of customers. Since the company doesn’t have any active users as of yet, the team hasn’t had the opportunity to test out the platform.
However, design feedback was provided by fellow team members and the designs are currently being used in active demos at tradeshows.
Results
Solution
After collaborating with the SmartConnX team, synthesizing their research, multiple rounds of wireframes, and rounds of feedback, the first MVP for the SmartConnX platform was created.
Impact
When businesses attend trade shows, it can be a hit or miss for generating leads. But with the SmartConnX platform, lead generation is simplified with an easy-to-use interface and innovative new features including connecting to your company’s CRM and scheduling events with your top prospects.
How I would continue
As a next step in the design process, it would be beneficial to start conducting usability testing with active customers
This will help determine which design aspects of the platform are working and what needs to be changed