I make things not just more useful, or more usable, but
more habit-forming and lovable. I use design-thinking to create innovative, human-centered experiences that enable customers to achieve their business objectives and maintain their competitive market advantage. 

My work process includes discovery, research, ideation, refinement, and user-testing to make experiences that solve problems in ways that resonate with users.

AMEX Risk Knowledge Hub

Conceptual design process for desktop, mobile, IoT, and voice based application

the PROBLEm

Product Owners don’t have a place to collaborate, communicate, and learn about the production of design documents that are required for the design of Credit Risk-related Digital Applications.

our SOLUTION

We designed a guidance-based system that educates, leads and expedites users in Application Design Documentation production, and produces materials for Credit Risk-related Digital Applications Approval Board Meeting presentations and Technical Specifications documents.

my role

I was Lead UX and responsible for the experience strategy and design of the responsive web application. I led the UX work, producing all major deliverables and artifacts, presenting these to the client.

 

American Express Risk Product Owners, who work on Credit Risk-related application development, need an application that helps them understand the product portfolio they handle and determine if a new product is required. We started by interviewing our user base of 10 potential system users and 5 Business Partners, from which we culled the responses and built an Experience Map for the UX Strategy. This helped us see the big picture.

Thibodeau_CaseStudies3_Page_04.jpg

From the Research, we developed Personas that showcased the users needs, pain points, tasks and expectations of the system. This defined who we were building our application for.

Thibodeau_CaseStudies3_Page_05.jpg

The pain points, personas and definition of User Needs brought us to a resultant group of the features we would focus on, filtered through our Organizing Themes. This helped us prioritize and exclude edge cases.

Thibodeau_CaseStudies3_Page_06.jpg

We defined the users landscape, where they touched the system, their actions, the flow they took, and any back-end interactions. We understood how the user used the system, and what the main tasks were.

Thibodeau_CaseStudies3_Page_07.jpg

We defined a new proposed user flow that showcased the features into a new system and way of doing the tasks required.

Thibodeau_CaseStudies3_Page_05.jpg

WHAT WE LEARNED FROM RESEARCH

Users needed a much more concise but efficient Walk Through Wizard to start the process. Through our discussion we learned that because they only use the application once every 6-12 months, many needed more structured guidance and hand holding.

Thibodeau_CaseStudies3_Page_10.jpg

We focused on 2 divergent concepts

CONCEPT 1
A wizard guidance-based system that educates, leads and expedites users Application Design Documentation production, and if needed, produces materials for Credit Risk-related Digital Applications Approval Board Meeting Presentations, and Technical Specifications, through desktop and mobile form factors.

Users will be given guided work flows when they want to:

• Validate and research a request

• Create new content and edit existing content

• Tag content or add to the tag library

• Search for existing content and use for Application Design Documentation

• Use guidance systems to create new Application Design Documentation

• Learn about the work flow processes and the domain of Credit Risk

• Schedule meetings

• Monitor efficiency of work flows

• Export presentation materials

 

Thibodeau_CaseStudies3_Page_12.jpg
Thibodeau_CaseStudies3_Page_13.jpg

Key Moments in Concept 1

Thibodeau_CaseStudies3_Page_14.jpg

CONCEPT 2
A predictive, Machine Learning-powered system that educates, leads and expedites users Application Design Documentation production, and if needed, produces materials for Credit Risk-related Digital Applications Approval Board Meeting Presentations, and Technical Specifications through voice interfaces and the Internet of Things.

Users will be given guided work flows when they want to:

• Validate and research a request

• Create new content and edit existing content

• Tag content or add to the tag library

• Search for existing content and use for Application Design Documentation

• Use guidance systems to create new Application Design Documentation

• Learn about the work flow processes and the domain of Credit Risk

• Schedule meetings

• Monitor efficiency of work flows

• Export presentation material

 

Thibodeau_CaseStudies3_Page_16.jpg
Thibodeau_CaseStudies3_Page_17.jpg

 

Next Steps and the Prioritization of Concepts

