Reimagining the editor for photo goods eliminated a major 3rd-party blocker in release scheduling. Accommodated 23 different product types and mobile-width experience.
User feedback, consumer goods
Artifact Uprising is a custom photo goods company in Denver that thoughtfully sources materials to create photo books, wall art, and other gifts.
Over the years Artifact has been guided by an emotive photojournalistic style, Galvanize and its co-founder Chris Onan, a Craftsy co-founder, as well as California-based VSCO (Visual Supply Company), to name a few. It continues to grow and has been profitable since being founded.
Artifact Uprising on Crunchbase
Artifact Uprising returns to Denver ownership as management team buys it back (Denver Post)
Extraordinary Customer Service Stories, from Entrepreneurial Success 'Artifact Uprising' (Forbes)
Commitment to quality drives the business strategy – so it's only fitting that they'd want to update a confusing, clunky central editing interaction by moving away from a 3rd party integration, and building their own editor.
This would allow them to eliminate major dependency in product-building, as well as for feature release scheduling.
UX & UI Design
Tools Panel, Image Management for Reimagined Editor
I came in at the alpha stage of the new editor design, and again for image management with layflat books.
During the first phase I mainly collaborated with Samantha Kogle (longtime Artifact Product Designer). Second round groundwork came from Kyle Gilbreath (Product Designer), Jen Bosier (Senior Product Manager), and Shawna Barnhart (VP of Product).
R1.) Iterating on tools and attributes' placement in low-fidelity wireframes, UX.
R2.) Smoothing out the image management process, including UI improvements.
Task completion testing
Both themes of my work were supported by video-based task completion and performance testing, accompanied by stakeholder notes, all informing an organized, roadmapped list of use cases to tackle.
Above, you get a sense of the starting point – lots of cumbersome task work is clustered top left. Our research and observation of users suggested that this was a long distance to travel across a desktop screen or mobile device for common tasks, so we knew we wanted to resolve this awkward positioning.
Below is an example of an unwieldy popup, screenjack and unintuitive toggle behavior that create friction when searching for & populating a chosen frame with a desired image, which was tested and observed through usertesting.com –
Lo-fi Wireframes: New Editor Layout
R1.) Iterating on tools and attributes' placement in low-fidelity wireframes.
We knew based on user testing that we wanted to break up product page navigation, layout selection, text editing, and attributes. Iterative comps are below.
Inspired by Google's Material Design system, I moved from aligning the tools on the top bar to to the idea of having a floating component for tools on the right side. When we tested various toolbars against a tool component, the feedback was that it "really allowed me to see my design come to life," and that the task of customizing their product "felt like play." The floating component could be applied differently, in terms of sizing or interaction for mobile – across products with dissimilar features or varying widths on the editor canvas (such as books or wide prints). We worked through further wireframes to experiment with mobile component interaction.
Evolution of a Kebab Menu
One takeaway from user testing was that product value (ex: paper quality) may need to be reinforced at the editor phase.
Our decision was to keep value details part of the product page before editor launch – a selling point before project building. This reduced clutter and established flow. The added kebab works well across devices, scalably, as in many internet services, providing organization to de-emphasize related actions near a primary button.
R2.) Helping image management become a smoother process, including UI improvements.
User Flow for Adding Images
"I really like where your head is at, Gunther."
–Senior Product Manager Jen Bosier
I discovered that choosing a destination for uploaded images might be trickiest in terms of starting with an existing gallery or social/dropbox, by writing out this flow. That's the most crowded part, around the solid gray panels. We needed it to feel smooth - and this flow chart helped to identify the crux (or cruxes) of the matter as we were seeing it at the time.
In final implementation, users can start with a project-specific gallery OR log in to create new or use existing gallery, independent of photo source.
User Interface Tooling
Following a visual design system set by my colleague Kyle Gilbreath, and using InVision plus Craft for prototyping, I produced UI design pieces that fit into the larger UX discussion we were having. It helped us to envision possible fixes for problems that were starting to arise with how image management was operating.
For example, fitting 10 possible image slots in the bottom bar for the desktop breakpoint, including an "+ Add Photos" option, as well as gallery zoom, dropdown filter options, and "Add" or "Replace" directly on image hover.
Final, Responsive Image Upload Options Drawer
Elements of image upload UI that I worked on, including the reimagined editor, also showing the results of teamwork and adjustment over about 9 months. Selecting a source of images never looked so good!