TikkaTikka Case Study —An eCommerce Gift Platform for Local Artists
Project type
Concept eCommerce Website
Project date
June 2021
My role
Product Designer
Project Summary
TikkaTikka is a concept online shop that, apart from its Maltese-centred range of products and services, is in need of a unique value proposition to differentiate itself from the online competition. The case study aims to empathise with users of the existing solutions and design an experience that simplifies the main user flows.
Since online print on-demand is a already a popular market, I researched competitors via user interviews, heuristic principles and user flows.
The Challenge
The goal of this project is to create a platform that satisfies two very different types of user experiences — the gift shopping and the shop curation.
💭 The Process
The Design Thinking Process is an iterative process I chose to use when approaching the case study. The process is more of a scientific method for problem-solving that requires ‘outside the box thinking’ to prevent the more common methods. In case of TikkaTikka, it required looking at competitive solutions but also thinking of innovative alternatives to some of the existing solutions.
The first step is to Empathise with the people using the product or service and only then Define the challenges at hand. However, in my case study I merged the first two steps since the user interviews are to highlight both the personas of the users and their issues. After identifying the issues of the users from the one-on-one interviews (a step that is usually under ‘Define’ stage), the users are grouped into 3 main personas based on the interviews. The interviews are one of the best ways to not only understand the user perspective but also have evidence on how they think, feel and talk about their issues — all information that contributes to the Empathy Map.
📝 Empathise & Define
Identified Competitors
Since the case study looks into the possibility of an application in an already-existing market, it is imperative to firstly understand and acknowledge the competition - including the strengths, threats, shortcomings and opportunities they pose. Therefore, investigation on the competitive websites is looked into further through interviews of their recurring clients. The known competitors are RedBubble and TeePublic.
Finding Pain Points with User Interviews
I interviewed 3 people that are frequent buyers of online print on-demand competitors such as RedBubble, TeePublic and Zazzle and 3 digital artists that upload their work to such websites.
The answers helped me build a brief SWOT Analysis of the competitor solutions to highlight the pain points that I want to tackle and the key strengths that I want to embrace in my concept solution. From the interviews, the following pain points have been identified:
- Overwhelmed by choice
In result of being shown an almost endless amount of options on the homepage, users can be too overwhelmed by the options to bother to browse further or even disheartened if the artworks are not to their liking. - Art gallery first, online shop second
By default, users are currently only presented artworks when browsing through items — unless asked otherwise by either the user or the artist. It becomes harder for the customer to envision the end-result of the gift — the artwork printed on the item intended by the artist. Interviews have shown that users would prefer to see the ‘complete’ printed product when shopping for the ideal gift. - Daunting artwork upload process
Throughout the interviews with artists, the time constraint required and effort needed to specify details for each product option came up multiple times. Surprisingly, even in 2021, the artwork upload pages from top print on-demand websites are still unresponsive and lack mobile friendliness. - Limited shop curation
Users that sell artwork on print on-demand websites are largely satisfied with the shop curation. However, when asked how they can promote their work and stand-out from other artists it was quickly noted that the options for marketing and customisation are limited and so their potential is unrealised.
Yet not all is bad about the competitors. In fact, users have claimed they are happy enough to return to purchase or upload more than once throughout the past year.
In short, they gave credit for returning to the service to the following:
- Always finding a suitable gift for everyone;
- Exciting new designs to discover in each visit;
- Seasonal sales.
Artists also enjoy uploading their artwork because of the:
- Vast and diverse audience;
- Lack of costs to curate and upload work.
Regardless how different my end-solution is, it is ideal to preserve or even further enhance the mentioned key strengths of competitive websites.
Personas & Empathy Maps
From the interviews and competitive analysis, an empathy map is compiled to further get an idea of who my users would be, all based on the personalities I met in the interviews or read about during my research.
Three personas based on three main types of uses of TikkaTikka are designed: The Artist, The Supporter and The Gift Giver.
Once I got an empathy map together with all previous data, I then got a better grasp of what type of users would be loyal customers and what their wants, needs, preferences and fears are.
Arlo The Artist
- Needs to show portfolio in a personalised, clean manner
- Wants to sell artwork
- Wants to advertise on other social media channels
- Wants more control on their product and storefront
- Values featuring or promoting other people’s work and collaborating with other artists
- Fears of not making any sales
Samantha The Supporter
- Needs to discover artistic talents
- Needs to browse through different types of digital artworks
- Wants to support the artist
- Values finding the right artistic gift to the right person
- Values the option to contact the artist for an art commission
Gert the Gift Giver
- Needs to find the right gifts according to the receiver’s interest in the shortest time possible
- Wants variety of options
- Wants a scalable and seamless experience to browse through the overwhelming amount of options
- Values showing support towards the artist
💡 Ideate
With all the insights on potential clients, it all comes together when coming up with concrete solutions, starting with the ideal journey for each type of user.
Having all the information in hand, it quickly got overwhelming to tackle all issues with the same screens for all users all whilst looking different than competitive solutions. For this reason, the project stayed dormant for a couple of weeks until I got my head clear and ready to look at the big picture again. Yet, I eventually realized it was time to prioritise on what problems must be solved and which problems should.
I wrote what solutions I want to implement in separate sticky notes in a timed 8 minute activity and then categorised them together to form three main goals (and a bonus one) to keep in mind when designing the concept service.
The four main goals are:
- 1️⃣ Gift-shopping-centred experience
Rather than playing jack-of-all-trades as both an art gallery and a gifts shop, TikkaTikka realises its target audience is customers looking to buy creative gifts for certain people in mind. Existing solutions tend to market themselves primarily as a digital art dealer. But by doing so they may, in my opinion, miss out on the potential customers whose the art enthusiasts are the people they want to buy art FOR rather than the enthusiasts being the primary customers themselves.
- 2️⃣ Improved Discoverability
The interface is designed to allow the user to browse through the range of products with thumbnails previewing the end-result of the printed artworks rather than simply the artwork. Such decision ensures that the consumer does not need to envision the end-product and may so increase customer confidence when shown a realistic mock-up of the product.
Results from user interviews have shown that users are more likely to click on a product if they are first prompted to narrow down the listing according to their likings, thanks to filters and curated carousels grouping similar, popular designs on the homepage.
- 3️⃣ More focus on Artists
Whilst departing from the idea of being an artwork shop, the eCommerce website aims to address artists’ need to promote their work and their own online presence. Tools for marketing focused on social media are provided to artists to aid them in their promotions. Moreover, artists are given customisation tools and social media links on their profiles in order to diversify the artist shops and attract buyers that are art enthusiasts.
- 4️⃣ Last but not least… responsive design
In an age when many digital artists are turning to illustrating on the Procreate mobile app, it is essential to design a mobile-friendly upload interface to integrate with the user workflow.
📐 Prototype
The best way to get the big picture of an eCommerce website, in my opinion, is to design a sitemap. Not only does a sitemap prove to be useful to the web developer and later on in SEO marketing practices, but it also directly builds a template for the UI design of the website.
The sitemap organises three main user activities:
Shop Gifts, Create and Explore.
It also includes a section for user account managing for login, signup and even pages for artists to curate their storefront and view sales analytics.
The different sections caters for the three types of users but is also open for each type of user to break routine and peek into other sections of the website.
So, while the Shop Gifts homepage section is obviously directed to The Gift Giver, both The Supporter and The Artist might want to browse through to buy gifts from a website they want to support. Likewise, Create section is not only for The Artists type.
In fact, Create prompts any type of user to upload their own design and print it on any item they would like, and then consider to create their own store and sell it there.
The Explore section is largely directed to The Supporter that wants to discover new talents and different art genres. However, the section acts as the best deep-dive into the capabilities of the website by allowing any user to see the variety of artists and styles one can shop for and even filter their gift selection by item.
Information Architecture with User Flow
An Information Architecture of the eCommerce site combined with a sitemap to present the User Flow was made on Figma Jam as seen below.
Low-Fidelity Prototype
With a clearer idea of the flow thanks to an information architecture and a site map, it was time to develop an early prototype complete with wireframing. As a product designer I started getting grasp of the look-and-feel of the product and had better understanding of the scope of the project.
Nonetheless, the wireframe still served as a basis of the project whilst certain screens and button-positioning were revamped, the flow mostly stayed the same.
Responsiveness
Even though the website is built to be mobile-first design, the website is still to display a different version optimised to the desktop to prevent displaying a bloated design built mainly for phones. The design framework is built on Material Design and follow Google’s standards in responsiveness and consistency across multiple devices.
Design System
I also built a brand for TikkaTikka which can be viewed on my Behance portfolio here. Therefore, it became much easier to build buttons and typographies around a Design System as part of my branding efforts. The guide assures consistency and standard aesthetic design that the user comes to familiarise themselves and fall in love with from the first page. Since TikkaTikka is a concept service, the guide can come in hand for any future expansions and changes to the business.
The design system used is based on Google’s Material Design 3 guidelines.
Finally, as I had all the ingredients in hand, all that was left to be done in this stage is to create an interactive pixel-perfect design of the website on Figma. One can browse through the interactive prototype here.
🎤 Test
The most eye-opening experience in the case study is the testing phase. ideally, to better compare my solution, I would make A/B Tests where testers tried out my solution first and then the competitor’s. Due to the budget and time constraint, I asked 6 testers experienced with the competitors’ solution to test my prototype. The key metrics to be compared are the number of clicks needed to get to the desired screen and the amount of time it takes them. Moreover, the testers are to rate the experience and provide any comment.
The tests are designed on Maze.com and can be tried out here.
Mainly, the testers were asked to perform the following tasks:
- Find Gifts for Christmas without searching
- Go to Contact Us page
- Visit an Artist page (starting from a page displaying set of gifts)
- Upload artwork, print it on a mug and perform checkout
- Look up ‘dad jokes’, add any product to cart and perform checkout
- View own Artist profile and add new product
- Add any final comments
Reacting to Test Results
From both qualitative and quantitative feedback, I took note of user patterns and concerns to make a couple of changes to the interface, namely:
- 🔎 Adding ‘View As’ to search results to preview them as any item
The concept still suffers from having multiple different paths – this is evident from tester observations. Therefore, in this case, it can be beneficial to have multiple ways to do the same thing rather than risking getting the user ‘lost’ in the website trying to find the right path. To tackle this, I added a filter button in the search results so that the user can see the products within their query but previewed in any item at a glance.
- 🍔 Declutter burger menu
One of the testers left feedback that, in their view, they feel that the burger menu is cluttered. The feedback is backed up by the lengthy time interval that the users took to find the ‘About Us’ button in the menu.
In solution, I implemented an accordion element to the burger menu. Despite having the sections mostly reflecting what’s already on the navbar, the accordion is much more neat and minimalistic at first glance. In result, other pages such as the About Us page are more apparent. The user can still browse through many of the pages of the website and do so even faster.
- 🏠 Implementing multiple Home buttons
The same user from the previous feedback commented on having difficulty to find the Home button. Even though not particularly evident in the user behaviours in the tests, I took the initiative to discuss it further with the particular tester.
During the tests, testers automatically clicked on the logo or simply tapped/clicked ‘back’ to return home. The tester told me that users that might not be particularly tech savvy might have a problem with finding the home button. The feedback is taken seriously and so we decided that adding a home button to the navbar, much like those found in mobile apps, can help resolving the issue.
Final Screenshots
3 Lessons Learnt
1️⃣ Sometimes taking a break from the project is best
Sure, taking some time off is always necessary to prevent from overworking yourself and taking a toll on your productivity. But that is not the argument here. Rather, taking a step back from the project significantly helped when coming back to the project to look at the big picture, temporarily free from the bias of interface design and accumulated data. Putting my mind off the details of how the app should look and react lead me to look at the essential nitty-gritty aspects of the problem as I start coming up with ideas.
Taking a step back from the project significantly helped when coming back to the project to look at the big picture
Refamiliarizing myself with the project to remember where I got and continue where I left off, I quickly came to realise that I was trying to solve too many problems and some of which were so minimal that I had already forgotten about. Before thinking about interfaces, I started thinking about which problems are to be focused on rather than how I am going to solve all of them (the question that resulted me to a burnout in the first place).
Of course, loyalty points, coupon codes at checkout and community features such as likes and comments are all features that competitors have and would have made the project more attractive, but they were mostly out of scope of the problems at hand. The affinity map narrowed down on which are the main challenges I am to solve and move on from there.
2️⃣ Switching User Perspective
During the empathise stage it was clear how switching user perspective can greatly impact changes to the interface. Not only did it serve well when viewing all pages in the eyes of all user types, but it was also acknowledged when designing a specific section for each use type.
For example, the Create section unified the experience of uploading and printing for one’s use and the experience of uploading to sell online. The first two screens share the same interface for The Artist and The Gift Giver type, and can choose to sell or buy in the third screen. Note that even if a user, for example The Artist, chooses to sell, they can break routine and go back to choose to buy. The vice versa applies for The Gift Giver, who can notice the ease of use of the upload process and may like their custom design gift so much that they choose to sell their design on the website.
By inciting users to share screens with other use types, the user experience is simplified and attracts users to explore all corners of the website.
3️⃣ Competitor Analysis
Competitor Analysis helped bring knowledge on why certain designs are done but eventually I came to notice that by itself, it was not enough to proceed to sketch ideas. Rather, the Competitor Analysis helped formulate user interviews and tests as it is their users that can give concrete feedback regarding IF the competitor designs work and how they’d want it.
In fact, in its conception the TikkaTikka idea was first focused on being a digital arts shop, much like RedBubble and TeePublic. But through competitor marketing and user interviews it became clear as day that users mainly visit these websites to purchase gifts for others. Therefore, I had to revisit my initial ideas and personas to circle around gift giving first, art curation second. The revelation also brought the need for a dedicated ‘Gifts’ section, display products that are more focused on people interests and even redesign the website to function more as a gift guide.
Next Steps for the Business
Of course, the eCommerce website was designed to sell products and attract clients of different interests. Meanwhile it also serves as a marketplace for artists to sell their work. Therefore, the business should be viewed as a platform where one can express themselves (either via custom print or selling prints) and monetise their work.
1️⃣ More tools for Artists 🔧
Through user interviews I learnt that artists often team up with other artists to create an illustration that complements both styles of the artists. Yet the current competitors do not provide an easy setup to support this. For this reason, TikkaTikka can provide a collaborative tool by uploading the artwork once, present it on both artist profiles and share the sale earnings.
2️⃣ Markups 💰
A major part of giving the users a platform to make passive earnings is giving them the freedom to set their own pricing. This can be done by adding an option in the ‘Artist Dashboard’ to change mark-ups of certain items. Some existing solutions already provide this, namely RedBubble, but TikkaTikka can take it a step further by scheduling sales and lower/higher mark-ups for a certain period. In fact, we learnt from the user interviews that some buyers wait for a sale to purchase the items waiting in the cart.
3️⃣ Shop Customisation 🏪
Another way to give the artists more control on their business is adding the ability to customise the look and feel of the shop. The current prototype already provides the options to change the logo, the cover photo and to feature certain products.
However, this can be put further by implementing new options of changing the colour palette (perhaps by custom CSS) of the shop, allowing to add watermarks on the artworks to prevent theft and even adding collections. Collections can be essentially a set of artworks of the same style or theme. They can greatly help in search optimisation and aid the user when browsing one’s profile.
For example, when the user is on a product page and is unsure if it is within their liking, a ‘More from this collection’ carousel at bottom of the product page invites the user to look for others within the same style or theme that is more to their liking.
4️⃣ Preview in AR 📱
A big step in assuring the user about the purchase is the ability to preview the product in augmented reality. Since the concept website is built round custom prints and so product photos are only mock-ups, it helps to see a preview of the designs on different items in three dimension. The feature could mainly aid users that usually prefer buying from a brick-and-mortar shop.
🎉 Conclusion
TikkaTikka served as a new way to study major market players in online on-demand printing in different user perspectives. Talking to frequent users of such websites brought more insightful views regarding which aspects of the service attracts them and what do they want more from them.
The positive results from the prototype testing bring an optimistic outlook to the concept, not only in terms of user interface and consumer experience but also as a feasible business.
In summary, the case study served as a chance for me to evaluate a platform for artists to make a passive income and for gift shopping purposes in view of multiple user perspectives. The positive outcome gives hope to a future where one has more control on their online passive income and a bigger demand and increased confidence in shopping for artisanal gifts thanks to the user experience of the concept.
Thank you for your time. If you liked this project, please check out my profiles on Behance, Dribbble and my website.
