525 Creative

Create Everyday

Drupal 8 UX design and development

Role:

UX Design / Front-End Development

Project Duration:

8 weeks

Goals:

Overhaul of the full web experience

  • Deliver French site by international launch of Business Planning Cloud and opening of the French office
  • Develop mulitiligual Drupal 8 proof of concept starting with France, and quickly turn around to rescue JP site
  • Set solid foundation for migration of Drupal7 sites to Drupal8 (US, UK, ANZ)
  • Pass all tests for translation, localization, and migration requirements

Improve design and user experience

  • Visually channel the brand positioning, strategy, and personality
  • Create UX with the least amount of friction
  • Reduce the amount of space/time between a visitor and their objectives (business objectives)
  • Make our presence feel more human and alive

Responsibilities:

  • UI / UX design
  • Front-End Development
  • Project Management
  • QA/Testing
  • Gathering requirements
  • Scope Definition
  • Prototyping
  • Deployment

Impact:

  • Improved demand generation, driving 30% more leads
  • Reduced cost and dependency on external resources
  • Consistent brand and user experience for company sites
  • Custom Sketch UI kit. Improved UX review process
  • Defined quality target and standards
  • Developed solid foundation for migrating Drupal 7 sites to Drupal 8

Background

Adaptive Insights is a customer-experience brand. Customer-centricity has been a through-line since the company’s founding. We needed to double-down on putting people (visitors, customers, partners) at the center.

Where customer experience shows up:

  • Ability to listen to customers and integrate their POV in our products and thinking
  • Intuitive, easy-to-use products
  • Commitment to customers’ success and lengths we go to solve customer problems
  • KPIs
  • Belief in better future for your users, and our courage to do what’s necessary to get them there

Identified Personality Traits:

  • Bold (Committed, confident, courageous, innovative, expert, visionary, respected)
  • Optimistic (Motivating, continuous improvement, reliable, influential, positive)
  • Helpful (Trustworthy, practical, accessible, reliable, caring, empathetic, warm)

Competitive Landscape

Centage
Workday
SAP
Anaplan
Prophix
Oracle EPM Cloud

These keywords are critical and will stand the test of time. They sat at the heart of everything that I’ve designed and built for this project.

  • Fast
  • Findable
  • Usable
  • Useful
  • Clean
  • Language
  • Typography
  • Narratives
  • Credible
  • Accessible
  • Desirable
  • Valuable

Who’s doing a good job at this?

Intercom
Stripe
Zendesk
Hubspot
Atlassian
Slack

How do we do this?

Go back to the fundamentals

Design Fundamentals

  • Consistent Branding
  • Clean, legible, and readable typography
  • Engaging content that drives emotional experiences
  • Consistent messaging, tone, and voice
  • Clear visual hierarchy and layouts
  • Better use of whitespace
  • Defined UX and design guidelines
  • Defined quality target for imagery and video

UX Fundamentals

  • User-first mindset
  • Don’t underestimate and/or overwhelm our visitors
  • Simplified, linear user journey/flow
  • Decluttering
  • Conversational messaging
  • Intuitive navigation and menus
  • Color as a functional element
  • Contextual conversion pages
Homepage

In my research I found that most effective landing pages can be broken down into modular design patterns

  • Header – Logo and navigation
  • Hero with bold claim – We are the best
  • Banner / Advertisement
  • Product features, capabilities and/or services
  • Product differentiation with screenshots and short copy – Here’s why we’re the best
  • Analyst / Expert reports – Gartner, Forrester, BPM
  • Customer quotes – Personal vouch and a human touch
  • Newsletter / Sign up / Contact – We want to help you
  • Keep in touch Footer – Hyperlink farm

Wireframes

For speed and efficiency I created the UX designs with Sketch leveraging an existing custom UI kit that I’ve created for Adaptive Insights. The interactive prototypes were created with InVision. This design process allowed us to quickly gather requirements, rapidly iterate through the designs, and capture feedback from key stakeholders. The typeface was intentionally set to Comic Sans to replicate the look and feel of Balsamiq wireframes and to prevent the internal customers from getting distracted by visual design elements.

View the InVision Prototype
Homepage
Product Page
Customers List Page
Customers Page
Resource Center
Resource Center Alt

Hubspot Development

Role:

Producer / Developer

Project Duration:

12 weeks

Goals:

Migrate our marketing automation to HubSpot

  • Move emails from Eloqua to HubSpot
  • Use technology that’s responsive at its core
  • Adopt a CMS that’s flexible and allows users to create any design imaginable
  • Allow users to spend more time on quality copy and conversion funnels
  • See a higher ROI on inbound marketing campaigns

