Advisor360
Team:
I worked as a UX Visual Designer on two teams of three people. Each team was composed of a UX designer, UX Visual designer and an engineer.
Process:
2-week sprints. Many projects rolled over.
The UX designer would typically create an Axure prototype based on functional requirements. We often brainstormed together. My main responsibilities were to apply existing components and styles, to conform designs to existing patterns as much as possible, and to create responsive designs.
These pages are taken from the Advisor360 website and are representative of the kind of work that I did at Advisor360. I specifically worked on all of the cards shown.
One project worth highlighting is the “Business Snapshot” widget.
The purpose of the Business Snapshot widget was to provide to the advisor the ability to visually track his assets under management throughout the year. I worked with the other UX designer to create several mockups, including animations showing interaction behavior and responsive behavior. These mockups were presented to the wider design team and critiqued. After many meetings the team agreed on a final design that turned out to be difficult to develop. The chief engineer did not want to dedicate the required resources to the project. He suggested using an existing pattern in Angular that could provide the functionality that we were seeking. I worked along with the team engineer to conform the Angular design to our existing styles.
Software:
Sketch
Abstract
Animate CC
Axure
Two style variation mockups for TIAA.
Bottom: final design.
Top animation: TIAA financial advisor UI refresh demo created using Sketch and Animate CC.
Initial requirements:
1) Re-skin the internal advisor UI incorporating new “agenda builder” functionality.
2) Emphasize data more than labels, as experienced advisors don’t need to read labels.
Team:
Sr. Visual Designer - Myself
UX Designer
Principal UX Designer
Process:
The first milestone was to present mock-ups to TIAA executives in NYC to get buy-in and funding for development.I focused on one exemplary page that contained the most data. I applied a color scheme that was similar to other internal products. Since one of the requirements was to bring data forward, I chose an accordion menu for the “agenda builder” feature rather than a fly-out, which obscured data. (see “previous design”). This initial design was accepted, so I built an animated demo which was later presented to the executives in NYC and well received. We were given funding to proceed with the project. Managers became more involved with the project adding additional requirements.
Go to “TIAA UI Demo - Part I” on the UX page to see the first phase of this project.
While the executives were happy with the new design, I thought the colors were too intense and distracting from the data. So I created two mockups designed to highlight data.
The first design is in light shades of gray. The data is black and easy to read. This was my favorite design because it met the initial requirements.
In the second design I worked to make the beginning and end of containers more apparent by adding a blue background and drop shadows. This design may have made sense with a B2C product, but I judged it to be unsuitable for the advisors who wanted data to be emphasized.
At this point, a new requirement was added. The new requirement was to make the design as accessible as possible.
The final design at bottom reflects our work on contrast ratios and other means of making the design more accessible.
Software:
Sketch
Adobe Animate CC
High fidelity prototype created using Adobe XD and Adobe Animate
Skeuomorphic UI icon set.
(Adobe Illustrator, Photoshop)
Pan Am UX case study. Capstone project for UX Design bootcamp, DesignLab, S.F.
Business requirements:
1) Increase bundling of hotel reservations and car rentals.
2) Make use of PanAm’s legacy of service
Empathy:
Interview recent flyers and frequent flyers.
Create persona(s) and empathy diagram.
Research plan:
1) Competitive analysis to see if it is possible to save money by bundling hotel reservations and car rentals with airfare on major airlines.
2) Discovery interviews with recent and frequent flyers to discover pain points. Ask about flyers’ interest in bundling hotel reservations or car rentals.
3) List insights and prioritize discovered user needs.
Problem definition:
Create POV statements
_____________________________________
Insights
I discovered that users were hostile to websites cluttered with promo boxes. Most users simply wanted to cash in their frequent flyer miles, book their flight and leave the site.
Users were unanimous in believing that bundling with airlines would not save them money.
At best, users were indifferent to PanAm’s “legacy of service.”
I did research on bundling and discovered that airlines make agreements with individual hotels and car rental agencies to buy in volume over a period of time. This enables them to get lower rates at specific hotels.
_____________________________________
Ideate/Design
Ideation and design were interwoven in this case. The first step was the easiest, creating a clear path to booking a flight.
I created user flows and a site map. I began sketching, simplifying the home page with a bold CTA. I added a flight attendant and a headline alluding to PanAm’s legacy of great service (“You deserve legendary service”) in a gentle way to meet the second requirement, since users were skeptical of a more bold claim.
At the bottom of each page I added testimonials from users stating directly that PanAm saved them money in comparison to online travel agencies (OTAs). I also added a quote from the Huffington Post stating that airline bundles can be cheaper than using OTAs.
I added links to a page that explained how airlines accomplish this, for interested customers. These quotes were intended to gently break down customer resistance to bundling without interfering with the booking process.
I also spent a lot of time on the chart comparing fares and flight times using graphical elements. User testing showed it to be very effective.
As I was designing I realized that while the customer was booking his flight, the software could be searching PanAm-affiliated rental agencies and hotels at the destination for prices, and also prices from OTAs at these agencies and hotels.
This information could then be presented to the customer after checkout, such as, renting a Ford Escort through PanAm would be $10 less than booking through Expedia. The user would have little incentive to shop elsewhere.
Of the 100 designs that my mentor reviewed, he said that mine was the best he had seen.
_____________________________________
Design
1) Task flows
2) Sketching
3) Wireframes
4) Pages
5) Prototype
6) Demo video
_____________________________________
Testing
Several chart designs were tested. The final design was very successful, with one user stating, “This would save me a lot of time.
Top animation: TIAA financial advisor UI refresh demo created using Sketch and Animate CC.
Middle: Sample full page created in Sketch.
[Bottom: Original UI design]
Initial requirements:
1) Re-skin the internal advisor UI incorporating new “agenda builder” functionality. 2) Emphasize data more than labels, as experienced advisors don’t need to read labels.
Team:
Sr. Visual Designer - Myself
UX Designer
Principal UX Designer
Process:
The first milestone was to present mock-ups to TIAA executives in NYC to get buy-in and funding for development.
I focused on one exemplary page that contained the most data. I applied a color scheme that was similar to other internal products.
Since one of the requirements was to bring data forward, I chose an accordion menu for the “agenda builder” feature rather than a fly-out, which obscured data. (see “previous design”).
This initial design was accepted, so I built an animated demo which was presented to the executives in NYC and well received. We were given funding to proceed with the project.
Managers became more involved with the project adding additional requirements.
Go to “UI Mockups - TIAA - Part II” on the UX page to see the next phase of development.
Software:
Sketch
Adobe Animate CC
Interface and section page mock-up for CIDB Malaysia eLearning program.
The design was client-driven. Specifications included:
1) UI to incorporate CIDB corporate colors, and other vibrant colors.
2) Each section landing page was to incorporate three brightly colored safety-related icons.
To make the icons as interesting as possible, I gave them a glossy, three-dimensional treatment, and placed the icons on a dynamic, contemporary background.
(Adobe Illustrator, Photoshop)
IPIMS eLearning images from top to bottom:
Topic page - Multi-stage, Horizontal Well Treatments
IPIMS Portal page
Sub-topic page - Hydraulic Fracturing
Sub-topic page - Plate Tectonics
Modal window
My role in the process is to create UI mockups. I also create and maintain the standards for graphics and illustrations, as well as creating 3D models, renderings and animations.
Spotify social features prototype.
The project objective was to add features to Spotify such as listening to music together with friends and building playlists together.
Pan Am UX case study. Capstone project for UX Design bootcamp, DesignLab, S.F.
Business requirements:
1) Increase bundling of hotel reservations and car rentals.
2) Make use of PanAm’s legacy of service
Empathy:
Interview recent flyers and frequent flyers.
Create persona(s) and empathy diagram.
Research plan:
1) Competitive analysis to see if it is possible to save money by bundling hotel reservations and car rentals with airfare on major airlines.
2) Discovery interviews with recent and frequent flyers to discover pain points. Ask about flyers’ interest in bundling hotel reservations or car rentals.
3) List insights and prioritize discovered user needs.Problem definition:Create POV statements
_____________________________________
Insights
I discovered that users were hostile to websites cluttered with promo boxes. Most users simply wanted to cash in their frequent flyer miles, book their flight and leave the site.
Users were unanimous in believing that bundling with airlines would not save them money.
At best, users were indifferent to PanAm’s “legacy of service.”
I did research on bundling and discovered that airlines make agreements with individual hotels and car rental agencies to buy in volume over a period of time. This enables them to get lower rates at specific hotels.
_____________________________________
Ideate/Design
Ideation and design were interwoven in this case. The first step was the easiest, creating a clear path to booking a flight. I created user flows and a site map.
I began sketching, simplifying the home page with a bold CTA. I added a flight attendant and a headline alluding to PanAm’s legacy of great service (“You deserve legendary service”) in a gentle way to meet the second requirement, since users were skeptical of a more bold claim.
At the bottom of each page I added testimonials from users stating directly that PanAm saved them money in comparison to online travel agencies (OTAs). I also added a quote from the Huffington Post stating that airline bundles can be cheaper than using OTAs. I added links to a page that explained how airlines accomplish this, for interested customers. These quotes were intended to gently break down customer resistance to bundling without interfering with the booking process.
I also spent a lot of time on the chart comparing fares and flight times using graphical elements. User testing showed it to be very effective.
As I was designing I realized that while the customer was booking his flight, the software could be searching PanAm-affiliated rental agencies and hotels at the destination for prices, and also prices from OTAs at these agencies and hotels.
This information could then be presented to the customer after checkout, such as, renting a Ford Escort through PanAm would be $10 less than booking through Expedia. The user would have little incentive to shop elsewhere.
Of the 100 designs that my mentor reviewed, he said that mine was the best he had seen.
_____________________________________
Design
1) Task flows
2) Sketching
3) Wireframes
4) Pages
5) Prototype
6) Demo video
_____________________________________
Testing
Several chart designs were tested. The final design was very successful, with one user stating, “This would save me a lot of time.
Images:
Top: TIAA UI redesign sample page. Created in Sketch.
Middle Top: Previous UI design.]
Middle Bottom: UI interaction demo created using Sketch and Animate CC.
Bottom: Final UI design
Initial requirements:
1) Re-skin the internal advisor UI incorporating new “agenda builder” functionality.
2) Emphasize data more than labels, as experienced advisors don’t need to read labels.
Team:
Sr. Visual Designer - Myself
UX Designer
Principal UX Designer
Process:
The first milestone was to present mock-ups to TIAA executives in NYC to get buy-in and funding for development.I focused on one exemplary page that contained the most data. I applied a color scheme that was similar to other internal products. Since one of the requirements was to bring data forward, I chose an accordion menu for the “agenda builder” feature rather than a fly-out, which obscured data. (see “previous design”). This initial design was accepted, so I built an animated demo which was later presented to the executives in NYC and well received. We were given funding to proceed with the project. Managers became more involved with the project adding additional requirements.
Go to “TIAA UI Demo - Part I” to see the first phase of this project.
While the executives were happy with the new design, I thought the colors were too intense and distracting from the data. So I created two mockups designed to highlight data.
The first design is in light shades of gray. The data is black and easy to read. This was my favorite design because it met the initial requirements.
In the second design I worked to make the beginning and end of containers more apparent by adding a blue background and drop shadows. This design may have made sense with a B2C product, but I judged it to be unsuitable for the advisors who wanted data to be emphasized.
At this point, a new requirement was added. The new requirement was to make the design as accessible as possible.
The final design at bottom reflects our work on contrast ratios and other means of making the design more accessible.
Software:
Sketch
Adobe Animate CC
TANAP is the Turkish transnational gas pipeline project. IHRDC is contracted to deliver an eLearning program for TANAP workers.
I was tasked with designing styles for icons and diagrams for this project.
I chose to use shades of the client's blue and brown logo colors. The style is similar across icons and diagrams, providing a consistent visual experience for the users. The Xyleme-created eLearning interface also incorporates the TANAP corporate colors.
(Adobe Illustrator)
eLearning UI and section style design
Responsive web site design for grocery delivery
Interactions designed for the TANAP e-learning project.
(Adobe Illustrator)
An interactive mockup for a geophysics subtopic.
(Adobe Illustrator, Animate)
Responsive web site design for Designlab UX certificate capstone project
UI element mock-ups for Tomb Raider
IHRDC client: TANAP
Warning icon set created for the TANAP transnational pipeline eLearning project.
"Best of Show"
2009 Society of Technical Communications - Northeast Chapter Awards
"Wordless" user documentation for a Bose Lifestyle System. I created the graphic standards for all Bose user documentation.
Users were observed and interviewed in the Bose usability laboratory.
(Adobe Illustrator, InDesign)
Pan Am UX case study. Capstone project for UX Design bootcamp, DesignLab, S.F.
Business requirements:
1) Increase bundling of hotel reservations and car rentals.
2) Make use of PanAm’s legacy of service
Empathy:
Interview recent flyers and frequent flyers.
Create persona(s) and empathy diagram.
Research plan:
1) Competitive analysis to see if it is possible to save money by bundling hotel reservations and car rentals with airfare on major airlines.
2) Discovery interviews with recent and frequent flyers to discover pain points. Ask about flyers’ interest in bundling hotel reservations or car rentals.
3) List insights and prioritize discovered user needs.
Problem definition:
Create POV statements
_____________________________________
Insights
I discovered that users were hostile to websites cluttered with promo boxes. Most users simply wanted to cash in their frequent flyer miles, book their flight and leave the site.
Users were unanimous in believing that bundling with airlines would not save them money.
At best, users were indifferent to PanAm’s “legacy of service.”
I did research on bundling and discovered that airlines make agreements with individual hotels and car rental agencies to buy in volume over a period of time. This enables them to get lower rates at specific hotels.
_____________________________________
Ideate/Design
Ideation and design were interwoven in this case. The first step was the easiest, creating a clear path to booking a flight.
I created user flows and a site map. I began sketching, simplifying the home page with a bold CTA. I added a flight attendant and a headline alluding to PanAm’s legacy of great service (“You deserve legendary service”) in a gentle way to meet the second requirement, since users were skeptical of a more bold claim.
At the bottom of each page I added testimonials from users stating directly that PanAm saved them money in comparison to online travel agencies (OTAs). I also added a quote from the Huffington Post stating that airline bundles can be cheaper than using OTAs.
I added links to a page that explained how airlines accomplish this, for interested customers. These quotes were intended to gently break down customer resistance to bundling without interfering with the booking process.
I also spent a lot of time on the chart comparing fares and flight times using graphical elements. User testing showed it to be very effective.
As I was designing I realized that while the customer was booking his flight, the software could be searching PanAm-affiliated rental agencies and hotels at the destination for prices, and also prices from OTAs at these agencies and hotels.
This information could then be presented to the customer after checkout, such as, renting a Ford Escort through PanAm would be $10 less than booking through Expedia. The user would have little incentive to shop elsewhere.
Of the 100 designs that my mentor reviewed, he said that mine was the best he had seen.
_____________________________________
Design
1) Task flows
2) Sketching
3) Wireframes
4) Pages
5) Prototype
6) Demo video
_____________________________________
Testing
Several table designs were tested. The final design was very successful, with one user stating, “This would save me a lot of time.
http://www.redparrotbeachclub.com
Logo design
T-shirt art
Banners
Copy
Illustrator/Photoshop
Big Commerce template
Logo design
Banner design
T-shirt designs
Copy
Illustrator/Photoshop
Big Commerce template
SkySync – AI data classification project
Project/requirements:
Design the user experience for customer data classification using machine learning.
Team:
I worked as a UX Designer for the Product Manager.
Process:
The product manager determined the product roadmap.
I worked with the PM and machine learning SME to select features from existing AI applications to incorporate into MVP and future releases.
Once the features were selected, I chose an existing SkySync design pattern for MVP that would allow for additional features in the future that would not require modifications to the information architecture.
New patterns were required for PII, image classification and object classification. I created a single pattern that would accommodate all three, keeping the number of new patterns to a minimum.
(Notes for developers are indicated in pink. Green and orange arrows indicate flows for internal use).
Software:
Figma
Animate CC
