Problem

As part of the rebranding effort of Bank of the West (now owned by parent company, BNP Paribas), the business needs required new products to help their customers engage with various online services.

Objective
Design a CMOS (Cash Management Online Service) web app that allows customers to view, manage, and print online transactions.

My Role(s)
Senior UX Designer, Web Developer, UI Designer, UX Writer, and UX Researcher.

I led the UX/UI design efforts on various projects within the CMOS product. I was assigned two main tasks: 1.) Create a Login Password with Biometric Enrollment. 2.) Datasheet upload workflow.

My Approach

I collaborated and communicated directly with PMs and UX Designers. Every UX Designer worked on at least one project. A fresh perspective from other UX designers was every week. However, we often exchanged information and resources since we played a significant part in BOTW rebranding efforts as we worked on our projects. These projects included custom iconography and patterns that were delivered and vetted throughout the project(s) duration.

Due to the startup environment, all projects and contributions to the Design System were a high priority. In turn, working more with your team than usual was imperative.

Result and Impact

I delivered a Hi-Fi Mockup for both projects, which was vetted and approved by PMs and other stakeholders.

Project Fidelity
Mid-High

Device(s)/Platform
Web and Native (iOS & Android)

Tools
Sketch, CSS

Environment
Agile

Company
Bank of the West

Team/Department
UX, CMOS

Problem

Google’s Unicorn team is developing a Family Link app for their Chromebook and Google Pixel devices. As part of the UX Foundation team, we must focus on the customer mental model and build this product in the exploration stages.

Objective
Design an app that allows parents to manage their child’s first device, with four main features: manage the duration the child spends on their device, vet app downloads and approval, monitor the child’s location, and manage the child’s homework. Ensure this accommodates all three members (Parent, Child, and Supervisor).

Leverage GM Design System with GM2 considerations (internal only access) for future release. (Note: GM2 Official release date Q4 2018)

My Role(s)
Interaction Designer, UI/UX Designer, Web Developer, UX Writer, and UX Researcher.

I led the UX/UI design efforts for several Family Link projects assigned to me. The main task was family management. Here, the emphasis was establishing a workflow targeting Google Pixel, Chromebook, and the web. The web requirement is redesigning the Parent Sign-On page via the product page. Here, the parent could make additional changes from an admin perspective.

My Approach

I garnered UX Research pre-existing resources, impromptu whiteboarding sessions with the UX Manager, observed Usability Testing, attended direct PM PRD review and meetings, direct communication and collaboration with Engineering POCs, design and implementation, product presentation with stakeholders (PM, Legal, UX Research, Content Strategist, and Engineering).

Result and Impact

I delivered a Hi-Fi Mockup for all projects approved by PM(s), Legal, and Engineers.

Project Fidelity
High

Device(s)/Platform
Google Pixel, Chromebook, Web

Tools
Sketch, CSS, HTML, Gallery, Framer, Principal

Environment
Agile

Company
Google

Team/Department
UX Foundation, Unicorn

Problem

Wells Fargo’s CEO (Commercial Electronic Office) product requires a new authentication experience, Biometric Enrollment, for supported devices.

Objective
Use the current WF Design System to create a new authentication Sign-On experience for Wells Fargo customers.

My Role(s)
Senior UI/UX Designer, UX Researcher, Web Developer, UX Writer, and Content Strategist.

As a project lead, I worked directly with POCs to ensure exceptional, on-time visual design deliverables that adhere to brand, accessibility, and UX standards. I created up-to-date graphic design onboarding resources and tools as part of the process.

My Approach

I provided transparency and oversight to the Senior Design Manager on project-specific pipeline deliverables, communicating and documenting evolving project goals and timelines, guidance, hands-on visual design work, files, and documentation. At the time, the push for documentation while adhering to and advocating for established framework processes and procedures took up a tremendous amount of my time.

Implementing best practices and accessibility standards, measurable impacts, and design integrity in the final product was a significant part of my research for the authentication project. I leveraged the WF BOSD (Business Operating System & Device) monthly report for possible device technologies the product may target while establishing cross-department communication and collaboration with various stakeholders.

Result and Impact

I delivered a Hi-Fi Mockup for all projects approved by key stakeholders.

Project Fidelity
High

Device(s)/Platform
iPhone (6, 8, X), Google Pixel

Tools
Sketch, Invision, Adobe Illustrator, CSS, HTML, JIRA

Environment
Agile

Company
Wells Fargo

Team/Department
VzD

Problem

VMware requires a scalable product that enables businesses to manage and monitor data.

Objective
Use the latest Bootstrap framework for mobile, tablet, and desktop platforms to customize a new data visualization product, DOPE (a.k.a Data, Optimization, Prospecting & Enablement).

My Role(s)
UI/UX Developer, UX Researcher, and Content Strategist.

Leading this product's design and frontend efforts, I immediately communicated and collaborated with PM, Marketing, Developers, and Full Stack Dev to ensure we established a process and procedures to attain product goals and deliverables. With a small budget and team of about five individuals, we had to leverage pertinent resources and time.