Responsibilities:

  • Audit preexisting platforms
  • Build email templates that optimized for both desktop and mobile clients
  • Create responsive HTML emails that provided consistent results
  • Develop library of common UI patterns for faster builds
  • Extended branding with SASS variables that eliminated the need for repetitive, time consuming CSS
  • Custom module development (HubL)for emails and pages
  • Build workflows, best practices, and processes
  • Train users how to use the platform

Impact:

  • Emails – 40% increase in click-through rate (CTR) over the preexisting designs
  • SEM landing pages – new variation consistently beat the control in the 8-14% range
  • 3rd party landing pages – new SEM LPs resulted in a 57% lift in conversion rate on the demo offer, and a 23% lift in conversion rate of HVLs
  • Reduced cost from building internally
  • Reduced reduce page build time and human errors
  • Enabled cross-functioning teams to produce their own campaigns with little-to-no HTML skills

Email Templates

Creating responsive emails with Eloqua’s design editor was very time consuming and prone to human error. Adaptive wanted to get away from complex table markup and inconsistent results. Working closely with Marketing Operations Manager, we identified the requirements, the main structural components of the email templates, and the order of priority.

I developed an MVP using Zurb Foundation for Emails. Zurb made sense because of it’s responsive grid, included UI patterns, and eliminates the need for repetitive, time consuming CSS. It’s also backed by the ZURB Stack, a Node-powered build system with HTML templating, Sass compilation, image compression, and inlining.

HubSpot Email Layout 1
HubSpot Email Layout 2
HubSpot Email Layout 3

Custom Module Example

After the proof of concept was developed I transitioned to building out the email templates using modular design methodologies. The main structural components for the emails were built as global custom modules, where the code can be contained and maintained while exposing only content fields and options to the authors. This approach allowed the templates to be scalable, flexible, and easy to use for both front-end and back-end users.

Custom email module example

HubSpot Template Anatomy Using Custom Modules

The problem: Each paid search landing page needed to be hand-coded, version controlled, localized, and required more than one resource to build, test, and deploy. The solution: Extend the modular design approach from the emails to the landing page templates and utilize all of HubSpot’s awesomeness.

I started this part of the project by creating mockups with Sketch, using InVision to capture feedback from the key stakeholders and to iterate on the designs. Once they were approved I created a library of custom modules in HubSpot that could be easily dragged and dropped onto the canvas giving the end-user the flexibility to create their own templates like Lego building blocks.

Alt Text

Landing Page Designs Using Custom Templates

Here are a few examples of what’s possible by adding some modifications to the custom modules.

Landing Page A
Landing Page B
Landing Page C

Building a Design System

Role:

Project Lead / UX Design / Front-End Development

Project Duration:

4 Months

Goals:

Create and define a scalable design across all platforms, to unify the visual web presence.

  • Scalable and modular architecture for CSS
  • Mobile-first responsive front-end framework
  • Well structured semantic HTML that is meaningful and easy to read
  • Custom utility class library that eliminates distraction for designer, developer, and content publishers

My Responsibilities:

  • Audited existing UI and code base
  • Defined critical user journeys (the designer, the developer, the marketer, and the customer)
  • Validated user journeys through Google analytics insights
  • Created custom UI kit with Sketch based on Bootstrap’s CSS framework
  • Divided stylesheets into modular and reusable Sass partials
  • Automated and enhanced workflows with Gulp.js
  • Standardized naming conventions for common interface language

Impact:

  • Enabled designers and developers within marketing to create, modify and iterate in a quick and cost efficient manner
  • Created cohesive theme extending across our digital ecosystems
  • Aligned on taxonomy
  • Increased design and development efficiencies and operational rigor
  • Well designed and performant user experiences
  • Extended branding and identity to all web platforms

Background

Adaptive Insights was up against a challenge that many design organizations face; the ability to scale in the face of rapid growth. In this case, Adaptive’s web experiences were getting pressure tested under marketing’s needs to serve growing demands of the business. Pain points were apparent across UX inconsistencies, increasing time spent on simple design updates, and a high dependency on external resources. The team was reactive versus proactive and didn’t know how to get out of this vicious cycle of chasing ongoing bug fixes.
Colors Typography Elements

Example of Design System Elements In Use

Landing page example using the design system

Code Examples

Code Example of Styles

Example of the Sass being structured to follow the Atomic Design Methodology

Code Example of Gulp.js

Example of some the Gulp tasks to handle error validation and asset optimization.

DTT Branding and Identity

Role:

Visual Designer

Project Duration:

3 weeks