After considering the budget, scope of work, scalability and timeline required to insure delivery of the design for development, we determined we should focus on Concept 1. The time needed for design of the whole system was agreed to be completed over a 12-15 month span, and a timeline was built to accommodate that. While the technological advancements of Concept 2 were determined to be acceptable, we needed to put a stake in the ground to get started. Our partners were excited and agreed that our proposal of Concept 1 made sense in the short term, and as a structure to build upon for the long run. It solved all the major pain points and had the technological framework to support future advancements. People reacted very positively to the features of voice interfaces especially in regards to Search and Q & A issues. They also felt that connections to Internet of Things, i.e., functional systems imbedded in their day to day life, would help only if the users had access to those systems. Our next steps included the development of a Design and Product Roadmap, integrating that into a Sprint Schedule with our approved development team, to make the experience an application – one that would be part of the work process for Credit Risk Product Owners, and potentially, others at American Express.

We started the process of designing low fidelity wire frames, which were designed for initial testing of usability and features. My process of storyboarding ideas, helped the design and communication of more complex interactions and flows. This was a significant time-saver and allowed me to avoid designing and prototyping edge cases and focusing on the most important features

KnowledgeHubWires_Page_01.jpg

Sitemap

My contributions included:
DISCOVERY & RESEARCH
Product Strategy
User Persona Definition
UI/UX Assessment
Focus Groups
Content Audit
Taxonomy
Experience Maps

IDEATION
Design Workshops
Card Sorting
User Stories & Scenarios
Customer Journey Mapping
Usability Audit
Storyboarding
Rapid Prototyping
Information Architecture
Site Maps
Low Fidelity Wireframes

REFINEMENT
High Fidelity Wireframes
UI Visual Design
Clickable Interactive Prototypes
Pixel Perfect Comps
Design Assets
Visual Design Style Guide
Interaction Library Development
Technical Specifications

AMEX MOCA

Redesign and development process for desktop-based application

the PROBLEm

Our internal Business Partners don’t have a tool to budget their AMEX Advertising dollars effectively.

our SOLUTION

Let’s redesign a budgeting tool that uses algorithmic engines to project their budget, as well as
compare the constructed, and if needed, optimized scenarios.

my role

I was Lead UX and responsible for the experience strategy and design of the responsive web application. I led the UX work, producing all major deliverables and artifacts, presenting these to the client.

 

Through our research, we discovered users want to compare different budget scenarios, and determine, through data visualizations, the differences between each. For a deeper understanding of their allocations, users wanted to modulate each channel and product that make up each channel.  

 

A 3 Step process

1 Walk through WIZARD

The Walk Through Wizard guides users through the process of entering parameters for the budget projection. Users import data, set dates, and can manipulate each allocation per channel and by product. 

2 SCENARIO BUILDER

A user can build separate scenarios and compare. They will also be able to optimize a selected budget utilizing the tools business intelligence and access to big data, to build the most optimal allocated funds.

3 DATA VISUALIZER

A user can then understand through the data visualizations, how each individual plan is broken down and how they compare to one another.

 

WHAT WE LEARNED FROM TESTING
Through testing with our users, we learned that they wanted to import one budget and keep it as a template to build a second budget. Therefore, we built functionality to allow a user to base a new budget off an existing imported budget by duplicating it.

 

User Journeys were mapped out

First round of wires to be tested

First round of wires to be tested

12698823_10153857013430729_329577079_o.jpg

WHAT WE LEARNED FROM TESTING
Users needed a much more concise but efficient Walk Through Wizard to start the process. Through our discussion, we learned that because they only use the application once every 6-12 months, many users needed more structured guidance and hand holding.

 

Walkthrough setup wizard

MOCA.01.10.3.1_Page_02.jpg

A Budget has to be RUN to be visualized

Users can modulate a CHANNEL of advertising as well as PRODUCT

MOCA.01.10.3.1_Page_05.jpg

If a user disproportionately modulates allocations, a meter warning lets them know how much they've over budgeted

Understanding the usage contexts of the application helped me develop a clear vision of the interactive expectations of the users. We developed a set of experience principles woven through the application. These were used to support design decisions, articulate core values and describe key attributes the application experience should embody for the users. The principles were used consistently to drive the aesthetic feel and overall direction of the application.

WHAT WE LEARNED FROM TESTING
Users want to be able to allocate, down to the product line, in order to fine tune their allocations to see effectiveness. They like to see the data visualizations comparing plans and the optimization features to help them finish their planning by offering the “best” plan.

 

