Dashboard on the left, Ad dialog UI on the right
Mosea is designed to simplify group transfers. The company is based in Toronto, where they do not have Venmo, CashApp, Zelle, or the like for a number of reasons. Their target users are university students, to help make allocating and managing the funds for group events easier. The company is looking to grow their business by implementing an ads program and asked me to design a desktop B2B platform for mobile and desktop advertising. My tasks were to research and create a portal experience that would be used to publish and track ads within Mosea, and to generate mockups for ad placements within the platform itself.
After researching the internet advertising market and dashboard portal experiences, I took a user-centered design approach to create a product that is simple and scalable, something that would grow as the company uses it, as well as optimal target locations for ad placements that would help grow the business.
During the 4-week assignment, I worked on primary and secondary research, ideation and sketches. Using existing brand assets, I designed high fidelity mockups and built a prototype that was put through a round of usability tests.
01 – Research
I looked into Facebook’s Business Account experience, specifically their advertising portal dashboard, to get a feeling of the kind of environment I’m working in. I conducted user interviews with anyone that uses Facebook’s ad portal or has used it in the past. The goal of the interview was to discover how a user feels when they’re engaged with the tool, what is important for them, what do they like/dislike, and their goals behind their actions when using the tool.
Can be confusing to learn to use the tool, if not versed
Constant updates can be frustrating to learn the navigation of the UI
Without a proper plan or goal, can be difficult to achieve desired results
Drive up website traffic to increase e-commerce sales
Educate users to maintain engagement
Bring traffic to physical location
Promote value-based content
Monitors ad engagement to see the feedback received
The amount of money in the budget determines the length of an ad campaign
Depending on the nature of the business, an image may be best over a gallery
The summarized notes from my user interviews are as follows: do not make the user think too much or too often, there are more than one goal behind an ad, and be attentive to the success an ad generates, they want to know why it doesn’t work and how to fix it for the next round.
02 – Ideation
Breaking up the ideation into two areas: 1) locations for ad images within the mobile and desktop platforms, and 2) creating the portal experience for the advertisers, from the dashboard screen to publishing an ad campaign and tracking the metrics.
Sketches – Ads
Below are some location concepts for ads when viewed on mobile. My research into optimal placement and sizes for ads on a mobile platform led me to ideate various solutions. Integrating ads within organic content yields the best experience for users.
Sketches – Dashboard
Below are sketches of the ad portal dashboard and the ad publishing UI. My ideations were focused on addressing a major user pain point of, "Constant updates can be frustrating to learn the navigation of the UI" from my user interviews. I wanted to create an experience that felt familiar to those that have used a popular ad portal experience (eg, Facebook).
03 – Design
At the start of the project, I was given organized, stocked, and flushed out Sketch files, complete with iOS and desktop assets, with an accompanying brand style guide. These resources helped me create solutions quickly while seamlessly inline to the brand’s aesthetic. Mosea has a strong color palette, with bold yet minimal pattern elements that was great to play with.
Below are high fidelity mockups of where ads would be placed within the mobile app. Various sizes and placements within the platform's feed yield optimal experience from user's engagement. An ad with the same size as the organic content, as well as rectangular banner ads posted on top and within the feed, yielded the best experience for user's engaging with the platform.
Ad Portal Dashboard
Below are screens of the ad portal onboarding and dashboard. From a business/marketing user standpoint, my usability testers voiced that they would expect a separate log-in link from those that are the primary users (university students) of the app. A separate link was created at the bottom of the main page to differentiate between consumer and business log-ins.
Below are screens showcasing the dashboard, where the user can view and assess the results from a published campaign. A menu on the left side helps keep the user's attention on the content with easily identifiable icons. The colors used are part of Mosea's brand colors, to further strengthen the brand's connection to the users.
Publishing Ad Campaigns
The core of this assignment was to build the experience of publishing an ad through Mosea's platform. The user can choose mobile or desktop locations, the campaign's duration, how much money to spend, etc. Using colors to highlight selected choices keeps the user informed. As the user interacts with the centered content, the side menu collapses to showcase only the icons.
04 – Test
One round of usability tests was conducted, with two participants agreeing to take the test. The ultimate goal of this test was the process of starting, setting the parameters of an ad, and publishing it as if it were an actual scenario. The testing process allowed the participants to express their thoughts on the UI as a whole, through proper display of information, “what’s missing”, to further identify areas that need an experience optimization.
The participants both were unsure of where to sign in from an advertisers perspective. They didn’t feel the regular “Sign Up/Sign In” button wasn’t for them; both felt they wanted a business log-in portal, separate from the regular portal. The desire to see ad campaign goals listed and how the effectiveness of the campaign contributed to said goals was expressly stated as a pain point. “How do I know this campaign accomplished anything?” The ability to change the way the data is visualized was requested. At the time of the test, the Audience tab was not flushed out. Both participants requested to view/create/edit/save audiences. The response to the UI was that it was “clean and effective” at focusing on what the user wants or is doing.