Goals:

  • Logo design
  • Create look and feel for business branding
  • Cohesive and consistency for core brand elements
  • Typeface and color palette selection

Responsibilities:

  • Gathering requirements
  • Project Management
  • Scope Definition
  • Create brand guidelines
  • Organizing, packaging, and exporting files in all formats for creative use

Impact:

  • Created trust withing the marketplace
  • Improved response rates, boosted sales, market share and revenue
  • Increased customer loyalty towards the services
  • Improved brand perception
  • Positive impression of the company amongst consumers

Color Exploration

Color Palette - 1
Color Palette - 2
Color Palette - 3
Color Palette - 4
Color Palette - 5
Color Palette - 6

Logo Exploration

We evaluated the current industry landscape to find visual techniques to differentiate DTT as a new brand. We pulled inspirational reference and created logos that span a range of style and tone. Avoided serif fonts as they felt too traditional and editorial. The following logo options use open source Google Fonts, with custom modifications.
Evaluating Design
Mood Board

OPEN SANS

https://fonts.google.com/specimen/Open+Sans
Option 1
Option 2
Option 3
Option 4

JOSEFIN SANS

https://fonts.google.com/specimen/Josefin+Sans
Option 5
Option 6
Option 7
Option 8

NUNITO

https://fonts.google.com/specimen/Nunito
Option 10
Option 11
Option 12
Option 13

Round Up

Logo Slide - 21

Logo Recommendations

Identity Mockup 1
Identity Mockup 2

Style Guide

Core Brand Elements
Primary Logo
Secondary Logo
Clear Space
Primary Logo - Color
Color Palette
Typography
Demonstration

Digital Meaning

As a consultant for Digital Meaning I managed workflow processes and provided design and front-end development services for clients including, Corodata, Corostuff, CollabNet, and App Annie. I juggled several projects concurrently, handled multiple deadlines, and prioritized multiple tasks under tight timelines. My responsibilities include pushing pixels, writing code, and putting out fires.
Pauline Kalil profile image
With Jabal, you don’t just get a UX designer and front-end web developer. You get a process improver. A doer, because he’s never sitting around waiting for something to happen or get assigned. He’s an effective, direct communicator, which can’t be underestimated when you have clients who don’t always know how to put into words what they really want. Our clients positively swoon at everything he delivers.
– Pauline Kalil, Chief Digital Marketer
DM Artboard - 1 DM Artboard - 2 DM Artboard - 3 DM Artboard - 4
Digital-Awareness-V3
Digital-Awareness-V3
Digital-Awareness-V3-R1
Digital-Awareness-V4-r1

Codepen for DM’s Style Guide

See the Pen DM Style Guide by Jabal Torres (@capitalJT)on CodePen.

Wireframes for Corodata’s customer dashboard

Dashboard 2
Dashboard 4
Dashboard 3
Portal Screenshot

Prototype for Corodata’s Customer Portal

View in the browser

Al Jazeera Arabic Design Language System

Role:

Lead Designer / Full-stack Developer / Project Manager

Project Duration:

3 months

Goals:

Set a strong thematic quality for Al Jazeera’s products while ensuring brand and code consistency. The Design Language System aims to establish a common language, make testing easier, save time and effort, and create a useful reference for the teams. Most importantly, the design language system will create a future-friendly foundation for our network to modify, extend, and evolve over time.

Responsibilities:

  • Project Management
  • Gathering requirements
  • UI / UX design
  • Prototyping
  • Full-Stack WordPress development
  • Custom post types development
  • Custom plugins development
  • QA/Testing
  • Deployment

Impact:

  • Improved consistency and clarity between design and development teams
  • Single source of truth for all branding needs
  • Fully customizable digital asset management system
  • Boosted digital productivity for faster project rollouts
  • Reduced cost and dependency on external resources
  • Consistent brand and user experience for company sites
  • Improved UX collaboration and review process
  • Defined quality target and standards

Background

Al Jazeera has a large number of properties in its ever-expanding network and is already managing a large ecosystem of mobile touchpoints. In modern connected services, a key success factor is the ability to connect the dots of the experience across multiple touchpoints, contexts, and users and to maintain a cohesive user experience that spans through screen sizes and contexts of use. When individual touchpoints are designed, developed and governed by disparate internal and external teams and partners, achieving a consistent, integrated and well-orchestrated experience becomes challenging. The purpose of creating the Design Language System was to ensure a consistent brand and user experience across the current and future digital ecosystem.

Wireframes

