Building a self-service web portal for product photography
SGK Portal
Overview:
The SGK Photography Portal is a solution for large-scale retailers (think Target, Amazon, Wal-Mart) to give smaller, third-party vendors access to product photography that fits the specifications of their websites.
Vendors will use the portal to order the photography that they need, create a packing list for mailing their products to a studio to be photographed, and receiving their final photographs, ready to be featured on the retailer’s site.
The Mission: Create a platform that educates vendors on product photography, informs users of SGK’s services, and walks users through the process.
We researched what information studios would need from vendors in order to effectively handle the product photography. Then we mapped out the best way to create an order form that could potentially handle 10’s to 100’s of items.
Deliverables
Research
Site map and user journeys
Wireframes
Visual Designs
Timeline
February 2020 - October 2020
My Role
Research, UX Design, Visual Design
Our Approach:
Educate and Help Users
Our target audience are small vendors that might not have a lot of experience ordering photography. We needed to teach users about product photography in general, SGK specialities and services, and how to know what services are best for them. The challenge was building the education into the process without interfering or distracting the user.
Experience Framework
First, we needed to think through what users could access before login. We decided we would need an extensive splash page before login, educating users on SGK’s photography services.
Then, we mapped out the dashboard users would land on when they have an account. What would users need quick access to?
Existing Orders
Create a new order
Download photography assets
Invoices and payments
Finally we thought through some of the ancillary content that users would need to be able to successfully get through these processes, like:
Account settings
FAQ’s
Notifications
Dashboard Organization
The challenge to organizing the dashboard was determining the hierarchy between the education and selling content versus the functional aspects of the dashboard, like payment, order status, and image download.
Educational aspects of the site needed more space in order to really help the user as they get started using the photography portal.
Key User Journeys
Create a New Order
Journey Map
Wireframes
2. Check Order Status
Journey Map
Wireframes
3. Pay Invoice
Journey Map
Wireframes
4. Download Photography
User Journeys
Wireframes
Visual Design
Background Shapes
The SGK brand includes a series a black, abstract shapes.
Hint of Red
The brand colors are primarily black and white. Red should be used very minimally for only the most important information.
Bold Type
Headlines and subheadlines should use bold, black type always.
Continued Support
Once designed, we continued to work with the clients acting as a direct extension of their team and continued to iterate on the design. All while working with their in-house dev team to make sure our designs were optimized for the Sitecore platform.
In the end, application completions went up dramatically. While incomplete and abandoned applications decreased.
Credits
Rebecca Smith
UX Designer
Todd Slutzky
Creative Director