PhotoFinder: a SaaS Demo Site

What is the best way to showcase an eCommerce platform's out-of-the-box functionality?

Project Brief

Crystallize is a headless eCommerce platform that helps its users create tailor-made eCommerce experiences. In order to showcase their SaaS-specific features such as their Subscription API and digital product sales, Crystallize decided to create a demo site which would highlight their eCommerce platform’s capabilities. 

View WebsiteView Demo Site

Objectives

Functionality Showcase

Decide which Crystallize features to highlight on the demo site

Wireframe Sketches

Create wireframe sketches to define site structure & layout

Responsive UI Design

Design for both desktop and mobile to create a seamless experience

Functionality Showcase

Crystallize offers many baked-in features, such as analytics, subscriptions, warehousing inventory management, digital asset management, and more. For this particular demo site, we needed to decide what features we wanted to highlight. We decided to showcase Crystallize’s subscription API, digital product sales, digital downloads, blog capability, and user accounts.

Deciding What to Read Next is Difficult

Finding interesting books can feel overwhelming as there are countless books to choose from, and so many different ways to discover new books.

Categorizing Books Is Time-Consuming

Everyone organizes their books differently, and many who do so feel that categorizing books takes up too much of their time and effort.

Sketching Wireframes

Once we had a better idea o which of Crystallize’s features we wanted to highlight, I created a few rough sketches to explore structure, layout, and flow.

Deciding What to Read Next is Difficult

Finding interesting books can feel overwhelming as there are countless books to choose from, and so many different ways to discover new books.

Categorizing Books Is Time-Consuming

Everyone organizes their books differently, and many who do so feel that categorizing books takes up too much of their time and effort.

Creating a Style Tile

We wanted to appeal to tech / software companies, and decided to create a demo site that was simple, clean, and modern. Before jumping into designs, we created a style tile to define some of the elements in the style we were aiming for.

Applying the Style Tile to the Home Page

Once we had a better idea of the look we wanted to go for based on the elements in our style tile, I started on the home page first to make sure everything was cohesive and that all of the elements worked well together.

Designing to Highlight Platform Features   

As we designed the rest of the website, we tried to be strategic about what content we included in order to best show off Crystallize’s subscription API, digital product sales, digital downloads, blog capability, and user account features. To show off the subscription API, we created a sign up page where users would have to opt in to one of the pricing plans. For digital downloads, we created a page to show how that would work. By creating these types of pages it helped show users what Crystallize’s platform is capable of doing.

Designing for Responsive

No matter how large or small the devices users are on, Crystallize felt it was essential to create a quality user experience. In order to do this, we took a mobile-first approach when designing to create a content-first experience.

Key Takeaways

The biggest challenged I faced was learning how to showcase the functionality of a complex product with multiple features through a demo site, without being able to mention Crystallize or its PIM. By thinking about Crystallize’s users and their needs, we were able to come up with a plan that would allow us to highlight certain features and show off Crystallize’s capabilities. 

More Projects

Freshness Burger
Responsive, UX Design
Responsive, Identity Design
WFP Fountain Pens
Zeit Time Travel
Responsive, Identity Design