My contributions included:
DISCOVERY & RESEARCH
Product Strategy
User Persona Definition
UI/UX Assessment
Focus Groups
Content Audit
Taxonomy
Experience Maps

IDEATION
Design Workshops
Card Sorting
User Stories & Scenarios
Customer Journey Mapping
Usability Audit
Storyboarding
Rapid Prototyping
Information Architecture
Site Maps
Low Fidelity Wireframes

REFINEMENT
High Fidelity Wireframes
UI Visual Design
Clickable Interactive Prototypes
Pixel Perfect Comps
Design Assets
Visual Design Style Guide
Interaction Library Development
Technical Specifications

ADP FutureTalent

Design and development process for desktop based application
 

the PROBLEm

To avoid the stagnation of their workforce, companies need to develop their people and align them with their current or projected strategic direction.

our SOLUTION

Give companies ways to identify, grow, transition and retain the adaptable talent that fits their strategic needs, and avoid the stagnation of their workforce.

my role

I was Lead UX and responsible for the experience strategy and design of the responsive web application. I led the UX work, producing all major deliverables and artifacts, presenting these to the client.

 

To differentiate ourselves in a competitive market, we needed to define a desirable role for the application and how it would meet the needs of the Human Resource Manager. We were excited by the opportunity to create something more valuable to the user. 

To discover our audience needs, we interviewed several users, individually and in a group. From our group interviews, we mapped out pain points which lead directly into our design process and focus on features.

Then we continued by understanding the whole ecosystem of Human Resources and talent, focusing on the Company Strategy. We mapped the design cycles we would need to focus on from a road map point of view and the functionality we would be concerned with.

The requirements, we determined through research, were synthesized and tested. Through that, a 3-part solution was proposed. An employee-customized career plan for success, that allows employees to grow according to their own strengths, desires and motivation, while staying in alignment with the company’s business strategy would accommodate the needs of the user and solve their pain points. The tool would give them the opportunity to identify strengths and grow in key areas, all while staying a vital and aligned employee. 

 

1 Change Manager

The Change Manager is a tool to help companies adapt quickly to strategic challenges. It helps organizations assess strengths and weaknesses and help its workforce align to those changes. 

2 personality creator and Success Plan

An employee-customized career plan for success, that allows employees to grow according to their own strengths, desires and motivation, while staying in alignment with the company’s business strategy. The tool gives them the opportunity to identify strengths and grow in key areas.

3 Strategic Talent Retention

Is a tool that helps organizations identify and retain the most valuable employees. It provides insights around skills as well as tools to counteract bias, reward and course-correct employees who are adapting to change.

 

12698823_10153857013430729_329577079_o.jpg

 

This user flow shows how a user can manage the growth and promotion of an employee. This functionality creates a Success Plan to evaluate and use for an employees career growth. The plan defines who is most retainable and essential. Once changes happens, the workforce system updates and gets the employee aligned to the Success Plan.

The Change Manager

TalentSectionWorkflows.JPG

WHAT WE LEARNED THROUGH TESTING
Our initial design focused on an automatically assembled profile, based on existing resources, to support the projected learning capabilities. Through concept testing, we learned that users wanted to customize and define their own paths of learning and skill achievement

This user flow shows how an employee can define themselves, rather than be defined by the company, based on their own strengths and interests. By defining themselves, their Success Plan is matched to them. A manager recommends the employee and encourages them to succeed.

the Personality creator and SUCCESS PLAN

SectionWorkflows_Page_2.jpg
talentWire2.jpg

Through our philosophy of “Make Important Things Fast”, the main screens haves been designed to allow users quick access to primary functions of the application. By “Minimizing Learning” people on-the-go or desktop based users can depend on their prior experience with past systems and existing system design conventions to help them learn to use the application.

A Retention Plan has been built as a contingency for any kind of employee change. A user can implement the Retention Plan and select the ways to keep a valuable employee.

STRATEGIC TALENT RETENTION

SectionWorkflows_Page_3.jpg
TalentDesign3.jpg

WHAT WE LEARNED THROUGH RESEARCH
Users like the automatic retention functionality that predictively diagnoses the propensity of employees to leave and includes ways to retain the employee.

 

