Presentation Bundle for SaaS Solutions
B2B Sales Tool.
WayMore & Routee are two B2B business units of AMD Telecom, specialized in marketing automation flows and omnichannel communication.
The Project
The company wanted to create a personalization B2B tool that would combine the strengths of Routee and WayMore. A sales rep from Routee or WayMore will insert a prospective customer's e-shop URL into the dynamic bundle presentation tool. The dynamic tool will crawl the customer's eCommerce website to highlight the most suitable WayMore and Routee's communication and automation services that can increase this eshop’s performance.
The Role
UI/UX Product Designer - Frontend Developer
Design Conceptualization
Information Architecture
Wireframing
Visual Design
Prototyping
Custom Code Implementation
The Challenge
The challenge was to create a dynamic, multi-level website that personalizes all SaaS services of both brands. When a salesperson types an eshop’s URL, the website will automatically filter the specific communication tools that this eshop needs to boost its performance. A unified website was needed to highlight the flexibility of the various products as stand-alones or as a services package.
The Solution
Design an intuitive unified user interface (UI) addressing eCommerce businesses. Create a clear content structure for each SaaS service that will act as a before-and-after comparison board. Design creative and easy-to-understand visuals that highlight the personalization functionality of each SaaS service provided. Place the benefits of each SaaS service in the spotlight, to facilitate the sales team’s efforts.
The Process
The first step was to perform a thorough research and analysis for each service of both business units, to define the company’s target groups and establish the design strategy. I applied User-Center-Design methodology, created the site map, the user journey, the wireframes and structured the content hierarchy.
I continued with the visual design and prototyping (color palette, typography, images, visual assets etc). In order to make it easy to manage content across the whole website, I created a set of blocks that can be used interchangeably. For each service, I designed use cases and visuals, highlighting before and after comparisons.
As a part of my development process, I created components and visual assets that are based on the information contained in the dynamic website's meta tags and metadata. My next step was to develop a clean code structure in order to build consistent and reusable CSS3 rules to implement well-structured HTML5 pages. I implemented the JS code to customize the meta tags functionalities, the animation, and the interactions.
The final step was to perform usability testing (e.g., A/B testing, internal surveys) on the final version of the project, to fine tune the website and ensure its optimal performance.
- Research
- Analysis
- Site-map
- User-Journey
- Wirefarame
- Visual Design
- Interaction Design
- Prototype
- HTML5
- CSS3
- JS
PROJECTS
Below, you will find a few examples of recent work that I have designed and developed.