CloudSpot Store Redesign

Client Gallery Delivery Service

CloudSpot Store Redesign - Laptop & Phone


CloudSpot is a client photo gallery delivery service that assists photographers to share, proof, and sell online. In charge of restructuring and redesigning CloudSpot's current store to checkout experience for both mobile and web. The goal of this project is to funnel new users to sign up and to increase sale conversions for photographers. This case study will focus on my work for CloudSpot's Cart Desktop interface.

Lead Designer

User Research, Wire Framing, Visual Design, Prototyping & Testing

Adobe XD, Figma, Photoshop, Zeplin

February 2020 - August 2020

Lead Designer, Developer, Product Manager/CEO

Project Launched Winter of 2020
Understanding the Goal
Upon my arrival, CloudSpot was in the works of completely redesigning their current store interface. I began my first week by diving into the goals of our future design decisions and the benefits for each party involved.

Goals included: 

CloudSpot Logo
Increase revenue and funnel in new users as well as increasing marketability.
Picture of a camera drawing
Increase credibility and elevate brand with a reliable store.
Married couple drawing
Photographer's Clients:
Improve shopping experience and increase motivation to purchase.

For this project, our team and I prioritized redesigning the store mainly to improve the experience for photographers and their clients. In doing so, a trickle effect of more visibility, brand credibility, and marketing would only benefit the company.

Identifying Users
In order to learn about who I would be designing for, I worked closely with the customer support team as well as the CEO to gain a better understanding of CloudSpot's various users. I dove into our preexisting database to read customer reviews, interviews, and surveys that were collected in order to pioneer CloudSpot's first user personas to use for future designs. Before creating specific user personas, I made sure to take into account common trends found among the various users to use as reference.
CloudSpot's Current Users - Photographers
CloudSpot's Targeted Users - Photographers
User Flow
Two user flows were created to be used as reference when creating wireframes and performing user tests. Differences between desktop and mobile were applied for a fluid experience across both devices. I'll be showcasing the three sections of my user flow for this case study.
Final User Flow for Desktop and Mobile
Wireframing the Solution
Expanding upon the designs that CloudSpot had been working with, the concept of online shopping came to mind and I wanted to design an experience that felt familiar to users paired with simplistic and intuitive functionality. Below are my starting low fidelity desktop wireframes.
Low Fidelity Desktop Wireframes
User Testing
I user tested the user flows on 5 participants with multiple rounds for both mobile and web design. With each round, new iterations were made to fit the roadblocks that came up along the way for a seamless experience.
User Testing
Key Feedback Received for Low-Fi Prototype:
• Unclear on how to return to the previous page
• Various use cases if more products and sizes are added
• Consistency on columns for both products and gallery
Working closely with the developer and CEO, there were constant rounds of iterations and changes that needed to be made. We took into consideration the various behaviors from user tests while making sure it was within our timeframe to implement changes for launch. We had to prioritize what the "nice-to-haves" would be and what our "must-haves" were.
Iterations for Cart Interface
For example, we concluded that our cart notification dropdown when items were added would not be within our time frame for phase 1 of launch. We opted for a simpler version that notified users when an item was added.
Iterations for "Added to Cart" Interface
For our final prototype, I made sure to take into consideration the changes that were mentioned during user testing as well as specific use cases that were brought into light.

1. A clear "Back to Gallery" button to return users to the previous page.
2. A lighter interface with a scrollable section for more product types and photos.
3. A dropdown accordion to display larger sizes for customers.
Final Cart Prototype Iterations
Final Cart Desktop Interface Prototype
Final Cart Mobile Interface Prototype
* Update: The Cart has now launched onto CloudSpot's main site! If you would like to see the project live, feel free to click the link down below.
What I Have Learned
As this was my first project on the team, here are some key points that I have learn.

Iteration never stops: Multiple rounds of iterations is the norm for a designer's life. Even though you think you've finalized a design, you will always have multiple use cases to map out and rethink through. Working together with the people around you will help you get a clear picture.
Details, details, details: Pay attention to detail. Every click, button, and scroll should have an intention. Pay attention to the small details which will make worlds of a difference in a user's experience.
Trial and error: There will be many times when your designs will not work out as planned. Start with low fidelity and continue to build until you can see no blockades in your design.

Thank you!