Investment Trading Web Application

Investment Trading Web Application

CBA_homepage

Project:

Commonwealth Bank of Australia started a new division called MyWealth that brought the trading of shares, properties, and other investments to the regular retail banking customer.

The concept designed in both in Sydney and San Francisco with an evolving business unit that was started along with the design of the product.

Key Challenges:

  1. Make trading, retirement, and property investment easy to learn and do
  2. Design using an agile process with a team in another country

Role:

A varied UX team was used over the year and a half with CBA of which I was the only consistent member from the agency. My work provided consistency and detailed annotations as well as designing the specifics for the Invest section of the site.

CBA_tilerow

Tiles and rows were a primary UI element that displayed investments more like products that one might see in an e-commerce site to make the process of buying and selling shares more friendly to the novice investor.

CBA_portfolio

Circular charts of your whole wealth was the primary component for the portfolio to allow users to see a broad picture of their investments. The user may also add investments from other banks or companies to give the user a centralized place to see their entire wealth.

CBA_invest

Investments were constructed in the fashion of a product detail page where large hero images and ample white space for numbers made a friendlier design for each company.

CBA_orderpad

Simple controls and consumer friendly language spell out the process for trading shares.

CBA_axure

Prototypes in the software Axure were created to conduct usability testing for each stage of the project. The test protocol and all the pages were created in San Francisco and administered by a 3rd party research team in Sydney.

Screen sharing using GoToMeeting was used for observation and live commenting during the tests.

 

Tech Startup Responsive Website Design

Box_homepage

Project:

Succinct messaging and streamlining of content were primary drivers of the Box.com redesign. This project took a 2000 page site and redesigned that content in 200 pages. Individual features that had their own page were consolidated into broader solutions pages and industry specific content.

Key Challenges:

  1. Create a responsive site across mobile, tablet, and desktop
  2. Define succinct messaging and content that customers can easily read & scan

Role:

My primary role on this project set the content & site structure and facilitate those changes with the client marketing team. I managed one UX designer in wireframing the site as well as guiding the client’s visual design team in responsive page layout.

Box_navigation

A page level navigation was introduced to let users quickly identify the content on long vertical pages and jump down to relevant content. The bar would lock to the top of the page giving the users  easy access to jump around and to know how much content was remaining.

Box_pricinglarge

The responsive web design process used 3 different resolutions defined by using looking at the current web statistics and the devices hitting the site today as well as the popularity of various mobile devices. The design templates placed the 3 resolutions on the same page so all 3 resolutions would be considered concurrently.

Box_pricingsmall

 

Streaming Video iPhone App

Volcom_home

Project:

Volcom ran two surfing competitions, the Volcom Pipe Pro in Hawaii and Fiji Pro. They wanted an iOS application for their fans around the world to view the competition.

The entire project was pitched, designed and developed in 2 months. The app was highly successful with over 10,000 downloads in the first weekend and an average of 24 minutes of usage time per user.

Key Challenges:

  1. Design a universal app that looks good on both iPhone and iPad
  2. Define a mobile strategy to show where Volcom should be growing with their customers

Role:

In my role as UX lead, I helped design & pitch the concept, define the content structure and wireframe every screen for vertical and horizontal orientations.

Volcom_sitemap

Along with streaming video, the app let users browse the details of the surfers, view past and live results, and find out when to tune in next.

Volcom_today

All design templates were built with portrait and landscape orientations to show how modules would re-arrange when the iOS device was rotated.

Touch annotations were also used to document to the development team every tap and swipe used in the app.

Volcom_livescores

Scoring data was provided by a 3rd party and a new display layout was designed for this app. Data feeds were documented to show real time scores alongside the event time.

Volcom_mobile_strat

A mobile strategy was a component of the pitch to reinforce the value of creating an app for their customers and to chart out the future of using mobile to reach Volcom’s customers.

 

Hard Drive Manufacturer Website

Stx_Home

Project:

The site redesign was an overhaul of the entire site of 10,000+ pages. This incorporated new visual style, new marketing technologies and e-commerce.

Key Challenges:

  1. Design and launch a 10,000+ page website within 8 months
  2. Create a marketing platform for retail consumers and enterprise customers in Asia, Europe and the US

Role:

This site was designed by 2 UX architects; my focus was the site architecture, product marketing pages and the partner program.

Stx_configurator

A new product configurator was designed to accommodate both consumers as well as resellers to purchase hard drives of a specific configuration available from the inventory.

STX_sppreg

Registration in the reseller program was a major initiative and a flowchart for possible registration scenarios was drawn out to document and optimize how customers become part of the program. This led to a better flow and reduced the number of pages required.

Video Game Console Manufacturer Website

PS_browser

Project:

Two web redesign projects were initiated for the US site for Playstation.com. The first project was a device-specific site for the Playstation 3 browser that optimized for browsing using a PS controller. Information was grouped by content type to give a nod to the PS3 cross-media bar. Each wireframe was designed responsively to handle televisions at 480, 720, and 1080 resolutions.

