CloudSpot Store Redesign

Client Gallery Delivery Service

CloudSpot Store Redesign - Laptop & Phone

Overview

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.

ROLE:
Lead Designer

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

TOOLS USED:
Adobe XD, Figma, Photoshop, Zeplin

DURATION:
February 2020 - August 2020

TEAM:
Lead Designer, Developer, Product Manager/CEO

LAUNCH DATE:
Project Launched Winter of 2020
l. BACKGROUND
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
CloudSpot:
Increase revenue and funnel in new users as well as increasing marketability.
Picture of a camera drawing
Photographers:
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.

ll. RESEARCH
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
lll. IDEATION
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
lV. TESTING
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
V. ITERATE, ITERATE, ITERATE
Iterations
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
VI. FINAL PROTOTYPE
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.
VlI. CONCLUSION
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!