My Approach

After my initial product research, my task was to design the Data Visualization web app mockup and provide a mid-fidelity clickable prototype leveraging the Bootstrap 4 framework. Selected for its flexible framework, Bootstrap 4 met back-end requirements. Due to the stringent time constraints, I expedited my usual design process with weekly presentations of my work for team feedback. After iterations and design update presentations, I delivered the final Hi-Fi design. Simultaneously, I created HTML/CSS templates as part of my deliverables based on my Hi-Fi Mockups. Once completed, I provided the Hi-Fi Mockups and Mid-Fideltiy HTML/CSS templates to the full-stack developer so he could finish the project.

Result and Impact

I delivered the approved Hi-Fi Mockup and Mid-Fidelity HTML/CSS prototype for the DOPE team.

Project Fidelity
Mid and High

Device(s)/Platform
Web

Tools
Adobe Illustrator, Sketch, HTML, CSS, Bootstrap 4

Environment
Agile

Company
VMware, Inc.

Team/Department
DOPE

Problem

Dish Network requires a mobile, tablet, and large display TV app.

Objective
Design and develop a new interface for the TV product.

My Role(s)
UI/UX Designer, UX Researcher.

I led the design efforts for the new TV app.

My Approach

I worked directly with the Director of Product Design and Principal UI Designer to understand the purpose of this product and its target audience. From this point, I worked with the Engineering team to get the specifications required for deliverables.

This project required a new perspective from what was communicated by management. From the start, I focused on the information architecture. I was able to separate the main sections and patterns (e.g., filters, icons, loader, primary nav, shelves, and transitions) and the business required. At this point, I could do a deep dive into each template category and began my research into various TV apps.

With this project, I couldn't include any effects or transitions. With these parameters in mind, I focused on maximizing what I could with brand standards (e.g., color scheme, fonts, icons, etc.). I could design a cogent highlight state for the Guide, Sort, and Search UIs with this approach. Through testing the interface on various displays, I found the utilization of an inverted selection, rather than an outline, to be a prominent GUI component that was most effective for the product.

The Search UI was challenging for a widescreen display. Initially, I designed it to stretch 70-80% of the screen width. Realizing this would not work, I ended up redesigning my initial UI concept, which contained the elements but took up less screen width. This solution resolved the key selection issue in a search scenario. In conclusion, having a more concentrated area allowed the User to focus on one place, hence the split view approach with the search field on the left and programming on the right.

Result and Impact

I delivered the Hi-Fi template/mockup with approval from the Principal UI Designer.

Project Fidelity
High

Device(s)/Platform
Mobile, Tablet, TV

Tools
Adobe Illustrator and Photoshop

Environment
Agile

Company
DirecTV

Team/Department
Sling TV (formerly Sling Media)

Problem

hopTo requires an application with file editing and sharing capabilities with Desktop and Cloud access.

Objective
Design a custom file editing and file sharing native application for iOS and Android, with Desktop access.

My Role(s)
UI/UX Designer, UX Researcher, Content Strategist, and Visual Designer.

I led the design efforts for the first custom hopTo application.

My Approach

I worked directly with the Director of Engineering, iOS Engineering Department, Android Engineering Department, PM, Business, QA, and Marketing for the iOS/Android mobile and tablet application.

Working directly with Engineering to scope the overall information architecture required weekly meetings to ensure we agreed with the product direction. We addressed current and forthcoming tech issues, which helped shape the application. From here, I could iterate on the wireframes and present them to the larger team.

Since engineering had already begun the tablet application, business and marketing had decided this was the platform to target. However, this made downsizing to mobile more challenging, a pain point I would inevitably need to resolve. I continued to communicate and collaborate with a team of 8 engineers; half were directly involved in building the product on iOS devices, while the other half worked on Android devices.

Workspace, Secure Browser, and Inbox became the core interfaces for the application. The Workspace was the most challenging interface I designed for the hopTo application. This interface allows the user to manage all media files from various cloud accounts, folders, and filters. However, when concentrated on a smaller device, there were certain features we could not do without. For example, the tablet version allowed our customers to view their cloud account, folder, file name, file type, etc., and consolidating the metadata to mobile created some pain points. With some time and thought put into this issue, I came up with the concept of overlaying the cloud account icon (e.g., Dropbox, Google Drive, etc.) atop the file location icon. Therefore, our customers could immediately know what type of file and location of a particular file, in addition to other relevant info. (e.g., date, size, etc.)

Result and Impact

I delivered the High-fidelity mockup to both iOS and Android Engineering Departments.

Project Fidelity
Mid to High

Device(s)/Platform
iOS, Android, Mobile, Tablet, Desktop.

Tools
Adobe Illustrator, Sketch, and JIRA.

Environment
Agile

Company
hopTo

Team/Department
UX, Product

Problem

Huawei requires a custom native tablet file management application with Cloud capabilities.

