WHAT IS THIS PROJECT?

This is a digital experience for web and mobile web named "Test results". The goal is to craft an experience to help CVS pharmacy customer better understand their test results.

WHAT WAS MY ROLE?

•Lead the discovery, concept, and execution phase.
•Partnership with product owner, content strategist, engineers, accessibility team.
•Collaboration with design systems team to identify correct library components or create custom components.

WHAT WERE THE BIGGEST CHALLENGES?

•Data visualization is effective but it presents a lot of accessibility issues for disabled customers and assistive technology (screen readers). We solved many those issues by partnering with cvs accessibility team, specially arranging logical reading order and color accessibility.

WHAT IS THIS PROJECT?
This is an internal tool for CVS data scientists that helps them better understand patient data so that scientists can forecast and propose solutions across cvs enterprise.

WHAT WAS MY ROLE?
•Conceptualization, wireframing, prototyping, detailed design.

•Reach out to internal partners to learn more about this domain.


WHAT WERE SOME CHALLENGES?
•Limited domain knowledge of data scientist within CVS.

•Difficulty accessing the right partners to verify the customer journey map.

•Design system components were not centralized which made it time consuming to identify and leverage correct components. I solved this by proactively attending design system meetings to gather team feedback, iterate, and execute.

PRODUCT REQUIREMENTS
•Design a landing page to introduce the experience.
•User needs to be able to "safe a draft for later" as an option.
•User can select multiple data sources from the dropdown.
•User should be able to use a "search" functionality.

WHAT IS THIS PROJECT?
• Our Product Design team is responsible for designing the
end-to-end Self-setup experience for Verizon 5G Home Internet new and existing customers who need to self-install their routers at home.

• I designed the visual user interface that provides customers with easy step-by-step instructions on how to set up a Verizon router at home to enable home internet. The experience lives on the native iOS + Android My Verizon app.

WHO DID I PARTNER WITH?
I partnered with a Product Owner, UX designers, Industrial Design device Designer, Content Strategists, Project Managers, Engineers, and QA Engineers.

WHO ARE THE USERS?
New and existing 5G Home Internet Verizon customers who need to Self set-up their routers at home without calling a professional installer to do it for them.

WHAT BUSINESS PROBLEMS DOES THIS APP SOLVE?
• Verizon will cut costs by not paying a professional installer to come to a customer's home to install the router.

• The app will enable customers to follow easy step-by-step instructions on how to set up their router at home.

WHAT WAS MY ROLE?
• Craft the look and feel of the experience by leveraging Design System templates.

• Work closely with the lead UX Design Principal to flesh out user flows and product enhancements.

• Problem solve design issues for unhappy moments/paths.

• Partner with lead content strategist to ensure the content of the instruction is accurate and has the voice and tone of the Verizon brand.

• Lead Visual + Content QA. I documented discrepancies and collaborated with developers to scope a timeline to resolve issues.

• Based on User Research findings, I optimized some design flows to improve the Self setup user experience.

WHAT IS THIS PROJECT?
• This is a new feature that lives in the Citibank consumer-facing mobile app(ios + android + desktop). It is called "Card Status Tracker" 

• I designed it from start to finish collaborating with 6 members of the design team: cd, copywriter, ux, prototyper, product owner, project manager.

WHO ARE THE USERS?
• Citibank customers who have lost their card and have requested a replacement. 

WHO AM I PARTNERING WITH TO DESIGN THIS?
Product Owner, Head of Design, UX designer, iOS developers(3),  android developers(2), business analyst, prototyper, copywriter, and project manager.

WHAT BUSINESS / USER PROBLEMS DOES THIS FEATURE SOLVE?
• Currently, Citibank customers are not able to track when their new credit card will arrive at their home in case they lose it. 

• Citibank will save costs and be more efficient because users won't be calling customer service anymore to find out the date the card arrives and activation. 

MY ROLE?
• Lead the look & feel of the experience

• Lead and advocate for doing solid interface & modern interaction models research before executing.

• Design not just one but multiple design solutions to solve interface problems.

• Follow & push the Citibank Design Language

• Knowledge of iOs & Android UI kits

• Participate/Present design reviews internally to team and product owners.

• Establish a team efficiency by introducing Zeplin to Creative Director & Developers. 

• Challenge UX & IA to improve overall user experience.

• Involved in the Agile Methodology to achieve team efficiency by having daily stand-ups &  "scrum" boards.

• Collaborate & support UX team by concepting and sketching user flows, entry points, and light site/app architecture.

• Helped formalized a design process by having internal design reviews,
sitting down with my copywriter to align designs with messaging, updating project manager on design request from stakeholders.

