CodeLab Vault
CodeLab Vault is an internal tool designed to centralized photo uploads across a 60+ member organization.
CONTEXT
Codelab is a 60+ member tech organization at UC Davis. Codelab builds products for externally sourced clients, including but not limited to, Reddit, GoodNotes, and Solidigm AI.
CONTRIBUTION
Why a whole internal photo upload tool?
Before I joined, Codelab used Box, a cloud platform. However, only board members have access to its albums. Other members would have to scramble through slack, google drive, and IOS photos to find where content is uploaded for each event.
Friction where there shouldn't be
Only certain members of the organization had subscriptions with Box, so they would have to upload photos for the entire organization. Not to mention, the interface itself invoked a feeling of "file organization." I wanted to create an interface where users would see their peers and friends' faces, and be encouraged to upload.
PROBLEM
Box felt impersonal and inaccessible. There was no single accessible platform for shared albums.
SOLUTION
A centralized design that would feel practical and personal to codelab, we envisioned a platform that would project, connection and personability.
Competitive analysis → The “fun” in functionality
I wanted this feature to have the clean, well designed feel of Apple photos, but also a certain amount of whimsy that you can see in event upload platforms like SWSH.
Comparisons were also made with the Google photos, Apple photos, and Partiful interface. Ultimately, the goal from our competitive analysis research was to determine how we can optimize the practicality and personability of this feature.
FINAL DESIGN
Building to be practical
Our final design prioritized functionality. My co-designer built a view of all albums, while I designed the view within an Album. Ultimately, we did abandon the initial "fun" aspects we envisioned. However, later we would reimagine this with a "liked photos" feature.
DESIGN DECISIONS
Our initial designs were heavily influenced by our desire to make a whimsical design, however, our final designs would reflect something that would more practical for our developers and our users.
To select or not select
60% of users mentioned wanting to see a clearer indication of the select toggle, which we accomplished with empty bubbles, in addition to a stronger “download” call to action.
Evolution of the CTA
User interviews offered valuable insights about making minor alterations to make impacts on the functionality of this design.
Our initial designs lacked a strong call to action, and only had a kebob menu which opened a menu that allowed users to select and upload.
major change → my design mentor noted how kebob menus typically have more functionalities than just to upload and select. User research indicated that we needed a stronger CTA for uploads, which was one of the major improvements made.
Additional designs
REFLECTION
The handoff
As I continue to work in cross functional spaces, I realize how easily engineers can lose sight of what a designer intends for their interfaces. For this project, I ensured optimal handoff efficiency, taking inspiration from Bettina D’valia in this article.
Every little thing counts
Despite this being one of my simpler projects, ideating on such a small scope over such a long period of time allowed me to analyze and work around even the smallest of interactions to optimize user experiences.
