Kodak Smile App
Improving the Onboarding & Editing Features for 100,000s of Users
Imagine
You're hanging out with your friends on a summer hiking trip. As always, everyone wants to document their precious moments with their friends!
You brought along your new Kodak camera and want to use it to take nice pictures of the trip, edit them and cherish the memories forever...
...except you find yourself being a bit confused using this app. You think to yourself "How does this thing work? How do I even pair my device? I don't understand these instructions. How do I take photos, select them and edit them?"
The UX of an app can completely make or break a person's experience with a product.
What are we solving?
The problem is that Kodak SMILE+ cameras are hitting the market, however, the old, existing Kodak SMILE app was compatible with printers only, not cameras. Now that cameras are being added, along with a new photo editing feature called "Pre-Cuts", the app has to accommodate the new device, features and display information accordingly.
Pre-Cuts are a photo feature in which a user can print two stickers on a paper, and peel them off as opposed to a traditional single printed photo.
This means the photo editing and printing flows, along with many other things would have to change to accomate the new SMILE+ camera functionality with the app.
Problem Statement & Understanding the User
The Kodak SMILE app needs to be updated to feature the SMILE+ camera and the Pre-Cuts photo editing feature.
User problems and "How might we" statements were brainstormed in order to better understand how the new update can serve users and help them achieve their goals.
Pre-Cut Wireframes & User Flows
We initially created wireframes to understand how the flow would work. This was split off into two parts:
1. One being the Pre-Cuts photo flow (for Developers)
2. Additional flows - Onboarding, Quick Tips, Firmware, Connection (for Developers)
3. Additional screens that need graphic updates (e.g. Settings pages, Pop-up notifications, etc.) (for Graphic Designers)
The Pre-Cuts photo flow was planned by taking into consideration the essential features for the user to complete their task of selecting a photo, editing it, and printing it. Along the way, various decisions had to be made based on what the user's action would be.
For example, a user selecting 0, 1, 2 or 2+ photos would have to be notifiied accordingly that Pre-Cuts only works with 2 photos and that they must select 2 photos.
We'll take a look at the wireframes for Pre-Cuts below.
Updates to the Flow
We realized that certain updates to the flow were needed when certain states were not accounted. Thus, we restructured our approach and added in certain error states in the updated flow below.
Iterating Based on Constraints & Challenges
Some newly found challenges to consider were:
- How to combine the editing features tab with the new Pre-Cuts since that would have to be shown in the bottom navigation bar
- How to show outline of Pre-Cut frame
- How to show popup for Pre-Cut sticker paper
- How to maintain consistency with Kodak's branding guidelines
Working with Graphic Designers
Once the main interface and flows were formalized, in order to develop updated camera graphics to represent the SMILE+ camera, I took pictures of the camera and sent them to graphic designers to create high-fidelity graphic renderings of the camera to implement in the final interfaces.
Below are wireframes we had set up for the Graphic Designers before we had their final renderings.
Developer Handoff, Review, & Challenges
Upon finalizing the wireframes, I sent them over to developers using Asana to track and manage the progress of the project. It was crucial to ensure deadlines, expectations and outcomes were set and clear as they was no proper project manager. That was a challenge to review their builds and provide feedback and iterate based off of that.
We ran into some problems and had to work out solutions with the developers. One example is that the slider for resizing photos needed to be reworked as it was not responsive enough for users.
Other Flows & Key Considerations
In addition to the previous flows, there were many parts of the app that had to be updated to accommodate for new features,
Thus, the flows for the app onboarding, quick tips, firmware and connecting a device from the gallery were also updated.
These flows had to account for different potential paths the user could have experienced.
Examples include connecting a printer or camera, firmware updates or even error states.
High-fidelity App
The app is available for download now in the iOS & Android app stores!
Users have benefitted from being able to print new photos and stickers. It has also been reported that the onboarding experience is clearer and there is less confusion amongst users.
Cohesive Onboarding
- Clear to the user printers and now cameras, work with the app
- Showing how to use the app with simple onboarding steps
Unique Photo Editing Experience
- Creating a seamless editing experience
- Determine what to cook with the ingredients you have in a matter of minutes
Hardware & Software Interfacing
- Creating an intuitive experience between device & mobile app
- Help users reduce eating out and instead cook restaurant-worthy meals at home
Developer Handoff
- Handing off prototypes & wireframes with proper documentation
- Reviewing developer live-builds and ensuring app matches prototype
Possible Improvements
With more time and resources, and with hindsight being 20/20, this project could have had many improvements.
There was a limited UX research and competitive analysis phase. This could have impacted the project by causing UX decisions and flows to be made with hasty, pre-conceived notions of what users want and what the optimal flows to achieve that would be.
Additionally, there was limited user testing conducted. Changes and flows were validated with in-house quality assurance teams, though that can be biased and is not necessarily reflective of the wider audience of app users. In the future, improved user testing can be conducted to receive stronger feedback.
Key Takeaways
- Onboarding users to create a cohesive, enjoyable user experience
- Managing changing timelines and deliverables for fast-paced projects with no project manager
- Iteratively adjusting product based on feedback & human-centered design