• Led and foster a design culture within the team by scheduling and leading weekly design inspiration meeting.

Credit: Joe Jennings + Brooke Halls
   

WHAT IS THIS PROJECT?
• The name of this new feature is " Lock your lost card".
• It lives on the consumer-facing retail mobile app and desktop.

WHO IS IT FOR?
• The experience is for Citibank customers who have lost their card.
• The feature lets users lock their lost card immediately with a touch of a button and unlock it once it is found. 

WHO AM I PARTNERING WITH TO DESIGN THIS?
Product Owners of multiple users journeys, Head of Design, UX designer, iOS developers(3),  android developers(2), business analyst, prototyper, copywriter, and project manager.

MY ROLE?
• I am the lead user interface designer. I am working on this design from start to finish.

•As part of the discovery phase, my team meets with the product owner to discuss business and users goals, scope of project, define technical and content requirements.

MY DESIGN PROCESS:
UI DISCOVERY PHASE:
•In order to get a high-level view of the project, I need to familiarize myself better with the current flow and content of the app. By doing this I will be able to suggest the entry points for this experience.

• Research if  I should design card-style modules or if the content should extend full width.

• Review the existing design language and make sure I have all the components I need. If I don't I will suggest new interface modules/interactions and evolve the design language.

• Learn about the android UI library kit and patterns

PROBLEM SOLVING IN THE DESIGN PHASE:
• Due to strict bank regulations and legal factors, the content/copy for this experience needed to be approved by legal department and this takes many weeks. So me and my copywriter solved for this by using loren impsum messages during the design phase. I made sure we had a character/message limit so that we only concise but valuable content.

• UI challenges. The native ios toggle button presented challenges because initially we wanted to overlay text inside  it. This exploration did not work because the text was too small and it will get longer when translated to Spanish language.  I also needed to research if the toggle exists for android devices. At the end I designed a solution where we keep the label on top of the toggle button. It was validated during user testing.

• Another problem I am solving involves the credit card art sizes. I have been provided with the wrong card dimensions. So I quickly contact the dev team and clarify the specs.

REFINING/PROTOTYPE PHASE & SUBMITTING DESIGNS:
• Citibank hired a usability test company for this project. I attended the sessions for 2 days and watched users interact with a prototype. I supported our lead usability test designer in taking notes and sharing findings with team. I was also able to create invision prototypes.

• After refining the experience based on the usability test report I presented final designs to team and submitted designs via zeplin.

OVERVIEW
 TE offers an expansive portfolio of connectors covering smarter, safer and greener technologies. The team has been asked to redesign the website experience. 

WHO AM I PARTNERING WITH TO DESIGN THIS?
Creative Director/Head of Design and Strategy, UX lead, jr. ux, sr. UI designer, developers.

MY ROLE
 I am working with CD and UX designer to lead the creation of a cohesive design language for this experience. 

WHAT PROBLEMS DO I NEED TO SOLVE?
• The existing design language that includes global navs, local navs,  ui components, typography, modules, etc. is very inconsistent. 
• Inconsistent UX kit is making the team inefficient because designers are duplicating irregular interface elements on new layouts. 

PROJECT OVERVIEW

This is strategic design documentation I provided to team members to help us understand the web design process.

PROJECT CHALLENGES I OVERCAME

• During the Discovery phase product owners & the account team were approaching the design of a complex website in a very unorganized way. They were asking me for high-fidelity designs without providing me with an understanding of key customers, business requirements, or lacking any competitive research.

HOW DID I SOLVE THAT PROBLEM?

I was proactive and did a “roadmap” of the website design process as an iterative approach. (see the slide to your right). I socialized it with team members to get a consensus and explained to them that this document will facilitate internal discussions & think strategically about this project

PROBLEM: CREATING AN EFFECTIVE CONTENT COMPETITIVE ANALYSIS

I was asked to investigate what the competition websites were doing in terms of content. The ask was to just create a list of features and then present it to the team. I thought there was a more strategic way to do this and suggested it the following:

WHAT DID I RECOMMEND?

I provided a design diagram for competitive analysis where we can clearly “see” the competition content/feature gaps and how we can beat them. I used green dots to identify features and this allowed my team to really compare content among our competitive businesses.

OVERVIEW
Research and Development of an iconography design system for Dispersive Technologies marketing website.

WHO AM I PARTNERING WITH TO DESIGN THIS?
Marketing Director, Print Designer(to consolidaate and align the icons with previous print explorations).

WHAT ARE THE PROBLEMS TO SOLVE?
Previous designers have been applying icons to the screen layouts randomly at different sizes, treatments, and interactions. 
 

