Marketing Asset Generator
Client: mdg, a marketing firm specializing in trade shows and conferences
Challenge: Redesign a white-label custom marketing assets generator to be more usable by conference exhibitors (to mid-fidelity wireframe level)
Role: Contract UX/UI Designer
Timeframe: A 1-week sprint in June 2022
Team:
Erin Lee, VP of Digital Marketing Strategy
Ben McRae, Senior Director of Web Strategy
Roberto Hinojosa, Assoc. Dir., Project Management
Ibukun Okusanya, Senior Web Developer
Process: Discover, Define, Ideate, Iterate, Handoff
Discover
I was referred to mdg through a former boss, and with my background in event production, it felt like a natural fit. Our collaboration began with a discovery meeting where the Sr. Director of Web Strategy walked me through the existing solution and the VP of Digital Marketing Strategy talked me through the goals and project brief. They sent over all the necessary documentation, plus some competitors’ solutions for my further investigation.
A Need for Dually-Branded Ads
Part of mdg’s Partner’s in Promotion Toolkit, this product lets trade show exhibitors download customized marketing assets for event promotion. An exhibitor can come to the web app, confirm their information (name, contact, booth number, etc.), and generate assets like social media ads, email templates, and landing pages with the trade show branding and individual exhibit info. Here’s the original product I was given as a starting point.
Example downloadable ad with event branding (MINE) and exhibitor info (star logo).
Example Downloadable AdPrimary Users: Trade Show Exhibitors
I asked to speak to some of the users, but with our timeframe being only a week, my collaborators provided me with some user anecdotes and feedback they had received instead of user access. The users are trade show exhibitors from many differing industries.
Focus on Desktop Usability
Based on the data, they wanted a desktop-focused version that could be mobile browsable. My collaborator on the development team was quick to answer specific questions as they came up later on, and we set up a meeting for halfway through the project to make sure I was within scope and constraints.
Define
The Problem
From talking to exhibitors and show runners, mdg had clearly determined a need and desire for a product like this. After thoroughly looking over the current solution, seeing what the competitors were offering, and asking some more questions I boiled the problem down to this: users were unclear what the product was and how to use it because of poor information architecture, content strategy, and interaction design. In short, users were wondering:
What is this? 🧐
What can I do with it? 🤔
The Goals
The goals from mdg were pretty simple:
Make it clear how the app can save them time
Be able to repurpose for a variety of clients (white-label)
Modern, clean look
Ideate
I started each section with pen and paper and moved the best ideas into Figma. My guiding principles as I worked were:
Show what’s actionable
Asking “what does the user want to see here?”
Information Architecture Above the Fold
It’s imperative for users to know what a site is about within seconds of landing there. The original product had a few issues.
ORIGINAL Product
Final Wireframe
Big, bold heading tell users where they are and what this app is 💡
Vertical nav is more scannable and tells users where it will take them (down the page) 👇
Showing an image of what’s possible with the app says more than words 🖼
Contact info (which almost always pre-populated) is hidden until users need it, to make a correction 👏
In the original product users were confused as to what this tool could do for them. 🥴
Digital Ads
Again the hierarchy is hard to follow. The images are out and on display which is great, but there are too many choices presented at once and it takes some time, scrolling, and concentration to figure out how to delineate amongst all these choices.
ORIGINAL Product
Non-Final Wireframe
On the Right Track
One choice at a time drastically reduces cognitive load for users. mdg’s data showed that users were coming with a particular size in mind, so I started with that 🥳
Larger preview space allows users to see their options before downloading. With so many options it was important to let users compare succinctly, without scrolling 🐘
Not Quite Fitting Constraints
At our mid-week checkin-in, the engineering stakeholder gave me some new information about how the product works—all of the graphics and text combinations were already pre-set, chosen ahead of time by their graphic designers. He suggested I combine them into a section called Choose Creative.
It’s hard to show here, but imagine each of these four sections taking up most of your screen one at a time. When you’ve scrolled through these four, there are only five more to go! 🤯
Final Wireframe
I worked through several options, not wanting to give up on the progress of letting users make one decision at a time, and landed here:
Fits contraints ✅
Shows available options at a glance 😎
Still lets user make one decision at a time 🔥
Other sections of the app went through a similar transformation, and if you’re still reading, email me, and I’ll tell you all about it!
Handoff
Data-Informed Design Decisions
First, I presented the wireframe of all seven sections to the VP and Senior Director of Web Strategy. The VP had a few questions as we went through, but they were mostly things the Senior Director and I had already discussed and made solid, data-informed decisions about, which she was happy to accept.
Reusable Engineering Effort
When it came time to implement my work, I met with the Project Manager and Senior Developer who would be doing the engineering. I walked them through the wireframes (on a recorded meeting), and the developer was excited to see that some of the engineering effort for the Digital Ads section (above) could be re-used on the Social Media section, should they choose to do the overhaul I suggested. Again, feel free to email me if you want to hear more about that!
After the meeting, I sent them a Figma file with annotations noting everything from best practices on hint text to strategies for ensuring visual accessibility, even with user-submitted colors in the white-label back end.
Retrospective
What I Learned
I didn’t have any complaints from them at the time of handoff, but thinking back through my process, I should have been better organized with things I wanted to be more clear about for the dev team and/or best practices that would safeguard visual accessibility during the set-up of any particular white label color scheme.
Looking into the Social Media section especially was a good exercise for me in giving the stakeholders options at varying levels of commitment. I presented both (a) small ideas that wouldn’t take much effort for the dev team, but that could improve the product a little bit, and (b) ideas of increasing complexity all the way up to re-thinking a whole section of the site.
What I’d do differently
I would have loved to have confirmed or denied my hypotheses with more user data, qualitative or quantitative, from users during my initial discovery phase of the project and throughout the project where necessary. In this case, mdg thought they were going to be implementing my solution for a client over the coming weeks (not several months later as it ended up). And given the short timeframe, they chose not to give me access to users, but said there may be an opportunity for that in the future.
Thank You
Thanks so much for checking out my work! I’d love to connect and am always open to feedback. Feel free to send me a note!
READ ANOTHER CASE STUDY
Water & Light
A website redesign for an
education focused non-profit.
Analog Man
Redesigned shopping and checkout experience