Finished comps and prototypes were produced through my guidance and management of a UI designer, and used to develop the application in an Agile environment. Because of tight timelines we chose to develop a high-fidelity prototype in InVision. The prototype was a powerful tool in creating transparency in our design process. The “What you see is what you get” approach strengthened our relationship with our client and allowed us to gain feedback and approval from both our client and development partner. We focused on all form factors, knowing users touch points with the system vary based on their own preferences and patterns of use.

My contributions included:

DISCOVERY & RESEARCH
Product Strategy
User Persona Definition
UI/UX Assessment
Focus Groups
Content Audit
Taxonomy
Experience Maps

IDEATION
Design Workshops
Card Sorting
User Stories & Scenarios
Customer Journey Mapping
Usability Audit
Storyboarding
Rapid Prototyping
Information Architecture
Site Maps
Low Fidelity Wireframes

REFINEMENT
High Fidelity Wireframes
UI Visual Design
Clickable Interactive Prototypes
Pixel Perfect Comps
Design Assets
Visual Design Style Guide
Interaction Library Development
Technical Specifications

ADP Interviewer

Design and development process for desktop, mobile and tablet based application

the PROBLEM

Companies need efficient ways to hire people and determine appropriate candidates not just look at resumes.

our SOLUTION

We designed an application with the ability to track, measure and improve user’s decision making using analytic and reporting tools. Allowances to monitor completion rates and time to completion, and view user and account activity, give valuable time back to your recruiters and hiring managers. Recruiters will not have to hunt down hiring managers and will be able to focus on other strategic needs.

my role

I was Lead UX and responsible for the experience strategy and design of the responsive web application. I led the UX work, producing all major deliverables and artifacts, presenting these to the client.

 

Our first steps were to interview both “Candidates” and “Employers”. Distilling research into a prioritized plan helped our initial design to focus on a concept of a place to schedule, meet and evaluate candidates. Meeting through video seemed to be the best way to connect. The Evaluation functionality would be a major part of the process. This led us to a better understanding of the users flow. I took a top-down approach to defining the overall structure of the experience. Through sketching and storyboarding, I generated a multitude of concepts about the arrangement of UI, functional and data elements, and interactive behaviors. Starting broad, our vision began evolving. Through a high-level design language, interactions and the application’s anatomy began to piece together. 

 

concept interviewer application for HR Admins

concept interviewer application for HR Admins

process flow for filling an opening

process flow for filling an opening

 

WHAT WE LEARNED THROUGH TESTING
Our initial design focused on less steps for the user to start the process. Through testing and retesting, we discovered that users needed a much more extensive and defined journey, more steps that correctly understood their mind and conceptual map of the process.

CANDIDATE FACING APPLICATION

introduction screen

introduction screen

meeting calendar for employee to schedule interview

meeting calendar for employee to schedule interview

who you'll meet

This research led to building low fidelity wireframes that defined the users experience. From Welcome to Scheduling, Meeting and Paperwork. Scheduling functionality let users agree to a mutually acceptable time for meeting.

A user would be introduced to the team they would meet to interview with. Verification of the date users will meet. Users can fill out paperwork too.

paperwork 

paperwork 

interview interface

confirmation

confirmation

interviewer and prospective employee meet online

notes on prospective employee can be shared and saved

EMPLOYER FACING APPLICATION
An employer will see a different interface to meet and evaluate the candidate. They’ll be able to rate and evaluate the employee based other defined criteria. This evaluation will be available for all the interviewers. When a user returns for their video meeting, they have a dedicated space and agenda.

PreGameScreens_Page_05.jpg
PreGameScreens_Page_14.jpg
PreGameScreens_Page_11.jpg

These finished interfaces, used for development, show the full functionality of the system, with the ability to rate not just one candidate but all the candidates in the running for an open role.

 

My contributions included:
DISCOVERY & RESEARCH
Product Strategy
User Persona Definition
UI/UX Assessment
Focus Groups
Content Audit
Taxonomy
Experience Maps

IDEATION
Design Workshops
Card Sorting
User Stories & Scenarios
Customer Journey Mapping
Usability Audit
Storyboarding
Rapid Prototyping
Information Architecture
Site Maps
Low Fidelity Wireframes