During the Content Strategy and Site Mapping phase, I interviewed designers, product managers, and engineers to gather their thoughts and feedback. I considered their productivity pain points while iterating on the wireframes. My goal was to build a centralized design foundation for a consistent brand within their online presence and digital products.
Al Jazeera Design Language System - Wireframe - Homepage
Al Jazeera Design Language System - Wireframe - Digital page
Al Jazeera Design Language System - Wireframe - Elements page

Client Mockups

Client provided mockup - Homepage V1

Homepage V1

Client provided mockup - Homepage V2

Homepage V2

Al Jazeera Design Language System - Detail Page

Detail Page

Al Jazeera Design Language System - Component Detail Page

Component Detail Page

Live Screenshots

The DLS is built on WordPress, using the StudioPress Genesis Framework. Semantic HTML5 elements, custom PHP includes and functions, Gulp for task automations, and JavaScript for interactive functionality.
Al Jazeera Design Language System - Digital Elements
Al Jazeera Design Language System - Digital Components
Al Jazeera Design Language System - Digital Resources
Al Jazeera Design Language System - Color Palette
Al Jazeera Design Language System - Typeface
Al Jazeera Design Language System - Imagery and Card Application

Concept: The Moving Frame

Al Jazeera Training Center

Role:

UX Design / Front-End Development

Project Duration:

3 months

Goals:

Improve the quality of Al Jazerra Training Center programmes and services. Make the site responsive and refactor the codebase to include design patterns from their design language system.

  • Deliver a website that will enhance reach, engagement, and revenue for training programmes, content, and services.
  • Deliver quality website experience that will help audiences discover, register, and interact with the Training Center through digital platforms.
  • Grow international customers of AJTC programmes and services.

Responsibilities:

  • UI / UX Design
  • Front-End Development
  • QA / Testing
  • Prototyping
  • Deployment

Impact:

  • Optimized page performance and load times
  • Improved visual presentation, consistency, and user experience
  • Increased registrations by 20%
  • Mobile-first responsive design increased percentage of mobile user adoption
  • Reduced bounce rate

Background

I was an advocate for user-centered design as a corporate vision and supported UX consistency across the brand portfolio. I collaborated with product managers, designers, and engineering to create effective UI and UX solutions that supported business requirements.

For this project I created low-res wireframes, hi-res mock-ups and developed front-end prototypes. Once the prototypes passed QA and gained internal stakeholders approval I worked with the platforms team to implement the templates and modules into their content management system.

Wireframes – Desktop

View InVision Project
Slide - 1
Slide - 1
Slide - 1

Wireframes – Mobile

View InVision Project
Sign In
New User Registration - Step 1
New User Registration - Step 2
New User Registration - Step 3
User Profile
Search
Instructor Profile
What We Do - Training
About Us
Success Stories

HTML, CSS, and JS prototypes

AJTC - Home
AJTC - Courses
Slide - News

Mockups

AJTC - Home
AJTC - Home
AJTC - Home
AJTC - Home

Mad Men Season 7 DPK

The first digital press kit for AMC’s series, Mad Men, transitioning from traditional print to digital. I transformed the physical press kit experience to an interactive experience utilizing PHP, HTML5, CSS3, and jQuery to create a responsive single page flip book style app. The build included video players and integrated analytics. The experience was intended to be shared with media, influencers, and with fans through social channels and the AMC site. Ultimately increasing awareness and buzz around Season 7.

Role: Served as client facing lead developer on creative, production and QA testing, working with AMC’s directors of platforms and online development.

AMC’s Tumblr for MMS7

Conceptualized dynamic advertising units for social for the premiere of AMC’s Mad Men season 7. Design based on final key art illustrated by Milton Glaser and use of gallery photography by Frank Ockenfels 3, working closely with Creative Account Executive. This was part of the digital marketing plan of a full 360 integrated campaign from outdoor, print, digital and television.

Artboard 1 Artboard 2

Interactive Promo Concepts

img-thumbPromo Concept 1
img-thumbPromo Concept 1 Prototype
img-thumbPromo Concept 2
img-thumbPromo Concept 3

CoroStuff

With the good folks over at Digital Meaning, I’ve pretty much had my hands on everything digital for Corostuff. I’ve redesigned their UI’s, refactored their codebase, and improved their SEO scores. I focused on shipping the best possible experience to customers by making the site load fast, easy to navigate, and easy to find on the interwebs.
Artboard 1 Artboard 2 Artboard 3 Artboard 4 Artboard 5 Artboard 6 Artboard 7

The Red Road

At The Refinery I conceptualized the static and interactive campaigns for the premiere of Sundance Channel’s The Red Road. The designs were based on the final key art and identity. I worked closely with lead art director to create the final deliverables for the advertisement banners and skins. This was the digital arm of a full 360 integrated campaign from outdoor, print, digital and television.