CMOS App
BNP ParibasObjective
Design CMOS (Cash Management Online Service) app that allowed end-User to make, view, manage and print online transactions.
Summary
Due to the early stages of this product, and the new team being formed, the environment was very much a startup despite BNP Paribas having bought Bank of The West. As we were building this app, we also were adding to the incomplete design patterns which allowed for more creative and design customizations that would eventually be refined in later stages.
One of several projects I was assigned was File Upload. Here, the end-User can upload a .txt file with options, such as filtered delimiters, column view options and save options. These saved templates can be edited or used again- and even applied to other uploaded files saving our end-User a lot of time.
A bigger project I worked was Login. The information architecture for Login had several scenarios. For one, the end-User is required to receive a PIN from Administrator via email. Once the PIN is received, the end-User is given 3 attempts to enter PIN correctly. If the User has failed, the User will need to contact their Administrator to retrieve another PIN. If successful, the User can proceed to create/enter Username and Password. Once successfully logged in, we can provide biometric options for the User to setup at any time.
Fidelity
Low-Mid
Device(s)
iPhone X, iPhone 8 & Web
Role(s)
UX Designer, Interaction Designer
Tools
Sketch
Environment
Agile
Company
Bank of The West | BNP Paribas
Android App
GoogleObjective
Design Family Management UI for Family Link Android app.
Summary
A great aspect of designing and communicating solutions was based on impromptu whiteboard sessions. Having such resources readily available in all conference rooms made communicating such ideas easier. With this mentioned, my focus was to translate and design from PRDs that were provided with every project. The Family Management UI focused heavily on Parent, Child, and Supervisor (i.e. members). Some of the challenges were addressing issues that revolved around the number of family members; when and where to implement features without breaking the existing framework and providing concise deliverables to engineers, content strategists, PM, and legal.
Initially, and from a UI perspective, the product utilized GM (Google Material) pattern but would later see the GM2 implementation that replaced the teal hue with a blue variation and replace Roboto font with the new Google Sans.
Having worked on various features for Family Management, I had to rebuild Parent Sign-On page via web. Here the parent could make additional changes from an admin perspective. I ended up rebuilding the UI specs in Sketch via Inspect Element.
Fidelity
Mid-High
Device(s)
Android, Chromebook & Web
Role
UX Designer, Interaction Designerr
Tools
Sketch, HTML, CSS
Environment
Agile
Company
Google
Biometric App
Wells FargoObjective
Design Biometric UI for CEO (Commercial Electronic Office) product.
Summary
The biggest challenge I faced on this project was to have a user-centered focus that implemented device limitations and simplicity in design.
In other words, integrating hardware and software capabilities that the end-User could easily engage with without being deterred, coupled with stringent brand guidelines that met Accessibility standards.
Following WF BOSD (Business Operating System & Device) monthly report, there had been discussions as to what device we were targeting with consideration to hardware capabilities. At this time, iPhone X had been announced but not yet available to consumers. In the interim, it was agreed that the targeted device was going to be for iPhone 6-8 because the camera on the device would provide the proper face detection that met our needs. This camera did have some limitations and would require brighter ambient environment for the User. However, the goal was to have an existing design in place that could be integrated and readily available, from the backend, for newer devices like the iPhone X and Google Pixel.
In addition to hardware and software considerations, Wells Fargo requires that Accessibility standards are met and integrated into every product as part of brand standards.
Fidelity
Mid
Device(s)
iOS/Android mobile
Role
UX Researcher, UI/UX Designer, Interaction Designer
Tools
Adobe Illustrator, Sketch, Invision
Company
Wells Fargo
Data Web App
VMwareObjective
Design/develop data visualization web app, for DOPE (a.k.a Data, Optimization, Prospecting & Enablement) product.
Summary
For this project, my task was to design a mockup of the Data Visualization web app in addition to providing a prototype. At the
time Bootstrap came out with version 4 of their software. The consensus was to have this framework that met back-end requirements. I had approached this project doing as
much research as was needed to better understand the product. I was the only designer on a team of 5 individuals, each with their own roles. Due to the
stringent time constraints, I expedited my usual design process. Having delivered the final design, I continued building the HTML/CSS templates which were finally
handed off to the developers. At this time, a full stack developer was required to finish the projects based on my deliverables. I would have loved more time
on this project to complete a hi-fi mockup and prototype.
Fidelity
Mid
Device(s)
Web
Role
UX Researcher, UI Designer, Developer
Tools
Adobe Illustrator, Sketch, HTML, CSS, Bootstrap 4
Environment
Agile
Company
VMware
Chatbox
FujitsuObjective
Design/develop chatbox for mobile and tablet devices, on iOS/Android.
Summary
The logo I designed, for the Frap app, derived from various graphical components of
messenger icons that incorporated a robotic theme. The biggest challenge I had was the merge of a robot and messenger accents.
The theme was a collaboration effort with the Product Owner and myself.
Originally, it was discussed that the product was going to have a new feature added- a chatbox. However, with a deeper look into who our target audience was going to be, it became a larger product than previously anticipated. The initial concept had a chatbox appear via on/off component (e.g. toggle/switch), in Settings, but when the end-User required various admin approval, we needed to approach the project differently. We had to consider at what points does the end_User require access to a chatbox, admin approval, scope/scale, technical limitation and more. These were some of the pain points that needed to be addressed. In addition, there were other features, such as the marketplace where the end-User could have access to various products, news, and media outlets. The integration of the chatbox became more comprehensive at this point in order to create an intuitive and rich interactive experience.
Fidelity
Mid
Device(s)
iOS/Android Mobile & Tablet
Role
UI/UX Researcher/Designer, Visual Designer
Tools
Adobe Illustrator, Sketch
Environment
Agile
Company
Fujitsu Laboratories of America
Thermostat App
Vine Thermostat | BoschObjective
Design thermostat UI based on pre-existing Vine standards and Bosch brand components.
Summary
This was my very last freelance project. The challenge with designing this interface was that it required every component to be delivered to
engineers via Photoshop. This meant that transitions and effects were not applicable due to time constraints that I had been given. For example, every
micro interaction was its own image- nothing was dynamic about this interface; it was all just a series of images. As a designer, this took a lot of time to
put together due to the amount of production. In addition, this process and lack of designers limited elaborate custom design interactions/micro-interactions
that would otherwise have been feasible. I had few ideas for applying effects (e.g. textures, gradients, etc.) to make the UI stand out a bit more while applying
a sleek style. However, my conservative approach had me utilize flat colors instead. I had hoped to provide an A/B design that would not have changed much of the UX
but would have certainly looked different. In the end, I handed off what I had was very happy Bosch kept the integrity of my design.
Fidelity
Mid
Device(s)
Thermostat
Role
UI/UX Designer
Tools
Adobe Illustrator/Photoshop
Environment
Agile
Company
Vine Thermostat | Bosch
TV App
Sling Media | Dish NetworkObjective
Design/develop TV App for mobile, tablet and TV screens.
Summary
I had so much fun designing this product. Despite having a team of 2 Principle UI Designers and 2 Principal UX Designer, I was given the
opportunity to take the lead on this project. Before I started, I worked directly with the Engineering team to get the specifications required for deliverables. At this point, I started
researching various TV apps and leveraging pre-existing resources.
With this project, I wasn't able to include any effects or transitions. And, with these parameters in mind, my focus was to maximize what I could with brand standards (e.g. color scheme, fonts, etc.). It's with this approach, I was able to design a cogent highlight state for the Guide, Sort, and Search UIs. I found, through testing the interface on various displays, the utilization of an inverted selection, rather than an outline, to be a prominent GUI component that could be utilized across the product.
Besides working with some restrictions, in regards to designing without effects and transitions, there were some pain points that I needed to troubleshoot. For example, the Search UI was challenging not only due to the context that was required but also designing for a widescreen display. Originally, I designed it to stretch 70-80% of the screen width. Realizing this was just not going to work, I ended up redesigning the UI that would contain the elements and take up less screen width. This was the result after addressing the difficulty of having our end_User select keys in a search scenario. I found that it was useful for the User to traverse the keys if they had to do so on a large screen with content taking up 80-90 percent of the width. Instead, having a more concentrated area allowed the User to focus in one area, hence the split view approach with the search field on the left and programming on the right.
Fidelity
High
Device(s)
TV
Role
UI/UX Researcher/Designer, Visual Designer
Tools
Adobe Illustrator/Photoshop
Environment
Agile
Company
Sling Media | Dish Network
E-Commerce Web
ShopOnMain LLCObjective
Design/develop e-commerce website
Summary
What was great about working for this startup was that the product was established but the overall design had not been considered outside the logo. So, having approached this project from the start,
there were a lot of great discoveries to be made that needed to be vetted by the developers. For example, the inquiry of how to improve location backdrops per city/retailer brought up many intriguing scenarios. However,
from a logistical standpoint it wasn't feasible due to bandwidth.
The site was based on 4 breakpoints and any new features implemented required additional consideration due to the amount of backend implementation and production. While much of the design process catered to e-commerce best practices, the overall scope of the product allowed for various design nuances that were customizeable. Specifically, the main menu allowed for the end-User to select Featured, Trending, Recent and Favorite retailers. This was based on how many units each retailer would sell through our site. However, a customizeable feature would eventually be implemented to consider a User's needs, based on various metrics.
Fidelity
Low-Mid
Device(s)
Modern Web Browsers
Role
UI/UX Researcher/Designer, Visual Designer
Tools
Balsamiq/Axure, Omnigraffle, Adobe Illustrator/Photoshop
Environment
Agile
Company
ShopOnMain LLC
Control Panel
hopToObjective
Design/develop control panel for User desktop accessibility.
Summary
The overall design of the Control Panel had more content than what was originally communicated. The first iteration was not as cluttered and utilized spacing properly. This is a good example of having
continuous content added to a project without much consideration of design and targeted platform(s). I knew once I had received the additional content, that it challenged the integrity of the Control Panel.
The Support and About pages are the only two interfaces that kept the original design. I realized these 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 due to the fact that these were content heavy.
The menu column was not complete. I was in the process of designing the custom icons and had exhibited these in the UI because I was gauging the weight and overall impact of these custom icons. Once I completed the icons, I planned to apply the proper amount of leading.
Fidelity
Low-Mid
Device(s)
Desktop
Role
UI/UX Researcher/Designer, Visual Designer
Tools
Balsamiq/Axure, Omnigraffle, Adobe Illustrator/Photoshop
Environment
Agile
Company
hopTo, Inc.
iOS/Android
hopToObjective
Design/develop software to allow User to edit and share documents, on iOS/Android devices, for mobile, tablet and desktop.
Summary
When I started on this project, I worked from the design handoff that was the first iteration on an Apple tablet. My concern at this point was working from a tablet app and downsizing to a mobile device. I knew we
weren't there yet, but it was certainly a pain point that I would inevitably need to resolve. Fortunately, I worked directly with a team of 8 engineers, half of whom were directly involved in building the product on iOS devices, while the other half worked
on Android devices. In addition, I worked directly with CEO to get more insight into longterm goals that would help me get a head start with what I was already creating with the team.
The first task was to familiarize myself with the product, as per usual. Second, it was to implement and tweak new features while redesigning the product. At this stage, I worked directly with Marketing, Business, Engineers, and PM to get a workflow established. Our PM was good at providing me with various content and deadlines as well. Soon, we had built and integrated a comprehensive product to start on the mobile version.
One of the more prominent pain points I encountered was the Workflow tab UI. Here, the end-User could manage all media files from various cloud accounts, folders, and filters. So, having a cogent design on tablet device made things easier due to the amount of space provided. However, when concentrated to a smaller device, there were certain features we could not do without. For example, the end-User was used to viewing their cloud account, folder, file name, file type, etc. And, the pain point was how do we convert this so that all the pertinent information was displayed as needed. 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 file location icon. Therefore, the end-User could immediately know what type of file and location of a particular file, in addition to other relevant info. (e.g. date, size, etc.)
Fidelity
Mid-High
Device(s)
iOS/Android Tablet & Mobile
Role
UI/UX Researcher/Designer, Visual Designer
Tools
Balsamiq/Axure, Omnigraffle, Adobe Illustrator/Photoshop, Final Cut Pro
Environment
Agile
Company
hopTo, Inc.
Web App
ViewlanderObjective
Design website for a music ticket sales startup. Implement brand/identity and rich interactive components where necessary.
Summary
Viewlander was a music distribution startup company that was based in Alameda, CA. At the time, and unlike their bigger counterparts, they wanted to provide live-streamed events to their end users via their site.
The homepage concentrated on several features, that included: ticket verification, categories, search filters, upcoming events, advertisement, and account registration and login. I designed the interface to exhibit these components based on hierarchy and personas that had yet to be vetted. The overall design was the first iteration of the site. The only parameters given were purple and deep blue hues.
Technically, the focus was on desktop web application and would eventually have a tablet and mobile version to follow. I utilized percentages at the time because the breakpoints were not yet defined.
Overall, this freelance project was an interesting experience that I would have loved to see grow into something bigger. I had so many ideas that could have been implemented to capture explorations of our the end user.
Fidelity
Low-Mid
Device(s)
Web
Role
UI/UX Researcher/Designer, Visual Designer
Tools
Adobe Illustrator/Photoshop, Installer software
Company
Viewlander
Cloud Tablet App
HuaweiObjective
Design an app, for Huawei, that allows Users to manage media files.
Summary
Dragonfish was the second app I designed for Huawei. In our initial meeting with engineers, it was presented to me that they were working on creating a cloud app targeting the Apple tablet device. The name was agreed upon the engineers
they found to be adequate for the actual product functionality- and I did as well. [Located in the center of the Milkyway, Dragonfish is the largest cluster of stars in the Milkyway}
I found the name to be inspirational and the theme had an impact on the GUI design of the app. The hues were selected from actual satellite images of Dragonfish. Once I had the color scheme and font, I began to design the app, distributing the theme where necessary but that was not obtrusive to the overall functionality and GUI.
Fidelity
Mid
Device(s)
iPad
Role
UI/UX Researcher/Designer, Visual Designer
Tools
Adobe Illustrator/Photoshop
Environment
Agile
Company
Huawei
AR Tablet App
HuaweiObjective
Design an app, for Huawei, that allows the User to access and track Wireless Local Area Network. Implement augmented reality, brand/identity and rich interactive components where necessary.
Summary
The WLAN app focused on 3D rendering, AR and leveraging device capabilities. Storyboarding included User login, import image, rendering, APs, 3D interaction, and output. Mid-fidelity mockups, specs,
and assets were provided to the team of engineers as deliverables.
Once the User opens the app, the login screen appears with the option to log in as an existing user or register with Huawei. In addition, a "Forgot Password?" link was also implemented. Once the user is logged in, they are provided with several menu options where they can choose to skip file import all together 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 view 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.
Fidelity
Mid
Device(s)
iPad
Role
UI/UX Researcher/Designer, Visual Designer
Tools
Adobe Illustrator/Photoshop
Environment
Agile
Company
Huawei
Game Installer
Ignite Game TechnologiesObjective
Design an installer, for Simraccway, that allows the User to download and engage with the app. Implement brand/identity and rich interactive components where necessary.
Summary
This was one of the bigger projects I worked on during the end of my contract, at Ignite Game Technologies. Customizing a PC Installer was challenging due to the existing limitations in addition to the fact that I had never designed one before.
Originally, Simraceway had utilized the generic installer but had not established concise content or implemented branding. I found this to be a great opportunity to execute something special that I had in mind.
The team was comprised of other designers, engineers, and 3D modelers. But for this project, I worked directly with engineers, sound engineer, and 3D modeler. My first objective was to do research into customizing installers in addition to leveraging existing assets. The 3D modeler provided me with an incomplete asset(s), due to the car I chose to use, which I modified in Photoshop. I used this as the main backdrop for the installer. After customizing the backdrop, buttons, loader and splash screen, I then wanted to incorporate a sound clip during the exhibition of the splash screen. I thought this addition was a powerful experience for our end user. The end result is what I've exhibited here, however, it wasn't complete due to the completion of my contract.
Fidelity
Mid-High
Device(s)
PC/Desktop
Role
UI/UX Researcher/Designer, Visual Designer
Tools
Adobe Illustrator/Photoshop, Installer software
Environment
Agile
Company
Ignite Game Technologies
Mobile App
Trichotomy Media LLCObjective
Design app User flow and mockup for mobile app game.
Summary
Real Video Poker mobile app was created for a couple of reasons. For one, the Marketing Lead on our team was an avid Poker player and thought it was a great app for us to create and develop, as one of our games. Second, we thought it would be great to
approach this app by adopting the original Poker game that implemented the 80s-retro design.
Once started, I came up with additional design styles. The Splash screen I designed and based on the aesthetics of the Slot machines hardware and signage. The main GUI, I incorporated the 80s Game Station hardware synthetic textures as the actual navigation buttons to our app.
Fidelity
Mid-High
Device(s)
iPhone/iPod
Role
UI/UX Researcher/Designer, Visual Designer
Tools
Balsamiq/Axure, Omnigraffle, Adobe Illustrator/Photoshop
Company
Trichotomy Media LLC
Mobile App
Trichotomy Media LLCObjective
Design app User flow for mobile app game.
Summary
Premonition app was the second game we created, at Trichotomy Media LLC. I got the idea from the "Magic 8 Ball Classic Fortune". As a fun game for kids, it wasn't designed for adults. It was this reason I wanted to design an app that contained Q&A for a
mature audience (18+).
The inception of content derived from personas created internally. For example, one user may be a 20-something individual who is starting their career, seeking advice from their network (e.g. friends, colleagues, family, etc.). In this case, addressing the possible scenarios helped in developing our Q&A.
The theme of the design was intended to evoke something transcendent with a tinge of a serious tone. The head was based on a photo I took of myself and the back button(s) were based on a photo of my hand as well.
Fidelity
Mid
Device(s)
iPhone/iPod
Role
UI/UX Researcher/Designer, Visual Designer
Tools
Balsamiq/Axure, Omnigraffle, Adobe Illustrator/Photoshop
Company
Trichotomy Media LLC
Mobile App
Blaze MobileObjective
Design and develop innovative mobile commerce, health care, banking and advertising solutions.
Summary
Blaze Mobile focused on mobile payments, ticketing, coupons, and other mobile applications. Integrating NFC (Near-Field Communication) into the app was a challenge in that it was a relatively new technology.
Making it seamless across the app and user-friendly would become integral to the product.
Initially, the targeted devices were small cellular devices that would eventually be implemented to the iPhone 3G, in the 2nd quarter of 2008. However, the 1st quarter was heavily concentrated on resolving any existing bugs for small cellular devices.
In the beginning, much of the GUI was designed in bytes in Photoshop. Assets were created in these Photoshop files and delivered to engineers to implement. The challenge was literally having to design in pixels for GUI components.
Fidelity
Mid-High
Device(s)
iPhone/iPod
Role
UI/UX Researcher/Designer, Visual Designer
Tools
Balsamiq, Adobe Illustrator/Photoshop
Company
Blaze Mobile
Contact Info.
San Francisco Bay Area, CA | USA
Copyright © 2016 Marcus Woodworth Creative. All rights reserved.
Terms and Conditions | Privacy Policy