Case study: E-commerce template for today? Yes, please!
It’s been about four months since I left a position of Design Team Lead for a Data Intelligence company and started a freelance work. I have gotten an offer from a friend of mine to partner up in template and add-on department for an e-commerce platform Shoptet, which operates in Central Europe, mainly Czech Republic and Slovakia. The reason I agreed was that I knew there are UX gaps in template world, especially in a small one, like Czech Republic.
Don’t get me wrong — Shoptet has it figured out. With over 20,000 sites running on the platform, it is the biggest provider of e-commerce CMS in the region. Their system is very popular, especially because it offers what they call “box solution” which gives their users standardised guidelines on how to build their site. The other reason is of course the language.
How it all works at Shoptet?
Shoptet relies heavily on their partners. Those are freelancers which provide specific services, such as development, design, SEO, marketing and others. There is a strong bond between Shoptet and their partners, and Shoptet is doing their most to provide the best possible conditions for their partners. And here is why — Partners check out most of individual requests that are coming from the users. Why? Because Shoptet couldn’t possibly cover all of them.
The way it works is, that if a clients contact Shoptet support, they usually redirect them to a partner that is an expert in the designated field. And that includes design. So let’s get to it.
First steps in the design process — Research!
What do you do, when you are creating a universal template for e-commerce? You go online and start researching all the dos and don’ts when building an e-commerce site. Naturally.
I have gathered all the possible information from all the possible sources which resulted in a 12-page Dropbox Paper document.
Initial research — check ✅
Next —stakeholders, in our case the co-founder of the company I work with. After some talks and interview, there was only one outcome on our strategy — we need to cover all the possible industries, but not with one template. We need to dig deep into specific industries and build templates based on the users’ expectations from each and every one of them. That means a template for fashion, electronics, accessories, food, etc.
Product strategy — check ✅
Okay, let’s get the actual users involved. Finally!
This scope of users is obviously wide. That means that interviews would take too long and provide very confusing data. I decided to create a generic survey that is segmented into several section, each one covering certain topic related to e-commerce. We start with demographics (age, gender, location, etc.), basic usage of e-commerce (how often do the users shop online, what are their favourite shops, etc.), authenticity of the shop (what attracts and repels users, etc.) and ending with features and functionalities (must haves and don’ts in e-commerce sites, etc.).
This resulted in 28 questions sent to 48 users and in some very interesting results.
First surprising result:
What do you shop the most for online?
Top categories: Fashion, Electronics and furniture
Should all e-commerce sites look alike?
Might seem obvious, but still: No (76%)
Do you use filters while searching for a product?
Now this one was surprising: Yes (88%)
Do you shop impulsively? (e.g. you window-shop for something, but usually buy it?)
Answer: Yes (71%)
Is a well built e-commerce site a bigger motivation for you to shop impulsively?
Surprisingly: Yes (63%)
What repels you most shopping online?
Top categories: Low-quality images, Unclear Product Description, Overall look, Unclear industry (site sells various, unrelated products)
What is the maximum amount of steps at Checkout?
Answer: 3 (62%)
Have you ever ran into a Checkout so complicated that you left the site?
Answer: Yes (62%)
Okay, that about sums it up. Enough information has been gathered and the outcome is clear — I need to start with a well built Fashion template, use all the information I have gathered and apply all the best practices of building an e-commerce site. And I shall call my first project OPAL.
Research — check ✅
Let’s Ideate
I have all the information, all the data — I can easily start working on feature specs for my first fashion template — Opal! It doesn’t require much — piece of paper, pen and all the collected data. Eliminate the don’ts, include the dos’, pay attention to must-haves and don’t ignore the nice-to-haves.
When you get a list of features that start to shape up like a product, you know you are on the right track. If you have users in the room as well — that’s just ideal!
Feature specs — check ✅
I know you are going to hate me, but I’ve skipped the sketches…
Sketches — skipped ❌
Let’s forget about my horrible mistake and continue with Wireframes. From the beginning, I knew this template must be content oriented and as non-distracting as possible. Focus on images and text, balanced white space and minimalistic design were definitely my top priorities in the wireframing process.
Wireframes — check ✅
Let’s test them and see, if the users are able to complete simple scenarios such as finding a product, adding it to the cart and completing checkout. If they are able to do so in wireframe phase, then I’m on a good way.
Low-fidelity prototype test — successful 💯
Let’s get cracking and work on the UI. Now, you have to understand one thing about me — I love reusable and recyclable components. That means, that I need to take an approach in Figma that will allow me to use created components in future templates that I create. And that takes time.
There are few components that are repeating themselves in every template and every installation. I had to be careful to get them right. All in all — I ended up with a tiny design system, as you can see below.
Okay, components finished, let’s put them in use, apply them to the wireframe layouts and see the results!
After some tweaking, adjusting and voodoo we get this:
UI — check ✅
Last, but not least — testing. Although the previous test with wireframes were really successful, I decided to do another run. And the results were splendid!
Testing — successful 💯
Nearly there…
Some issues came up, and I was informed that several of my design are not possible to implement into the final product due to limitations from Shoptet side. Understandably, Shoptet has a closed system for partner developers and they are not allowed to reorganise everything, add much or manipulate with the template. The HTML and DOM structures are closed to the developers as it could create some issues if they were not. To sum it up — some features didn’t make it into the final design and it was due to these limitations.
When I started with my initial research of the platform, there were several problem that I ran into, but also into pros of the closed system. We are currently in discussion with Shoptet, hoping they will open the door a little, because it would be brilliant, if they could and then I can make some UX powered templates!
All-in-all, it is fun! 🎊
Yes, the system put several obstacles on the road and yes, they are hard to conquer. It creates a challenge though and that is something every designer should hope for. We are currently building a third template, trying to find a way around these restrictions and create user-centred products that the the users enjoy! 👍
You can see the preview of Opal here: http://opal.shoptetak.cz/
Thank you for getting all the way here! 🙏
Cheers 🎉
