syniverse-icon.jpg

Unified Dashboard

Syniverse Technologies offers technology and solutions to telecommunications and enterprises for IoT, mobile clearing and settlement services, voice and data roaming facilitation, fraud management software, and customer data analysis.

Helped Syniverse to overcome disjointed user experience, technology debt, and legacy systems. To develop a design system foundation and future road for all products.

 
 
syniverse-brand.gif
 
 

Unified Dashboard

 

Syniverse Technologies offers technology and solutions to telecommunications and enterprises for IoT, mobile clearing and settlement services, voice and data roaming facilitation, fraud management software, and customer data analysis.

Helped Syniverse to overcome disjointed user experience, technology debt, and legacy systems. To develop a design system foundation and future road for all products.

 
 
Embed Block
Add an embed URL or code. Learn more
 

Active and hands-on role, responsible for overseeing the daily activities of the team on design insights, team effectiveness, and client relationships.

 
 
 
 

Collaborated with Principal UX Designer on the broader project vision while guided the project’s style, methodology, collecting client feedback, and best practices to be shared with the broader team.

 
 
 
 

Syniverse is a bold, vibrant brand that connects companies, people, and communities — helping to reimagine possibilities while freeing partners up to focus on innovating their industries

 
 
 
SYN-Patternclashco-Brand01.png
 
 

Product Current State Analysis

 

Conducted an audit and report of the current products, brand patterns, and design language . While identifying challenges and opportunities within the organization and products.

 
SYN-Patternclashco-002.gif
 
 

Presented initial user interface concepts to key stakeholders before starting design sprints while set client expectations what key visual areas will be solved.

 
 
SYN-Patternclashco-003.png
SYN-Patternclashco-004.png
 

 Project Engagement Goal

 

Strategically improve the customer experience by focusing on the modernization of the client's product portals as the critical touchpoint, while creating a global design direction that will extend across Syniverse

 
 

Problem Solving Approach

 

Utilizing 3 design sprints, workshops, product flows and guidelines to reshape future Syniverse's products, ensuring the brand can leave its bold, innovative mark on users.

Understanding user behaviors, needs, and motivations through observation techniques, task analysis, and other feedback methodologies. Created User Archetypes based on different needs, priorities, and approaches users when using Syniverse's services and tools

 
 
SYN-Patternclashco-003.jpg
 
SYN-Patternclashco-006.png
 
 

Used post-it activities and workshops to create alignment between vital stakeholders to ignite collaboration, conversation, and accelerated decision making

 
 
SYN-Patternclashco-006.png
 

Dashboard Wireframes

 

Initial wireframes and interactive prototypes for dashboard and reporting served as a skeleton for future design.

 
 
SYN-Patternclashco-008.png
 
 

Iterative design using cyclic process of prototyping, testing, analyzing, and refining the product

 
 
SYN-Patternclashco-009.png
 
SYN-Patternclashco-010.png
 
 

Used high-fidelity to examine usability questions in detail and make conclusions about the user behavior

 
 
 
SYN-Patternclashco-011.png
 
 

Human-centered design research enabled the development of new solutions for Syniverse while continuing to engage customers and stakeholders throughout the engagement 

 
 
SYN-Patternclashco-013.png
SYN-Patternclashco-014.png
SYN-Patternclashco-015.png
 

Design Language

 
 
 
 
 

Documented and delivered a scaleable design system comprised of tokens, styles, components, patterns, and logic for development and future engagements. Backend framework was Angular Material delivering a lean, lightweight end-to-end solution for creating branded, systematic, and unified products.

 
 

Defining Visual Attributes

 
 

Color Baseline

 

Leading with Syniverse's brand purple convey confidence and knowledge that helps enable decision-making, and supported by both Syniverse's teal that elevates the design system and Syniverse's yellow adding bold energy and clear crisp actionability to identify call to actions and insights

 
SYN-Patternclashco-020.png
 

Typography Baseline 

 

Neue Haas Unica Pro is bold and contemporary, with a classic feel. Used as the primary font for Syniverse's marketing, it complements the unique characteristics of the brand logo. Used for headlines within the design system.

IBM Plex Sans is a grotesque open-source typeface that with excellent legibility for print, web, and mobile interfaces. Used for body copy, charts, and tables for maximum readability within the design system.

 
 
SYN-Patternclashco-018.png
 

Typography and Icon Colors 

 

Guidance on combining typography and color tokens including how to be applied to other screen elements, such as icons used to create clear, legible and actionability regardless of background-color

 
 
SYN-Patternclashco-019.png
 

Data Visualizations

 

Created guidelines on the design of visualizations and charts to craft readable, comparable and story-driven tools to help to enable users in the decision-making process. Along with micro interactions, mobile transformation and accessibility.

 
 
SYN-Patternclashco-021.png
 
SYN-Patternclashco-022.png
 

Components

 
 

Documentation

 

Created and maintained web-based style guides that integrates with design tools (Sketch, Figma, and XD) and developers (HTML, Storybook, and Jira).

 
 
SYN-Patternclashco-030.png
 

Client: Syniverse
Agency: frog design

Software: Adobe XD, Zeroheight, Airtable, Otter Audio, Illustrator, Keynote, and Trello

Roles: Visual Design, Research, Branding, User-interface, User-experience, and Interactive Design