HOW DID I SOLVE THESE PROBLEMS?
I have a design strategy that involves the following steps:
• First I conduct a website audit to identify how/where/when icons are being used.
• After that, I present my findings to the team and together we recommend approaches to categorize the icons by their importance on the experience and by their meaning:
• Navigation Icons category
• Informative Icons category
• Decorative Icons category

 

MY DESIGN PROCESS.

WHAT IS THIS PROJECT ABOUT?
This is a desktop dashboard that will help the internal marketing team find problems across all channels. Through data visualization, it will help users understand how lines of business are performing and make decisions based on real time data.

WHAT WERE THE CHALLENGES?

• Unclear business and design requirements.

• Unclear Personas Definition.

• Not knowing exactly what Marketing Insights will be presented to the Marketing team.

• From UI/Design/Branding standpoint not knowing If Tableau Platform will let me change formatting, branding, and my own graphs, pie charts, etc.

WHAT IS MY ROLE?

• Conceptualize design directions.

• Research dashboard design best practices, specifically for the Tableau platform.

• Wireframes.

• Think about what visualization best represents the data users needs to see.

• Apply branding keeping in mind Tableau platform limitations.

• Document interactivity for the two main views: tooltips, transitions, data visualization behaviors.

WHAT IS THIS PROJECT?

• It is a native ios app called Cosmobody. It is a video subscription-based app that shows you great  fitness, yoga, and dance workouts done by professional trainers.

MY ROLE?
• Solve interface problems for this ios app
• Apply mobile usability principles as I design
• Propose primary and secondary navigation systems for mobile
• Familiarize with video controls for mobile
• Work along photography editor to define best imagery
• Design look and feel of confirmation pages
 

WHAT IS COSMOBODY APP?
CosmoBody is an iOS Tablet + Smartphone subscription-based fitness video service that brings you strength, cardio, new yoga, and dance workouts from celebrity trainers.

WHO AM I PARTNERING WITH TO DESIGN THIS ?
Product Owner, Head of Design, UX designer, iOS developers, Photography and Video Director.

WHAT IS MY ROLE?
Sr. Visual Interface Designer. Supporting UX designer with light wires.

WHO AM I DESIGNING THIS EXPERIENCE FOR?
It is for people who like working out but don't have the time to attend a gym. Users have access to professional workout videos, challenges, and celebrity trainers advice.

Wireframes + IA were in place.
 

WHAT ARE THE DESIGN PROBLEMS I NEED TO SOLVE? (HIGH-LEVEL)
• Establish a modular system to give the app structure & consistency. The system should accommodate full-width photography, headers, cta, infographics, video, and more.

• Craft a coherent look + feel of the interface and 20 modules.

DESIGN PROBLEMS I SOLVED:
PROBLEM: The app content is dynamic. (Workout videos refresh daily). We need a flexible design system.

MY SOLUTION: A card-style design that is attractive and very practical.
Why this UI pattern? Because the card is a small container that allows me to present a beautiful image of our workouts along with one line or 2 of copy with a strong cta.
 