REFINEMENT
High Fidelity Wireframes
UI Visual Design
Clickable Interactive Prototypes
Pixel Perfect Comps
Design Assets
Visual Design Style Guide
Interaction Library Development
Technical Specifications

ADP Onboarder

Design and development process for desktop based application

the Problem

Companies need less paper, less wasted time, and happier people during the onboarding process.

our Solution

Create a fantastic onboarding experience for every new hire with a personalized onboarding page that details the tasks, tips, contact info, and files which every new hire will need before starting work at their company. Users get employee files, addresses, emergency contacts, bank info, and other data into a single, secure location and notifies you when any of it is updated.
 

my role

I was Lead UX and responsible for the experience strategy and design of the responsive web application. I led the UX work, producing all major deliverables and artifacts, presenting these to the client.

Accelerating the process, bypassing extra steps, using available data, and finding efficiencies through technological advancements. 

 

WHAT WE LEARNED THROUGH TESTING
Our initial design focused more on simple document sharing, but through user testing we learned that users need a real narrative to understand their journey and the expectations of the role they are starting in. We added more ways to connect socially, and new video content.

 

OnboardMast.jpg
login screen

login screen

Onboarding3_Page_04.jpg

Video content introduces a new employee to the team, process and new Manager. A user needs to verify direct deposit information, and can scan a check.

scan in banking check information

Onboarding3_Page_05.jpg

A user can introduce themselves as well as join groups to get familiarized

A user will then get their paper work done, share their interests, Meet the Team and share their special skills

Onboarding3_Page_10.jpg
Onboarding3_Page_10.jpg

My contributions included:
DISCOVERY & RESEARCH
Product Strategy
User Persona Definition
UI/UX Assessment
Focus Groups
Content Audit
Taxonomy
Experience Maps

IDEATION
Design Workshops
Card Sorting
User Stories & Scenarios
Customer Journey Mapping
Usability Audit
Storyboarding
Rapid Prototyping
Information Architecture
Site Maps
Low Fidelity Wireframes

REFINEMENT
High Fidelity Wireframes
UI Visual Design
Clickable Interactive Prototypes
Pixel Perfect Comps
Design Assets
Visual Design Style Guide
Interaction Library Development
Technical Specifications

 

ADP Portal+

Design and development process for desktop based application

the PROBLEM

All HR Admins work differently. Often they can’t access the information or processes needed for a particular tasks. Communication isn't easy, and sharing content is hampered.

OUR solution

We designed a user-centered, bespoke portal for HR Administrators, Managers and VP Level Managers, that allows each to work in a self-directed way, through predictive and customizable interfaces.

my role

I was Lead UX and responsible for the experience strategy and design of the responsive web application. I led the UX work, producing all major deliverables and artifacts, presenting these to the client.

 

We first started out by talking to users and doing design exercises with them. User feedback was integral to the design process. Getting their feedback, in its purest form was essential to telling the story of the variety of ways people work.

WHAT WE LEARNED THROUGH RESEARCH
We learned how each user works. We mapped out each users ideal interface. Our research sessions consisted of 2 day off-site with selected users. Users explained their mental mind maps and conceptual models of usage.

we held several off site group sessions allowing users to design their perfect system

we held several off site group sessions allowing users to design their perfect system

Alongside the ADP Research department we developed several persona for the system. Personas varied based on role, status and the hierarchy in the company, as well as the users pattern of use.

one of several personas developed in conjunction with the Research Department

one of several personas developed in conjunction with the Research Department

The site map we designed next, helped give structure to the over all functionality and content

WHAT WE LEARNED THROUGH TESTING
Our initial design focused on search as both a content retrieval mechanism and a navigation tool. Through testing we learned that users wanted a more guided experience through the use of Hot Keys that automated work processes, and more structured navigation system, which we focused on in these wire frames.

WHAT WE LEARNED THROUGH TESTING
With much higher fidelity wires, we found out users wanted to have the access to the Hot Keys, in a static tool bar, in addition to the easy access of the bento box. Through usability testing we saw an increase in recognition and usage of the interface.

nav2.jpg

WHAT WE LEARNED THROUGH TESTING
We focused on the addition of available team members who will be the focus of the HR admins work. This allowed more communication and connection to their teams.

