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

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 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