Objective
Design a custom native tablet application.

My Role(s)
UI/UX Designer, UX Researcher, Content Strategist, and Visual Designer.

I led the design efforts for the media management application Dragonfish.

My Approach

I worked directly with the PM and Lead Engineers to configure the media file application.

Initially, the Principal Engineer presented me with a concept with what they [the Engineering Department] had in mind. In my meeting with engineers, it was communicated that they were working on creating a cloud app targeting the Apple tablet device. This was a great start to the project because I had my queries answered much earlier in the UX process than usual. From here, I continually collaborated with the Engineers, conducted research, and presented my designs to the stakeholders for feedback and updates.

Not only did the product name fit very well, but I took inspiration from it. Note: Dragonfish is located in the center of the Milky Way and is the largest cluster of stars in the Milky Way.

I found the name to be inspirational, and the theme had an impact on the GUI design of the app. From a UI perspective, I based the app's color scheme on various hues from the actual satellite images of Dragonfish. Once I had the color scheme and font, I started to design the GUI, distributing the theme throughout the app.

Dragonfish requires users to register an account to gain application access. Upon completing registration, our users could begin to access files saved onto Huawei Cloud. Furthermore, our customers could manage and edit files and folders with the option of sharing them. The low-fidelity screens show a general overview of the flow but do not reflect the end-to-end product of additional screens and patterns.

Result and Impact

I delivered Mid-fidelity mockups, specs, and assets to the team of engineers as deliverables.

Project Fidelity
Mid

Device(s)/Platform
iPad

Tools
Adobe Illustrator, Omnigraffle

Environment
Agile

Company
Huawei

Team/Department
R&D

Problem

Huawei requires a tablet application for tracking APs and AR tech integration to establish optimal WLAN location.

Objective
Design a custom native tablet application.

My Role(s)
UI/UX Designer, UX Researcher, Content Strategist, and Visual Designer.

I led the design efforts for the initial AP tacking application.

My Approach

I worked directly with the PM and Lead Engineers to configure the WLAN application.

After the initial meetings with the PM, I collaborated with Engineering on a series of ideas to hone in on a proper flow. The WLAN app focused on 3D rendering, AR, and leveraging device capabilities. As part of the exploration stage, the engineers had to test the technical capabilities of these features. Concurrently, I storyboarded the user journey that wasn’t limited to the following: User login, import image, rendering, APs, 3D interaction, and output. All the while, I created custom assets and implemented the initial concepts for the team to test.

The overall workflow concluded; once the user (existing or new user with Huawei) is logged in, they are provided several menu options. They can skip file import altogether to view APs in AR or import a JPEG file to render as a 3D UI. Choosing the file import option, the user will be directed to the device camera, where they can view APs in AR while the 3D processing is rendering. Once the 3D rendering is complete, the user is notified and can direct themselves to consider the 3D space of the blueprint they imported. [The option to view 3D later in the dialog was discussed but had yet to be approved]. As the last step, the user can save the file for future review.

Result and Impact

I delivered Mid-fidelity mockups, specs, and assets to the team of engineers as deliverables.

Project Fidelity
Mid to High

Device(s)/Platform
iPad

Tools
Adobe Illustrator, Omnigraffle

Environment
Agile

Company
Huawei

Team/Department
R&D

Problem

Simraceway requires a user installer as the initial step for members to access the game on their PC.

Objective
Design a custom game installer for Simraceway.

My Role(s)
UI/UX Designer, UX Researcher, Content Strategist, and Visual Designer.

I led the design efforts for the first custom Simraceway installer for PC.

My Approach

I worked directly with the VP of Engineering to understand the project's scope. Further communication and collaboration were with the 3D Modelers, Sound Engineer, and the engineering team based out of Romania.

After meeting with the VP of Engineering, I began researching software installers and installers in general. Here, I better understood the limitations, which did not suffice for what I wanted to do from a UX/UI perspective. However, I was clear with what I wanted the design to look like and the experience I wanted our customers to have. As part of my discovery, I found an independent developer specializing in custom installers. This was the resource I was seeking from a generic PC installer.

Despite the rigid framework, I could incorporate sound, custom backdrops, and components (buttons, loader, splash screen, and sound clip during the exhibition of the splash screen). I worked with an incomplete 3D model [based on the model I thought worked best for the project] that I edited in Photoshop as part of the final delivery. Throughout the process, I created a custom sound clip of a race car speeding by as a placeholder until I could work with the Sound Engineer for a final deliverable. This sound clip was played atop the Splash screen, adding a more engaging experience for the customer in the early stage.

Result and Impact

I delivered the High-fidelity mockup and assets to the engineering team in Romania.

Project Fidelity
Mid to High

Device(s)/Platform
Desktop (PC)

Tools
Adobe Illustrator, Adobe Photoshop, Installer framework.

Environment
Agile

Company
Ignite Game Technologies

Team/Department
Simraceway Performance Driving Center