Discovering and connecting a global community of agencies to grow your business
Project Description
As a response to current services for creative agency networking, I organized and carried out a zero-to-one project for my final thesis to design a new speculative system. Tandem is a directory to help businesses find marketing agencies that can expand their online presence to reach in-market audiences.
What I Learned
During the 2020/21 Global Pandemic, this thesis project was a way for me to develop my skill in communicating effectively on digital platforms by conducting weekly presentations on Zoom. It was also a project for me to explore new avenues of design thinking and to expand my experience in designing B2B products.
My Role
Research Designer, Product Designer for a solo project
Duration
12 weeks
Recognitions
Special thanks to design mentor and creative director at Catalyst Workshop, Adam Rallo.
"...Refreshing to see a design student take an atypical approach..."
-Kyle Hardtman
Creative Lead at Cadillac Fairview
"Her research and understanding of the targeted industry segment is exceptionally deep"
-Marcel Huszar
Art Director at BMO Financial Group
Background
Behind the Project
Initial curiosity
Before starting this project, I wrote a research report comparing and analyzing commonplace designs for B2C and B2B digital platforms. In this report, I asked questions like:
What examples come to mind when you think of B2C and B2B platforms? What are their pros and cons?
What are differences in designing for B2C versus B2B?
How do you target consumers versus businesses? How are their goals different?
What do consumers and businesses look for in an application and how do they find them? What systems are they used to?
For this speculative design project, I decided to further study B2B buying behaviour by researching and designing how businesses discover and hire marketing agencies through online directories.
Project Management
Designing a Schedule
Base Structure
I broke down key sections of this project using the double-diamond structure to clearly define key goals throughout the exploratory phases (divergent thinking) and the focused action phases (convergent thinking).
For this project, I decided to narrow the target audience to focus on E-commerce business'. I interviewed 10 key stakeholders with the following objectives:
To critically evaluate user’s previous experience and or perceived challenges with company expansion.
To understand the challenges faced when communicating with third-party companies.
To gain insight on their criteria for finding a partnering company that matches their needs.
Results
The users identified many factors that affected their level of success, such as obtaining sufficient cashflow, supply chain communication, timing, the effects of greed in partnerships, risk management, and the value of trust through communication. Let’s take a look at how these issues appear on the fictional client, Jacqueline.
Problem Scenario
Jacqueline is the owner of Whalar, an Australian fitness brand that wants to reach Canadian fans
Jacqueline’s goal is to expand her Australian-based business into the Toronto market and diversify her target audience. She sees potential for growth but wants to know if there is demand for Whalar's services in Toronto before jumping in.
How might we help E-commerce business' like Whalar efficiently search for agencies that are a successful fit for their expansion goals and are within their set constraints?
Current State Journey Map
The first objective was to map out Jacqueline's current process of hiring third-party agencies and note opportunities to address her pain points.
PAIN POINTS
Jacqueline wants to partner with the right agency but doesn’t have the time, experience, or legacy in Canada that she had in Australia
Whalar is an unknown company in Canada and consumers are less likely to try new products without seeing positive reviews
Jacqueline doesn’t have connections to trustworthy agencies in Canada
Competitors have the upper hand by already having established roots in Canada
She wastes a significant amount of time going through each agency’s website
Jacqueline is not tech savvy and has trouble streamlining her work
She finds it challenging to search and discover a wide variety of agencies
Results
The results from the user research demonstrated that there were 2 major areas for improvement:
Need for recommending trustworthy matches that related to the user
Need for streamlining website research
Product Solution
Tandem helps you grow your business by matching you with the right marketing agency
Tandem is a digital directory that helps businesses like Whalar find and partner with trusted marketing agencies.
Tandem uses a project-based format to recommend and showcase agencies that have successful experience on projects like yours so you can rest easy.
Product Thinking
Develop the Design
Compare Existing Apps
I conducted competitive analysis on 3 design networking platforms to research the project-based aspects I would utilize in Tandem. I then did a deep-dive into 3 marketing agency directories to study the pros and cons of their design structure.
I referenced competitor research and brainstormed a list of features that was then organized using MoSCoW’s principle. I saw the opportunity to use Hick’s Law to define their priority levels and to reduce information density.
I then mapped out how priority features would interact in relation to other components and pages using flowcharts.
The visualization stage started with creating wireframes based on the flowchart diagrams. I then developed interactive prototypes to challenge the design using user testing strategies.
Wireframes from flowchart diagrams
An example of design iterations from personal assessment and user testing feedback
Interaction and UI
User Experience Design
Problem Scenarios
In the iterative design stage, I conducted 2 sessions of task-oriented usability testing and post-test interviews on 4 participants. After each session, I reviewed the testing results and evaluated if my designs were providing a better user experience to the current workflow. Here are 4 problem scenarios that showcase this process.
SCENARIO 1
Discovering Marketing Agencies
Problem: From a returning user's POV, how might they benefit from using the explore page? How could we drive user interest while addressing their challenges in discovering agencies with related experience and skill? I needed to account for users that already had specific requirements in mind and users that wanted to explore new opportunities.
Solution: I customized the discovery page by listing recommendations that matched user's previous search and filter history while also suggesting locations and agencies that aligned with similar businesses. Tailoring recommendations to user's specific needs improves its credibility. I showed this by including features such as:
Headings with suggested services based on previous searches
Reasons behind recommending a location
Case studies with relevant experience to the business
Mobile Consideration: I made sure to account for browser navigation systems on phones by repositioning Tandem's navigation along the top to reduce icon clutter.
Problem: How might I gather user data in order to recommend agencies with relevant experience? How might a user benefit from providing a detailed description of their business? What would the scenario look like?
Solution: By reviewing the journey map, I was able to see that communicating project details early on would help to reduce back and forth questioning between parties. I took this opportunity to design a form that asked questions about the company and project goals when a user first contacts an agency. The information on the form could then be saved to a profile, allowing users to reuse the same content and also providing Tandem with data about the user to make personalized recommendations. This design simultaneously solved a user problem and a logistical problem.
Process of contacting an agency
Form information auto-saves to a profile
Basic Info
Requirements
Company Details
Completed Form
SCENARIO 3
Filtering and Sorting Agencies
Problem: During user testing, I came across a stakeholder that had trouble using the filter feature. After prompting for further thoughts, they felt that as a user without a specific goal in mind, it was difficult to keep tabs on the new changes they made because the filters were hidden. I realized that the filter and search features needed to be more prominent on the page because they were major navigation systems.
Solution: Interviews revealed that users tend to conduct a general search before applying specific filters. As a result, I decided to separate the search and filter as individual block elements that followed the user's intuitive flow. This design choice helped users manage search results while exploring a variety of agencies and also allowed space to add a filter system for the search feature.
Problem: For users that aren't tech savvy, how might I streamline the process of researching agencies? User research demonstrated that a significant portion of time was dedicated to exploring agency websites to read about the company and their previous work through case studies. I asked myself, how could I make it easier for the user to skim information?
Solution: After comparing user behaviour on desktop and mobile screen sizes, I realized that users overall preferred scrolling as the primary interaction on all devices. As a result, I utilized the screen real-estate on desktops to design the agency profiles as a single scrollable page assisted by a page navigator.
Mobile Consideration: I saw an opportunity to use Progressive Disclosure to re-structure the workflow on mobile screens because users were comfortable navigating multi-page layouts on hand-held devices. This breaks up the 2 page set-up on desktop into 4 stages.
Helvetica Neue was chosen as the display font due to its classic and well-recognized design. It maintains its reputation for professionalism while adding variety using its new bolded weights, improving its visibility and accessibility.
Hind was used as the body text because its dimensions and visual design aligned well with Helvetica Neue. It maintains great readability at smaller sizes and has a wide variety of weights available.
The primary palette was designed to evoke feelings of professionalism by using shades of a navy blue, the colour of trust and importance. The secondary palette used vibrant hues to draw attention and to help with recalling information.
Tandem's user-friendly design and adaptable interface makes it a great product for starting e-commerce stores and tech savvy businesses alike.
Not only is it visually intuitive, but its matching capabilities helps users see how suggested marketing agencies would envision projects like yours, resulting in lasting impressions and a satisfying end product.