Key Challenges:

  1. Design a site for a TV browser with a controller for input
  2. Architect a marketing database to handle all the offerings of a global media company

Role:

As the only UX designer to this project, I defined the site architecture and set the wireframes for both websites.

PS_home

The primary us.playstation.com was also redesigned to streamline the navigation and display content optimizing for a 1024 resolution screen. The redesign also focused on bringing paid content from the PlayStation Network and other Sony subsidiaries within the Playstation website.

PS_erd

A new database was designed to power the new website. Additional data fields that would handle social media, cross sell from other parts of Sony, and upcoming products were detailed out to show how products were all connected so software & hardware products, services, live events, and promotions could all be automatically merchandised through the content management system.

 

Luxury Hotel Group and Hotel Websites

EKHR_homepage

Project:

The web project was required to create an online experience that demonstrates the uber premium service that consumers can expect from Emirates.

The online marketing platform needed to support multiple luxury hotels and resorts with their own uniqueness and personality as well as a centralized internet booking engine that allowed pre-stay customization.

Key Challenges:

  1. Create one system that accommodates multiple luxury hotels without being clones
  2. Design a booking engine to do multi-room, multi-stay reservations

Role:

My role on the UX team was to define the architecture of this system and wireframe the booking flow. I also traveled to Dubai for 5 months to conduct contextual inquiries on how customers go through reservation and booking in the U.A.E.

EKHR_profile

User profiles were generated from market research and sales data to classify different types of guests that would be using the website to book their hotel and resorts stays. The European business traveler was ranked as the number one target and families stopping over in Dubai on their way onwards were second.

EKHR_flows

 

User flows were used to illustrate how various user groups would enter the marketing platform. This could be an existing Emirates customer that receives a marketing email to drive to a customized landing page or a personal assistant that gets to the Emirates Hotels group website via search engine. All paths would lead to the Internet Booking Engine at the heart of the hotels & resort websites.

Hair Care Social Media Website

Tres_home

Project:

Tresemmé wanted a new social media website launched with the sponsorship of a new TV show, Stylista. On a highly accelerated schedule, a new site was designed & developed with a social media program within one quarter.

Key Challenges:

  1. Design a social media site and define a social program that grew a community from scratch
  2. Manage design & development & maintenance in a 3 month sprint

Role:

As lead UX architect, my role was to define the social media program, create the whole set of content and functionality in the site, including the modules of the blogging platform and the bulletin board system.

Tres_Community

The site used a blogging platform to show articles and videos on Fashion & Shopping, Entertainment, and live events hosted by Tresemmé. These would fuel discussions on the community boards.

Tres_Guidelines

Content scheduling, editorial guidelines, and site moderation were all included in the planning for this social media site to plan out fresh content and spur activity within the network.

 

Beauty Products Website

Almay_homepage

Project:

Almay.com was a project to concept new ideas for Almay in elevating natural ingredients as part of their beauty products.

Key Challenges:

  1. Simplify site and reduce the number of clicks to access content
  2. Introduce interactive design principles to a client unfamiliar the web

Role:

My role as UX lead was to co-design the framework with one art director and wireframe the product pages and look book pages.

Almay_registration

Heuristic evaluations on the existing site were the first step in identifying areas of improvement and helped frame the conversation with the client to design the site with an eye to a more simple design.

Almay_siteflow

The overall site was fairly small and a flow diagram illustrated to the client how the new functionality of a “Look Book” would drive users to the product pages.

Almay_lookbookwire

The look book incorporated 4 different kinds of looks and merchandised a set of products with instructions on how to create that look.

Almay_productwire

Product list pages used large images and white space that showed few images on screen at once but let the images of the products speak for themselves.

Global Insurance Website Design

AIG Home 2007

Project:

AIG.com was a full site redesign that unified AIG and its subsidiaries into one web presence. A global requirements gathering process was done to interview marketing chiefs in Europe, Asia, and North America to cover the breadth of products that AIG provided in over 100 countries.

Key Challenges:

  1. Create a scaleable architecture that accommodates hundreds of sub-brands
  2. Drive agreement between regional marketing heads across 3 continents

Role:

My role on the team was to audit the existing content structure, define the new structure with global site map and define the content migration process. I was also responsible for designing the product marketing section.

AIG_biz_taxonomy

This spreadsheet was one among many that not only tracked every category of insurance product, but was used to unify a common way to consolidate products with the global stakeholders.

AIG_mental_models

Mental model exercises were conducted with the client to account for some of the top questions each of the target audiences may have when coming to the AIG.com website. This led to deriving all the content and functionality that would belong on the new website.

AIG_wire

This lead to a wireframing process that led to dozens of templates and modules with hundreds of states to account for the broad product portfolio ranging from auto insurance to airplane leasing.