WHAT WE LEARNED THROUGH TESTING
Overall testing contributed to the final examples of the interface that went into development. Search reliance was down-played, the use of the to do list, and the connection to notes and task was all brought through research and testing.

oSPresentation_Page_088.png
oSPresentation_Page_101.png

My contributions included:
DISCOVERY & RESEARCH
Product Strategy
User Persona Definition
UI/UX Assessment
Focus Groups
Content Audit
Taxonomy
Experience Maps

IDEATION
Design Workshops
Card Sorting
User Stories & Scenarios
Customer Journey Mapping
Usability Audit
Storyboarding
Rapid Prototyping
Information Architecture
Site Maps
Low Fidelity Wireframes

REFINEMENT
High Fidelity Wireframes
UI Visual Design
Clickable Interactive Prototypes
Pixel Perfect Comps
Design Assets
Visual Design Style Guide
Interaction Library Development
Technical Specifications

MichaelKors.com

Design and development process for responsive web site

the PROBLEm

Users need a place get up-to-date fashion trends as well as getting information on the life of Michael Kors, while shopping on an e-commerfce site.

our Solution

What if we make a site that lets user connect to Michael. His clothes, lifestyle, his music, his taste, his art, his philosophy, everything Michael. Michael Kors is a fashion designer based in New York City, best known for designing classic American sportswear for women. The site is not only a redesign, but an exercise connecting branding and social media with Michael as a personality.

my role

I was Lead UX and responsible for the experience strategy and design of the responsive web application. I led the UX work, producing all major deliverables and artifacts, presenting these to the client.

The problem is solved by showcasing Michael's life through the integration of his social networking content. His Spotify list, his Instagram account account, his Twitter feed are effectively showcased in the site's content.

Personas

Personas

User Goals

User Goals

Sitemap

Sitemap

Wireframes

Wireframes

Finished screens

Finished screens

Finished screens

Finished screens

My contributions included:
DISCOVERY & RESEARCH
Product Strategy
User Persona Definition
UI/UX Assessment
Focus Groups
Content Audit
Taxonomy
Experience Maps

IDEATION
Design Workshops
Card Sorting
User Stories & Scenarios
Customer Journey Mapping
Usability Audit
Storyboarding
Rapid Prototyping
Information Architecture
Site Maps
Low Fidelity Wireframes

REFINEMENT
High Fidelity Wireframes
UI Visual Design
Clickable Interactive Prototypes
Pixel Perfect Comps
Design Assets
Visual Design Style Guide
Interaction Library Development
Technical Specifications

Chase for the Charms

Design and development process for Augmented Reality mobile based application

the PROBLEM

Fans need to connect with the Lucky Charms brand and enter a sweepstakes to win through an augmented reality mobile game.

OUR SOLUTION

What if we make a augmented reality game to allow users to interact with the brand in a fun way as well enter a sweepstakes Beginning St. Patrick’s Day, grown-up cereal lovers can download the free “Chase for the Charms” app and step into augmented reality as a super fan chasing after Lucky the Leprechaun to capture his charms.

my role

I was Lead UX and responsible for the experience strategy and design of the responsive web application. I led the UX work, producing all major deliverables and artifacts, presenting these to the client.

 

Watch these 3 obsessive chasers who’ve been tracking Lucky and his charms for years: http://www.chaseforthecharms.com. Think: “storm chasers” but the mission is the charms.

With each charm captured, people have the chance to instantly win a prize such as a totally decked out Lucky Charms personal cereal dispenser or the opportunity to be immortalized in Lucky Charms history by being animated into a national TV commercial. Additionally, each captured charm earns players an entry into a sweepstakes for a chance to win $10,000 worth of real gold. Complete sweepstakes details are available at www.chaseforthecharms.com. The free app is available through iTunes, the Android Marketplace and Google Play. 

Mobile of the Day on FWA: www.thefwa.com/mobile

Getting people to enter sweepstakes is a task unto itself, made easier with the mobile application. 

 

initial concept

initial concept

user flows

user flows

user flows

user flows

persona journeys

persona journeys

decision flow

decision flow

wireframes

wireframes

