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 SiteObjectives
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