PROBLEM: We will design a lot of modules (Hero, Editor's Pick, Motivational, Branding-Related, etc.) How do we achieve consistency?

MY SOLUTION: Let's create a design system and organize modules by category + hierarchy.  Ex: Hero module will only appear on a landing page and will expand full width. It can only present 4 elements: An image to the right, an eyebrow, title, and a max count of characters for copy deck.
 

PROBLEM: What's the rationale for establishing the visual treatment of modules/overall look and feel of app?

MY SOLUTION: Look and feel should be coherent with Cosmopolitan Magazine brand attributes: Bold + Sexy combined with elegant typography

We have beautiful licensed photography of the trainers who convey the active style that our audience loves. So let's propose an image-driven app. We should stay away from using embedded fonts and use only system fonts. Follow the Cosmopolitan Style Guide and use Fuchsia as primary color but combine it with black for a contrast and elegance.
 

PROBLEM: How can we give the app visual structure?

MY SOLUTION: With a  grid system we can create any number of columns that will accommodate all the modules and will make it easier for people to navigate and find content. The grid will also allow me to quickly add or delete elements without breaking up design.

DESIGN PROCESS

RESEARCH PHASE:
• For this project, I worked with a  product owner, CD, UX lead, and copywriter. The team meets weekly to discuss project business goals and model, users goals, scope, and technical capabilities and limitations.

• The team has raised one concern that has to do with the way the UI will look in Android tablets, especially in landscape mode. To try to solve for this I quickly do android tablet best practices for video controls.

• The team discusses potential ways to market this product. Discussions revolve around doing a comprehensive e-mail campaign, personalized landing pages for users coming from different entry points or touchpoints.

• In parallel, I am directly collaborating with CD and showing him a design competitive analysis, usability best practices for tablets, paper prototypes.

• In parallel, I am directly collaborating with UX designer to review wires and flows and suggest ways to improve the experience.

INTERFACE VISUAL DESIGN PHASE:
• The team agrees that this experience needs a modular system so I start crafting at least 2 design solutions and present to the team twice a week. The main feedback I receive is that the message on modules need to fit for smartphones and there should be more visual treatment continuity from screen to screen.

• I create high fidelity prototypes using Invision and test it out with colleagues and other users. Document the pain point screens(users were tapping on the video time stamp, which is static) and share with my team. Reiterate and improve the experience a bit more.

• This project goes through at least three rounds of design reviews in a month until it is approved.

DESIGN HAND OFF PHASE:
• I create a components style guide documentation and share with developers.

•  I create functionality/interface behavior specs for not only devs but also for our internal designers so that they are all followed and achieved consistency moving forward. 

• I did Visual QA of the product before final launch.

This app was downloaded an estimated 1,500 times during the first week and got about 5,000 paid subscribers during the first two months.

OVERVIEW
A fun way for parents to create and share a Christmas list with their kids. Parents control the access, can set limits on budgets and decide what item can or can’t be shown. Parents and “Santa” can then send messages of encouragement to children such as reminding them to take out the trash, or telling them if they do well on that spelling test.

DESIGN PROCESS
As always, I started doing design research. My audience was parents and children so my design direction had to strike a balance and appeal to both. First I examined the aesthetics and best practices of beautifully design kids sites such as PBS and Disney's. Discovered using elements from nature like landscapes, animation, or illustration can be effective with children. After that moved on to using design patterns for forms and considered the Bootstrap frame for efficiency. Proceeded to create wireframes and visual designs for site including parent's list view, children's list view, shopping cart, etc. The  site launched succesfully during 2011 Holidays.

MY ROLE
Responsible for look and feel, interface design of registry forms, wireframing of some pages, iconography, and print marketing pieces.

USE OF TECHNOLOGY:
Photoshop, Illustrator, HTML and CSS

OVERVIEW
I have created these personas that will inform design/business decisions for the Manhattan Mini Storage brand.

MY ROLE?
• Collaboration is key for me. I worked together with my content strategist to review users interviews conducted in the past.
• We involved stakeholders and customer service to help us understand insights about our users. We hang post-it notes and posters to visualize our users and make them appear real.
• Then I identified primary and secondary personas. 

OVERVIEW
Manhattan Mini Storage wants to design a desktop + mobile calculator that will help its customers select the most appropriate storage room size they need more efficiently.

WHAT ARE THE BUSINESS GOALS FOR LAUNCHING THIS PRODUCT?
• To educate and present new customers with more precise room choices.
• To increase rooms reservation conversion rates. The team will track conversion rates using optimizely software.
• To enhance the user experience by not overwhelming our customers with unnecessary room choices they don't need. 

WHAT ARE SOME DESIGN PROBLEMS I SOLVED?
PROBLEM: Users need to be able to see calculator results simultaneously as they enter or select data.

MY SOLUTION:
• I always present at least 2 design solutions or explorations to team
• Create a desktop layout with a fixed calculator results module at bottom of screen. This works beautifully on mobile as well.

PROBLEM: There are too many room categories to fit on main nav.

MY SOLUTION:
I am able to accommodate 9 nav items nicely spaced out horizontally
If the nav needs to extend later I will be able to solve for that by making it a scrolling navigation or reducing iconography.

PROBLEM: Users need to be able to see calculator results simultaneously as they enter or select data.

I am creating a high-fidelity prototype of this tool using Invision.

 

OVERVIEW: Condé Nast's internal campaign to promote their online video channels showcasing fashion, food,wine, andbeauty. Banners displayed across CN's brands.

MY ROLE:

• Worked along with Product Manager and Creative Director for conceptualization.

• Designed iconography and visual presentation for all banners

• Proposed banner formats for both desktop and mobile formats

• Prepared production-ready files for outside developers.

TECHNOLOGY AND DESIGN:

html, css, jquery, illustrator

OVERVIEW:  Interactive Banner Campaign for Lindt Chocolates. The formats are static and expanded banners.

MY ROLE:

• I refined the look and feel of the campaign.

• Cleaned up all disorganized psd files left by previous designers who worked on this campaign. So I defined naming conventions for each layer and created layer comps to mimic  interactivity and the different views or frames of banners.

• Worked along with Creative Director to create storyboards.