My contributions included:
DISCOVERY & RESEARCH
Product Strategy
User Persona Definition
UI/UX Assessment
Focus Groups
Content Audit
Taxonomy
Experience Maps

IDEATION
Design Workshops
Card Sorting
User Stories & Scenarios
Customer Journey Mapping
Usability Audit
Storyboarding
Rapid Prototyping
Information Architecture
Site Maps
Low Fidelity Wireframes

REFINEMENT
High Fidelity Wireframes
UI Visual Design
Clickable Interactive Prototypes
Pixel Perfect Comps
Design Assets
Visual Design Style Guide
Interaction Library Development
Technical Specifications

Fruitsnackia

Design and development process for desktop based application

the PROBLEM

The brand needed to raise awareness, and make itself relevant to children and their parents.

OUR SOLUTION

“The Snackulator” which lets kids make their own Fruitsnackia character and enter it in a 3 phased sweepstakes, sponsored by Fruitsnackia. Fruitsnackia.com is a new experience for all things Gushers, Fruit Roll-Ups and Fruit-by-the-Foot. It’s the home of a completely integrated cross-channel campaign aimed at reframing Fruitsnacks from just being another snack food to being a fun food - something that stimulates kids’ imagination and creativity. Everything in the world of Fruitsnackia is made completely of Fruitsnacks; as if kids molded the place together themselves.

my role

I was Lead UX and responsible for the experience strategy and design of the responsive web application. I led the UX work, producing all major deliverables and artifacts, presenting these to the client.

Making something that shows who they are, is a primal urge for all children.

 

user needs and journeys

user needs and journeys

ecosystem 

ecosystem 

user flows

user flows

sitemap

sitemap

content Map

content Map

advanced user flows

advanced user flows

wireframes

wireframes

redlines of screens

redlines of screens

final experience screens

final experience screens

My contributions included:
DISCOVERY & RESEARCH
Product Strategy
User Persona Definition
UI/UX Assessment
Focus Groups
Content Audit
Taxonomy
Experience Maps

IDEATION
Design Workshops
Card Sorting
User Stories & Scenarios
Customer Journey Mapping
Usability Audit
Storyboarding
Rapid Prototyping
Information Architecture
Site Maps
Low Fidelity Wireframes

REFINEMENT
High Fidelity Wireframes
UI Visual Design
Clickable Interactive Prototypes
Pixel Perfect Comps
Design Assets
Visual Design Style Guide
Interaction Library Development
Technical Specifications

Saatchi & Saatchi.com

Design and development process for responsive web site

the PROBLEM

How do you get users to see you as not only a leader of global advertising and a hot bed of creative ideas through socially networked content.

our solution

A full service, integrated communications network, they work with 6 of the top 10 and over half of the top 50 global advertisers. They’re in the business of getting people to fall in love with clients’ products and services. Through creative ideas across all media and all disciplines, they set out to turn brands into Lovemarks which, unlike brands, generate loyalty beyond reason. They needed a new way to talk to the world.

my role

I was Lead UX and responsible for the experience strategy and design of the responsive web application. I led the UX work, producing all major deliverables and artifacts, presenting these to the client.

Surfacing the content and exposing it through social networks, like Twitter, Facebook, YouTube, and Instagram helps extend the Saatchi & Saatchi brand, and lends credibility to the claim of the quality of the creative.

 

Concept sketches

Sitemap and content map

Sitemap and content map

wireframes

wireframes

Wireframes

Wireframes

Wireframes

Wireframes

  Finished screens

 

Finished screens

  Finished screens

 

Finished screens

Finished screens

Finished screens

Finished screens

Finished screens

My contributions included:
DISCOVERY & RESEARCH
Product Strategy
User Persona Definition
UI/UX Assessment
Focus Groups
Content Audit
Taxonomy
Experience Maps

IDEATION
Design Workshops
Card Sorting
User Stories & Scenarios
Customer Journey Mapping
Usability Audit
Storyboarding
Rapid Prototyping
Information Architecture
Site Maps
Low Fidelity Wireframes

REFINEMENT
High Fidelity Wireframes
UI Visual Design
Clickable Interactive Prototypes
Pixel Perfect Comps
Design Assets
Visual Design Style Guide
Interaction Library Development
Technical Specifications