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

Fujitsu Laboratories of America, Inc. requires a Chat Box for iOS/Android mobile and tablet devices.

Objective
Design and deliver Flow, Lo-Hi Fidelity mockup, and prototype.

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

I led the design efforts for the initial project scope. Here, I created a custom design for the Chat Box and a custom product logo.

My Approach

I worked directly with the Manager/PMP to understand product needs and target audiences. From here, I collaborated with the Marketing team and Developers to ensure product consistency and establish UX milestones.

The initial concept had a chatbox appear via an on/off component (e.g., toggle/switch) in Settings. However, when the end user required various admin approvals, I needed to approach the project differently. I had to consider at what points the end user requires access to a chatbox, admin approval, scope/scale, technical limitations, and more. These were some of the pain points that I needed to address. The integration of the chatbox became more comprehensive at this point to create an intuitive and rich interactive experience.

Initially, the product would have a new feature- a chatbox. However, with a deeper look into our expanded services in the marketplace and growing target audience, it became a more extensive product than previously anticipated. Marketplace expansion alone, where the end user could access various products, news, and media outlets, forced the team to pivot in a new direction.

Result and Impact

I packaged designed assets (e.g., custom icons, specs, and HTML/CSS files) and delivered version one of the R&D project. At this time, product owners decided to stop the development of their new messenger because they planned to select an open-source messenger.

Project Fidelity
Mid and High

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

Tools
HTML, CSS, Adobe Illustrator, Sketch

Environment
Agile

Company
Fujitsu

Team/Department
R&D, Fujitsu Laboratories of America, Inc.

Problem

Vine requires a redesign of their thermostat, currently in beta test, for licensing.

Objective
Design a new interface for the Bosch license deal.

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

I led the design efforts for the thermostat redesign.

My Approach

I worked directly with Marketing and Product to safeguard product integrity before the revamp. From here, I was able to understand product scope and processes.

The rigid framework presented a design challenge since it did not support many interactive elements: micro-macro animations and transitions, as one may expect. Every micro interaction had to be a series of images. In turn, building these assets out took a lot of time to put together, increasing the production required. However, this wasn’t much of a deterrent since I had anticipated this design impediment, having already beta-tested the device. The critical interface was broken down into several parts, providing a clear UX path but requiring several custom icons. As the sole UI/UX Designer, I managed to work up to a mid-fidelity mockup due to time constraints. In the end, I handed off what I had, resulting in the Vine team and Bosch retaining those major patterns and UI direction.

Result and Impact

I delivered the mid-fidelity mockup with custom conceptual icons for the team overseas to implement.

Project Fidelity
Mid

Device(s)/Platform
Thermostat

Tools
Adobe Illustrator and Photoshop

Environment
Agile

Company
Vine Connected Corporation

Team/Department
Vine Thermostat

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

ShopOnMain LLC requires a responsive e-commerce website.

Objective
Design and develop the new company site.

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

I led the design efforts for the first company website. The product required I design the overall site beyond the scope of the logo. From the start, there were a lot of great UX discoveries to be made that needed to be vetted by the developers from a backend implementation and production perspective. For example, a concept I created for location backdrops per city/retailer brought up many intriguing scenarios. However, it wasn't feasible from a logistical standpoint due to bandwidth.

My Approach

I worked directly with the Director of Marketing and Developers to understand the project scope and process.

This project required a responsive site with four breakpoints. The main feature was the interactive shopping map. Here, the customer can access ShopOnMain LLC small businesses in various states. Much of the design process integrated e-commerce best practices, but the product's overall scope allowed for customizable design nuances. Specifically, the main menu I designed authorized the end user to select Featured, Trending, Recent, and Favorite retailers. However, later iterations of the primary Feature section would lead me to create a personalized Featured section for our users. This feature logic was contingent on how many units each retail shop would sell through our site and on providing a customized experience for our users who were more focused on their shopping needs. The feature would eventually be implemented and based on various metrics—making it more of a personal experience that was equally scalable.

I designed several templates for the site: interactive map, product page, feature section, customer support, customer checkout, and shipping and return information. Once these initial designs were in the low-mid fidelity, I provided the Photoshop assets and templates to Dev for reference and to begin the build as I worked towards mid-fidelity.

Result and Impact

I delivered the low-mid fidelity templates.

Project Fidelity
Low-Mid

Device(s)/Platform
Web

Tools
Adobe Illustrator and Photoshop

Environment
Agile

Company
ShopOnMain

Team/Department
Design

Problem

hopTo, Inc. requires a control panel for Desktop.

Objective
Design a custom interface for the Control Panel.

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

I led the design efforts for the first Control Panel at hopTo, Inc.

My Approach

I worked directly with the software engineering department.

First, I had to work on editing content from the initial Control Panel concept I designed. The robust content came from business but created clutter and layout issues. Once I received the business approval of my edited content, I could focus on the Control Panel layout and design more.

The Support and About pages were the two pages I wanted to model the rest of the Control Panel UIs. However, there were limitations that I faced with various interaction design concepts. My objective was to redesign Settings and Licensing because these remained content-heavy.

The menu column was a work in progress. I was designing the custom icons and exhibited these in the UI because I was gauging the weight and overall impact of these custom icons. Once I completed the icons, I applied the proper leading, margin, and padding.

Result and Impact

I delivered the low-mid fidelity templates to the software engineer. From here, ENG was able to start writing the code. Simultaneously, I worked on other projects as a lead and had to put the Hi-Fi Control Panel on hold temporarily.

Project Fidelity
Low to Mid

Device(s)/Platform
Desktop

Tools
Adobe Illustrator and Sketch

Environment
Agile

Company
hopTo

Team/Department
UX, Product

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

Viewlander, an online music distribution startup, requires a website emphasizing a new brand/identity.

Objective
Design a custom responsive site.

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

I led the design efforts for the first website for Viewlander.

My Approach

I worked directly with the founders to understand the business needs to configure a proper user journey. At the time, the focus was to build the site out, emphasizing live-streamed events to their end users via their site.

I was working directly with Engineering to understand technical parameters for the flex site. Technically, the focus was on desktop web applications and would eventually have a tablet and mobile version to follow. I utilized percentages at the time because the breakpoints still needed to be defined. The homepage concentrated on several features: ticket verification, music genres, search filters, upcoming events, advertisement, account registration, and log in. I designed the interface to exhibit these primary functions and components based on hierarchy and personas that had yet to be vetted. The overall design was the first iteration of the site.

I started researching similar companies and other areas to scope out features that could be utilized for this project. From here, I could compile various patterns and ideas that would lead me to customize my components. Simultaneously, I began branding with a custom color palette and visual brand icon.

Result and Impact

I delivered the High-fidelity mockup to owners.

Project Fidelity
Mid to High

Device(s)/Platform
Web

Tools
Adobe Illustrator, Sketch, Omnigraffle

Environment
Agile

Company
Viewlander

Team/Department
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