Project Overview

Beyond4, a CRM platform with a focus on restaurant marketing, was my first “zero to one“ product to design. The application allowed companies to create multi-channel campaigns to send consistent messaging and creative via email and SMS while tracking performance of direct mail, landing pages, and digital banners. Campaigns could be customized to programmatically target specific demographics within a company’s customer base.

Team

I was the sole product designer on the team, which also included the owner of Pictoric Media Group, a software architect, project manager, and Peruvian web development and QA teams.

Goals

• Create a CRM app for businesses to use to build marketing campaigns across several media: email, SMS, DMs, landing page conversions, and more.

• Ability to create groups of consumers based on demographics gathered through email and SMS subscriptions, member rewards, etc.

• Ability to generate reports to review campaign performance.

• Ability to generate a peer analysis for comparison against industry peers.

Achievements

• Created algorithm used to the peer analysis feature.

• Application was sold for $275k before user base grew beyond initial onboarded clients.

Tools

• Photoshop, Illustrator, After Effects

Project Details

Background

Beyond4 was the vision of Pictoric’s leadership. When I was brought on board, he essentially gave me the keys to concept features for the tool and to design the entire application. I worked closely with cross-functional teams, such as a software architect, software engineer, and a Peruvian development and QA team to bring the concepts and designs to life.

• Goal: create a feature-rich tool for restaurants and other businesses to create marketing campaigns targeting specific groups of customers while tracking performance.

• Users: restaurant managers, marketing team members.

Discovery

It was decided to create three primary segments to the application: customer groups, reports, and ad campaigns.

Customer groups were needed to target specific audiences based on member or location profiles. Members could be filtered based on brand association, date entered into system, demographics such as age, gender, location, and behavioral and guest analytics. Locations could be filtered by brand, location, subscriber and campaign events, and financial activity.

Reporting views were to be generated through data pulled from the marketing campaigns to display charts and tables of performance of various metrics.

Marketing campaigns were to be created within the tool to allow users the convenience of carrying a campaign concept through multiple channels. Campaigns could include emails, SMS messages, direct mail tracking, and landing page and digital banner performance.

• Goal: approach the application with three primary parts: audience targeting based on created customer groups, reporting with customizable views, and ad campaign creation.

• Key requirements:

  • Customer groups: need to be created based on member profiles and associated locations of the business.

  • Reporting: need to have the ability to create reports based on member stats, campaign performance, location performance, and more within a specific time frame.

  • Marketing campaigns: need to be able to create and send campaigns for email and SMS, and need to be able to track performance of direct mail pieces, landing pages via unique URLs, and digital banners.

Concepts

The team worked together to develop concepts for each of the features that would make up the three primary tools within the application: customer groups, reports, and campaigns.

I was responsible for working through processes of the campaign creation concept and the member groups concept. For campaigns, I developed a method to allow users to build a single campaign with multiple channels. And for the groups concept, I performed research and wrote documentation for the available methods in which we would create groups from member and location profiles.

• Challenge: create a user interface and process in which a campaign can contain multiple communication channels. Create a user interface and process for creating target audiences based on demographics, locations activities, and other data.

• Solution: campaign briefs were created to provide the structure for campaigns with multiple communication channels. Target audiences were created for each campaign by using member groups or by using filters during campaign creation.

• Personal approach: creative ideation through writing out concept requirements and laying out user journey maps.

Wireframes

Wireframes were created for each feature of the three primary tools of Beyond4. This step was used to define user interface layouts for the screens needed, to iterate on these layouts, and begin filling in forms and other content.

• Process: create well-defined UI layouts for each tool within Beyond4.

• Personal approach: use Photoshop to create high-fidelity wireframes to sort UI layout, forms, and other content.

Design System & Visual Design

The direction for the visual design of Beyond4 was a bold, modern look with dark shades of blue to create dark UI focal points with high contrast. Greens were used to pull attention toward actionable interactions.

• Design system: I created and maintained the design system and built a component library for a cohesive style across the application. This was done in Photoshop as Figma, Adobe XD, etc. was not available at the time.

• Typography: Lato font was selected for its extensive weight variations as well as it being clean, modern, and easily legible. Source Sans Pro was used as a complimentary font, usually for smaller text in tables.

• Colors: the color scheme utilizes a light shade of blue-gray for the background, and deep shades of blue for the navigation and non-table panels. Greens were used for quick attention grabbing actionable interactions. Text was primarily white against the navy blue background or black within tables or against lighter background to meet contrast standards.

User Testing & Iterations

Testing at this point was performed primarily by the development and QA teams along with the software architect as development was taking place. Many calls were had between the software architect and myself, which not only improved user experience, but really sharpened my personal skills with mind-melting brainstorms.

• Users: testing was performed by the development and QA teams, as well as the software architect.

• Design iterations: designs were updated based on feedback from user tests.

Final Thoughts

When I started on this project, I only had one other UI/UX design project under my belt and felt like I was thrown deep into the wildfire. I previously mentioned the mind-melting brainstorms between the software architect and myself. Those calls that lasted hours and hours really prepared me for what I consider to be one of the more important aspects of product design, and that’s to be able to put yourself in the shoes of not just one type of user, but many types of users. Thanks so much Sam!

The application received overwhelmingly positive feedback from leadership and initial set of clients. The intuitive interface, purposeful visual design, and comprehensive features were highly regarded, validating its potential to meet the needs of its clients. Its initial success was enough to find a new owner and sold for a good amount of money. However, it was sold before the user base grew beyond its initial set of clients.

I truly enjoyed working with everyone on each team and learned so much through user test call, iterative design processes, addressing user feedback, and leading creative presentations.

Final Visuals

Merchant Mobile App