Browse the latest blog posts from Shopify staff on commerce and the Shopify platform.
We recently had a great chat with @ThePrimeWeb about an exciting project: Our Faceless Crew Online Guidance. This undertaking wasn't just a milestone for a Shopify merchant but also a proud achievement for the developers behind the scene.
Here's an inside look at the design journey of this unique Shopify store.
Initially, the client and we had different visions. However, through open dialogue and collaboration, we found common ground and embarked on this unique journey together.
Ourfacelesscrew.com is more than just another online store; it's a hybrid, blending e-commerce with a Learning Management System (LMS). This setup allows the owner to sell interactive courses directly on Shopify, and customers can access these courses right on the platform.
This collaboration showcases Shopify's versatility and evolution. It proves that Shopify can be an excellent choice for selling interactive courses online.
The way we see success is like a chef's approach to a new recipe. First, we ask ourselves, “Have we solved the problem?” For ourfacelesscrew.com, the answer was a resounding yes, with a side of exceeded expectations.
Next, we focus on branding. We added a few subtle design elements without going overboard. This store isn't about flashy visuals; it's about delivering value through its courses. We did, however, add a touch of novelty with our ‘products’ presented as swiping cards.
Why cards? In a sea of similar course offerings, we wanted ours to stand out. We figured people would remember ‘the one with the cards’. Plus, the card format allows customers to build a powerful knowledge deck - the more cards they collect, the more skilled they become.
Finally, we measure customer satisfaction. The client was unsure if their idea could even become a reality. Turning their uncertainty into a tangible, functioning store was the cherry on top. It posed a challenge, and we were certain that we could rise to the occasion. And the client's ongoing gratitude? That's the sweetest dessert.
Our primary goal was to make the courses feel like treasures waiting to be collected.
Think about it: as you grow and learn, you naturally want to expand your knowledge, much like filling a bookshelf with books or a music library with albums. But presenting courses like books on a shelf or albums in a collection didn't quite hit the mark.
So, we turned to cards. We arranged them in a swipeable chain to illustrate their connection - take course 1, and your natural next step is course 2, and so on. This setup offers a familiar, intuitive experience, reducing user confusion.
We're big fans of the KISS (Keep it Simple, Stupid) principle here at The Prime Web. And when it came to presenting these courses, swiping cards were the clear winner. It's simple, intuitive, and makes collecting knowledge feel like an exciting journey.
The simple answer is trial and error. Before trying anything, we made sure each team member clearly understood the requirements. We asked ourselves:
A client's request can be as simple as, "I want to sell interactive courses online." Our job is to ask as many questions as needed to get detailed requirements from them.
Once we gathered sufficient information, we conducted thorough research. We tested out many apps on our demo stores to see which ones fit the requirements. Eventually, we settled on this one app that was close enough. By combining the app with in-house written code, we managed to produce the result that our client had visualized.
We don't always receive specific comments on individual sections; instead, we focus on the overall experience, including the swiping cards. Initially, we built the site prototype without the cards, but during testing, we found that including them added more flavor to the user experience, which is why we decided to incorporate them.
Analytics show that customers primarily check out products by clicking directly through the cards, rather than navigating to the collections page and then to the product. This approach has reduced a step in customer journey, which improves the overall user experience.
The courses were designed specifically for the yachting industry, targeting yachting crew who usually have minimal experience with technology. Therefore, we designed elements of the website with simplicity in mind to encourage further exploration. Based on the learners’ feedback, we believe the design ideas have achieved the set goal.
In a previous interview, we couldn’t stress enough how a website needs to be built so that shoppers navigate through it naturally, as if they are just breathing.
We always give the site to someone who has never seen it before to see how they navigate. The client was also part of this test. We did not provide a guide initially; we just gave them the link, asked them to navigate and provide feedback.
It turns out, everyone was able to check out and go through the courses as if they've done it before. That's always a good sign. Most of the navigation experience is very close to how Shopify's themes operate. It's proven to work, and many online buyers are familiar with that interface.
It is very crucial that we, as developers, stick to the norm instead of trying to be unique. Building something unique means people need to learn it. In this case, we want the customer to start learning only when they have the courses open, not before that.
Branding and design elements keep the brand consistent. It's important to consider that the client might want to post a screenshot of the website on their socials, or someone might share it on their socials in the future. Customers worldwide will come to the website from different sources, so the more consistent the experience stays, the stronger brand identify
The particular fonts and colors seen on the social media posts must be the same as those on the website. This consistency helps the shoppers verify that they are in the right place.
Think about your favorite snacks. It's similar to encountering a new product from that well-known brand in a store for the first time; their distinctive fonts and color schemes immediately give you the confidence that it most likely is a legitimate new product from that brand.
More than anything, branding properly builds trust, and gives you an identity. As of now, the community that Our Faceless Crew has built clearly understands what the brand is about.
Photo by Avelino Calvar Martinez from Burst
There you have it! We hope this inside look at the thought process gives you some insights into the design journey of this project. Now, we’d like to hear your thoughts:
Share your feedback in the comments below.
Feel like having a chat with @ThePrimeWeb? Head over to their profile or visit their website!
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.