June 2016 - May 2017
Kodak announced the new Super 8 movie camera at CES 2016 - a blend between analog and digital.
Midway through the summer, me and another designer were tasked with creating an online portal that
enables Super 8 customers to mail in their film to be digitally scanned, and manage those files
I did most of the UX on the project, established and executed a visual design consistent with new brand guidelines, and was the main point of contact with the (internal) client, contractor, and other involved parties. Although it seems simple, this is the most complex project I've worked on to date. We made something from nothing, encountered previously unknown and confusing constraints along the way, and argued for major changes in functionality.
UI/UX, Visual, Motion Prototyping
Design: two months
Development: in limbo
To start wrapping my head around everything, I compiled a live document to keep track of the things I knew were needed, questions about points that needed to be clarified, and suggestions to improve the experience. At this point I didn't know how much control I had over the flow.
We wrote down every core and extra feature we could think of for each of the pages in the portal. These would later be combined, altered, or eliminated before being implemented.
We were given a document to start with that detailed how the Kodak online store would
interface with this portal being developed by an external contractor and the 3rd-party
It used a confusing credits system and took the user outside of the portal's flow.
The process starts with the user signing in or creating an account if they don't already have one. The fields from the signin form are reused for the signup form, meaning only one additional field needs to be added instead of directing the user to a new page.
Upon first logging in, a new user is redirected to the Account page to finish filling in
some details which are used later to determine locales, generate shipping labels, and
find which lab is closest to ship the film to.
Existing users won't see this page when logging in unless they navigate to it from the global navigation.
This was the initial page presented to the user upon logging in. Clicking on one
of the four film types in the top row would start a new film processing order pre-filled
by this selection.
Below are graphics advertising the various upgrades available to order with a film order. Clicking on one would take the user to the Services page where each of the upgrades are explained in terms targeted at users new to film and film terminology. These were planned to be upsells.
This was quickly abandoned and integrated into another page.
1) It was intentioned that users could buy upgrades to their film on the Kodak online store before being redirected to the portal. The purchase of these non-physical items show up as credits in the KAMS portal to be applied to rolls of film. If no credits are available, the film upgrades can still be purchased inline below.
2) Create a new order by adding a single cartridge (AKA roll or reel) and giving it a name. The field next to the name is a unique identifier for the lab and the system to keep track of the cartridge and the upgrades associated with it.
3) The user can upgrade the resolution their film scanned at by using existing credits or adding an upgrade to their order.
4) The total cost of the selected upgrades for an order is displayed at the end of the row.
5) Users can add a group (bulk) order with a unique identifier that must be entered and verified for each cartridge. The upgrades available for single cartridges are also available for groups, but aren't pictured.
6) If the user has selected upgrades to be purchases, they will be redirected to a payment site and then back to the next screen upon completion.
A low-fidelity version of the orders page in list view. I anticipated users having a lot of img to manage so I added an option to switch between the concise list-view and the visual thumbnail-view.
1) Create new order button.
2) Area for alert message.
3) Search and action bar.
4) A project name with a group of cartridges. The idea of img with associated cartridges was removed in favor of single cartridges for simplicity.
5) Select one or more cartridges to perform an action.
There's a lot going on in this page, but the bottom half is just showing hover states of the action bar buttons.
1) img are separated into three tabbed areas: New - for cartridges that have yet to be sent; Pending - for cartridges in the mail or are being processed; Finished - cartridges that have been scanned and uploaded to the portal.
2) Filter and sort the img being displayed.
3) Contextual action buttons to Upgrade, Add to basket, Download, or Delete cartridges. These were removed for simplicity as the functionality is available on the New Order and Media pages.
4) A project with details about the video and selected upgrades shown.
5) Interactive hover states for the action bar buttons; these were all eliminated.
1) Simplified action bar and filtering options.
2) Thumbnail of a project and its respective details.
1) Media player with standard controls and mark-in and mark-out trimming options.
2) Select post-scanning upgrades like color grading and preview them on the selected media.
3) Media details and download.
4) View other img.
The ability to buy upgrades (services) from this page was later removed, but its role as a learning resource page for film terminology and upgrades remains core.
1) It was intentioned to allow customers to buy upgrades in physical stores via a plastic gift certificate with a code on the back to be entered and credited here.
2) The user's available credits are displayed here.
3) Each of the upgrades are described here with an "add to cart" button.
4) View the total price of the items in the cart and edit the quantities of the upgrades.
5) Checkout and be redirected to a payment page.
As the core pages and the features within were in flux, we mapped out some of the flows a user might encounter to make sure everything was happening in the proper order.
You can use the keyboard arrows to navigate the carousel.
I used my experience with Kodak's new and developing brand guidelines to craft a cohesive design consistent with the work I had done already. The icons used were exclusively taken from the Kodak icon library I had previously created. Finally, I designed an email template for the automated emails sent by the system and a generated packing slip to be printed by the user.
Not every change on our wishlist made it to the first phase of development, but it was valuable experience designing with constraints and working with a client to build the product possible for the user. I believe I missed the mark on the New Order page by placing the focus on speed rather than usability. A redesign of that page is next on my list.
The Reel Film app helps you keep track of
the latest movies showing on film in your area, learn about movies shot on film, and find film
theaters while on the go. It was in production over the summer with an August release date and I was
tasked with redoing the icons in the app to make them cohesive.
I ended up redesigning the 40+ screen app on my own by simplifying the information architecture, establishing a cleaner visual style consistent with the new brand guidelines, making a set of animated onboarding illustrations, and finally creating an icon library to be used across all Kodak packaging and digital products.
UI/UX, Visual, Iconography, Illustration
The process I followed for the redesign of Kodak.com's global homepage and secondary levels was
not one I typically follow. I started with some design explorations of the homepage to see what it
might look like with the new brand guidelines applied but wasn't expecting to take them
A couple months later, I was tasked with revisiting the explorations I did and bringing them to completion to implement as a new website design. I wasn't able to complete a UX study or research, so I focused on making an improved global navigation experience. Kodak's website as a whole has three or more design versions spanning a decade that are still live and have different navigations.
UI, Visual, Motion Prototyping
Kodak's site as a whole felt very templated and corporate with un-sexy or cheesy stock images thrown about. The goal was to create a new, simpler platform to display and rotate fresh content to be consumed by users while retaining necessary product and support pages for B2B customers.
Kodak frequently collaborates with artists and photographers like Jefferson Hack which provides valuable and nice-looking content to feature front and center.
These iterations ideally use a unique design for each feature, but the actual implementation uses a generic template for a text blurb and CTA that's out of my control. The footer was also developed based off of initial designs I made but not quite where it should be.
As a brand licensor, Kodak provides brand guidelines and design help to its brand licensees to keep
consistent design across the large number of licensed products.
I was tasked with exploring what a photo book creator mobile app might look like with the new branding so we could give it to a brand licensee as an example.
UX/UI, Visual, Branding
These iterations ideally use a one-off design for each feature, but the actual implementation uses a generic template for a text blurb and CTA that's out of my hands. The footer was also developed based off of initial designs I made.