Tasja P.
Ceramics
Tasja P. emerged as a school team project, addressing the resource limitations faced by professional artists in their online endeavors. We embarked on a journey encompassing crucial steps: research, translation, ideation, prototyping, development, and testing.
This project stands as a testament to our dedication in empowering professional artists with comprehensive online solutions. Join us on this remarkable journey as we bridge the gap between creativity and technology, revolutionizing the artistic landscape.
Although some tools we utilized expired, the webpage may not function optimally. However, I will showcase the entire process.
KEYWORDS: research, benchmarking, personas, eco model, ideation, figma, wireframes, usability study, design refining, mockups, sitemap, responsive web, javascript, css
Project Overview
My Role
During the project, I actively contributed to various aspects, leveraging my skills and expertise across multiple fields. However, due to time constraints and the need for an efficient division of labor, we allocated specific roles to team members.
In my case, I primarily focused on key areas: ideation and design, prototyping, coding and styling using CSS. Additionally, I played a crucial role in testing and refining solutions to ensure optimal performance and usability.
About Project
Our project revolved around direct collaboration with the client, with a primary focus on meticulous research and utilization of various UX methods and tools we acquired. Our ultimate objective was to deliver a comprehensive website solution that seamlessly integrated cutting-edge features.
The website was developed using vanilla JavaScript and incorporated a database backend, while CSS was applied to ensure visually appealing and cohesive styling.
Meet the Case
Tasja Pulawska has graduated from the Bauhaus University in Weimar and worked as a graphic designer before getting her hands dirty with clay. She has been assistant to Eric Landon, the founder of Tortus Copenhagen, a well-known studio producing stoneware products of the highest quality.
Tasja opened her studio in 2016 in the heart of Nørrebro where she takes care of everything regarding her business alone till to this day. Besides teaching interns, she is working towards offering more courses for groups. She has annual collaborations with artists complementing her work. Tasja opened her studio in 2016 in the heart of Nørrebro where she takes care of everything regarding her business alone till to this day.
Besides teaching interns, she is working towards offering more courses for groups. She has annual collaborations with artists complementing her work.
The Problem Area
Professional artists generally have a lack of resources when it comes to their online solutions as a result, their digital presence is often not in line with their level of expertise within their fields of art.
Additionally, there is a tendency of being extremely focused on the art itself and having less skills and or energy in getting their art across digital channels to the end-users. Therefore, they tend to go for the most typical and affordable web solutions.
Problem Formulation
“How might we create a unique digital
concept and solution for Tasja P. which
will differentiate her on the market
representing her artistic values?”
Development
Process
Tools
Creative tools: Miro, Jamboard, Illustrator, Team Canvas, BMC, Moodboard, Style tile, Sketches
Communication: Microsoft Teams, Messenger
File management: Sharepoint, Google Drive
Time & task management: Asana
Theories
Film: Storytelling, 3-act-structure
Web: Heuristic evaluation
Design: Design principles, Color Theory, Typography, Layout & composition, Gestalt laws, Crap rules
Methods
Insights, HMW’S, Analysis of data, Personas, Hypotheses, Ideation, Brainstorming, Crazy 8’s, Trunk test, 5 second test, Observation, Think aloud test, Interviews, Prototyping
Time Span
We had a well-balanced work during the 4-weeks as we set up milestones and deadlines for ourselves, and ongoingly alocated tasks for each member of the group.
The Research
My Role
During the project, I actively contributed to various aspects, leveraging my skills and expertise across multiple fields. However, due to time constraints and the need for an efficient division of labor, we allocated specific roles to team members. In my case, I primarily focused on key areas: ideation and design, prototyping, coding and styling using CSS. Additionally, I played a crucial role in testing and refining solutions to ensure optimal performance and usability.
About Project
Our project revolved around direct collaboration with the client, with a primary focus on meticulous research and utilization of various UX methods and tools we acquired. Our ultimate objective was to deliver a comprehensive website solution that seamlessly integrated cutting-edge features. The website was developed using vanilla JavaScript and incorporated a database backend, while CSS was applied to ensure visually appealing and cohesive styling.
Sender Research
About the Artist
Tasja P. Ceramics is a business registered in 2016 selling ceramics run by the artist herself Tasja Pulawska, with an open studio at Mimersgade 21. Copenhagen, Denmark.
Tasja P. conveys modern design through the ancient craft of pottery. She enjoys simplicity with a twist; a sense of humor and when things are not taken too seriously. Longevity and sustainability are equally important to her. She likes to make art that is timeless and that is being passed on. The artist likes when clay as a material speaks for itself, and its closeness to nature. This is what she would like to get across in her work.
She loves to see her work in everyday use; therefore, she enjoys creating mostly functional ware – she writes on her website.
Her Work and Products
Tasja P. has been collaborating with other artists as well, designing a line together. She is in constant learning. Her role model is her teacher Eric Landon, Tortus Copenhagen. The artist gets requests from visitors to use her pottery wheel for a few hours.
She is in the process of opening a workshop for students, and she is going to offer more courses for people to work with clay. The actual studio can host a workshop for only up to 6 people; therefore, she is planning to move to a location with higher capacity, which involves more financial resources. Tasja receives larger orders every few months from restaurants or cafés. Her products are ceramics made from 5 different types of stoneware clays mined in Europe. Her glazes are described in earthy tones to emphasize their closeness to nature.
Tasja P. offers 6 different product types, namely cups, bowls, vases, jars, jugs, and teapots in different sizes and designs. She has multifunctional pieces as well, such as a vase that can be used as a bowl. Her best-sellers are cups as they are very personal to people and can be mismatched in the cabinet.
Tasja’s Digital Presence
Her most powerful platform is Instagram, with an average of 22 posts and 5 reels a month with an engagement (likes and comments) on average of more than 1500.
The most engaging post from the last 3 months on Tasja’s Instagram is a process video with more than 2000 likes and almost 50 comments
https://tasjapceramics.com/ – used mainly for product sales (eg. no blog posts, interaction)
https://www.instagram.com/tasjap_ceramics/ – 79,8k followers on Instagram
https://www.facebook.com/TasjaPCeramics – 1805 followers on Facebook
https://www.pinterest.dk/tasjapceramics/tasja-p-ceramics/ – 282 followers on Pinterest
Market Research
In our market research we have been focusing on Danish ceramic studios located in Copenhagen, where our client is based. Therefore, their target audiences are overlapping. As a result, we distinguished 3 main categories, namely workshop spaces, businesses that offer handmade ceramic products, and a fusion category, which offers both workshops and handmade products.
Regarding the size of the business, Tasja P. belongs to a group where the artist is mainly working alone, rarely getting assistance from interns. Solo artists have a tendency to rent/ own a studio space together to share the expenses and scale up their business.
Larger businesses from the fusion category, like Tortus – that our client looks up to – have a bigger group of creators contributing to a more diverse business model (offering more services).
Design Benchmark
In our design benchmark research, we have been investigating more than 50 websites of:
– businesses selling ceramics in dk (10) and internationally (7);
– Danish (13) & international (11) ceramic artists and their choice of expression;
– ceramists and craftsman groups in Denmark (8);
– also, interesting websites to take as design reference (2).
The main websites that are selling ceramics in Denmark are focusing on a basic grid layout with an emphasis on quantity over quality (images being bigger on the site) using a very good category functionality. They do not have a personalized page for the artists. More than half of the Danish ceramic artists’ websites -that we have investigated- use a drag-and-drop website builder solution, such as Shopify or Squarespace. They are easy to use and user friendly, on the other hand, they have disadvantages, such as they have a limited number of templates & templates that have a similar theme causing a lack of differentiation on the market.
Trend Analysis
As a preparation for our content strategy, we have conducted a trend analysis. We have been looking at the following trends, regarding content creation and sharing possibilities, which could drive more engagement for our client.
#TheSimpleLife
People are re-evaluating the things that are most important to them. Sharpening a desire to pay more attention to life’s simple pleasures, such as the calm of being in nature, the pleasure of crafting, baking something from scratch, or the comfort of feeling part of a local community (We Are Social, https://wearesocial-net.s3-eu-west-1. amazonaws.com/wp-content/uploads/common/thinkforward/2021/ Think+Forward+Report+2021.pdf), 2021).
#OddlySatisfying
According to Professor Robert Colombo, watching Oddly Satisfying videos cause the release of chemicals in the brain that bring about happiness and positivity – namely, serotonin and dopamine. Dr. Anita Deak of the University of Pecs attributes this to the ‘mirror neuron theory,’ which holds that watching someone perform an action elicits the same neurological response as performing that action ourselves. Content about pottery production can be made to take advantage of this phenomenon(Lemonade, https://www.lemonade.com/blog/oddlysatisfying- videos-instagram-reddit/).
User Research
Besides the client interview we have conducted 3 user interviews including think aloud method and using conversation props such as the client’s current website. This initial research resulted in the insights below:
Website
2/3 views the site is standard
1/3 mentioned that the SoMe
could stand out better
Logo
3/3 liked the logo
2/3 mentioned that would
extend it
SoMe
1/3 says prefers Instagram
1/3 mentioned FB events
Insights & HMWs
Website
Insight 1: More than 50% of the websites selling ceramics are made with drag and drop website builders, causing a lack of differentiation on the market. Tasja’s website is too standard as it is now
Insight 2: Tasja uses her website mainly for product sales
Insight 3: Social media does not stand out on the website
HMW
How might we create a website which would elevate her from the standard category and would differentiate her on the market?
How might we create a website suitable for product sales that emphasize her social media channels even more?
For grouping the insights, we have been using the card sorting method
Social Media
Insight 1: The platforms with the most increasing popularity are: TikTok (videos), Instagram (reels), Facebook (groups, events), Pinterest (boards)
Insight 2: Most of the client’s social media followers are on Instagram
Insight 3: Facebook and Pinterest are mostly used by Tasja for cross posting from Instagram
Insight 4: Tasja’s most received post is a process video
Insight 5: The client is not consistent regarding captions length and tags
HMW
How can we create a consistent social media content plan for Tasja across all channels, so that the followers can watch and enjoy seeing her throw?
How can we create engaging video content for Tasja’s Instagram, that she could also use on all the other platforms?
Design
Insight 1: The artist values simplicity with a twist, a sense of humour and closeness to nature. The earthy colors are benefiting the brand, because earthy tones emphasize the closeness to nature
Insight 2: It is not clear what the logo stands for, without the artist’s name
Insight 3: Longevity and sustainability are important to the client. Tasja sources her materials locally
HMW
How can we present the artists values (simple, natural, not boring) through the design solution?
How can we redesign Tasja P.’s logo so that it is more clear for the customer?
Business
Insight 1: There is a big potential audience in ceramic art in Copenhagen. Most of the businesses offering workshops are also selling ceramic handmade products. Tasja belongs to the biggest category offering both products and workshop possibilities, therefore she has a lot of competitors
Insight 2: The client wants to grow artistically by teaching. Artistic collaborations are important to her
Insight 3: The client needs more resources for renting a new studio place for workshops. Some of the artists share studio space together
Insight 4: The products are mainly kitchen ware. The largest orders come from restaurants and cafés
Insight 5: Most of the ceramic artists are working alone. The client does not want to have employees
HMW
How can we contribute to Tasja’s growth regarding workshops with our digital solution so she can attract participants and more income for moving?
How can we present the client’s artistic collaborations and important partners to increase her prestige and brand?
Eco Model
The OMD eco model helped us to define those points of the customer’s journey where we could add valueto the business. Therefore, in our solution we have been focusing on:
– initial brand consideration by creating visually pleasing, relevant content for the SoMe platform users;
– and active evaluation phase by producing a high quality, hard coded website (incl. shop).
Personas
The described personas helped us to understand the different target audience’s needs and expectations, behaviors, pain points, decision making and buying habits.
User Journey Map
The user journey map pointed out the importance of consistency in using multiple platforms during the initial brand consideration,active evaluation, purchase decision and experience
Translation
About
Translation of insights into data in UX involves converting qualitative user research findings and observations into quantitative data. This process enables designers to identify patterns, trends, and user behavior metrics that inform data-driven design decisions. It bridges the gap between qualitative understanding and quantitative validation, providing valuable insights for iterative UX improvements.
Ideation
About
Ideation in UX is the creative process of generating and exploring ideas to solve user problems. It’s a collaborative journey where designers brainstorm, sketch, and prototype concepts that inspire innovative and user-centered solutions. It fuels the UX design process, fostering innovation and driving meaningful experiences.
What we used
For the ideation process we have been using creative tools like:
– brainstorming for random ideas;
– sketches, crazy 8’s and mind mapping for video content;
– mood board for website and SoMe.
Mood Board
Earth colors on a moodboard evoke warmth, nature, and authenticity, creating a grounding and organic visual experience.
Concept
Our digital solution is meant to represent in the content the client’s values like closeness to the nature, longevity and functionality, spicing up with playfulness and “simplicity with a twist”; and differentiate the client on the market with a unique, coded website; and supporting her need for collaborations and learning, as well as the process of opening the new studio suitable for workshops.
Video
The 60-sec video is meant to present the making process, accentuating the throwing act, the most engaging and relaxing type of shoot as our research showed.
The video starts with an outdoor establishing shot (act one), and then we are entering the artist’s world, the studio. The indoor scenery (act two) starts with an extreme closeup and then zooms out, showing the important elements and phases of the process. In the third act, after packing the product and having some fun.
We imagined different endings: the cup in use (someone’s home) – showing the product and a Christmassy-funny one (falling snow/eggs) – accent in “twist”.
The 60-sec video has different short video cuts also for SoMe, mainly for stories.
Prototyping
Main principles
1. To create a solution that is “simple, but not boring” (Client interview)- regarding content, design, and tone of voice were:
2. The content for the website and social media must be easy to understand, videos with a simple editing style, without too many transitions and effects.
3. The overall design has to be clean, preferably more white space, classic/modern typography, not too “designed”, but adding some playfulness with brush stroke elements, and the lively, but earthy orange color.
4. The TOV with less sophisticated texts, which would be hard to understand, more simplicity in expression, conciseness, and friendliness.
Development of Visual Identity Elements
T and P are the initials of Tasja Pulawska. She uses P. in her name also to refer to herprofession, Potter. On the new logo we have placed more spots around the upper part of the T emphasizing the brush stroke. We have also added an organic curve on the left side to refinethe shape of the pottery wheel symbol even more. After this, we have added the artist’s full name and description to make it clearer for the user what it stands for.
Wireframes
First, we have been sketching ideas and wireframing in Figma the mobile view, adding more and more details before turning it into the prototype. We have chosen Figma, because of the easy collaboration, sharing, and technical possibilities.
The last wireframe gives an overview of how we are placing the burger menu and the arrangement of the Home, Category Page, Product Page, and About Me, as well as ideas like a Packaging and a Return page which is meant to explain details about the delivery.
The screenshots are showing the different stages of the wireframing process. From sketches, through low fidelity, to high fidelity
Style Tiles
We had two stages regarding the style tile. The final one added represents the chosen colors, typography, and details for the website design. The earthy colors represent closeness to nature and the classic typography gives a clean and professional look. We have also added the new logo, different textures, and keywords representing the mood.
Prototype in Figma
The final Figma prototype shows all the recommended pages in detail, following the style tile and design choices. Underneath screenshots are shown representing the first page on mobile and desktop view where we have added the social media and collaborations. The navigation consists of Workshop, About, Shop, Contact, Collection and a login functionality. Besides the Workshop that is accentuated on the main page we can also take a look on new products and most popular items, such as cups, vases, bowls, jugs and teapots. The slideshow is scrollable to show Collaborations apart from Workshops.
Contrast
We have been using various contrasts as the most important visual technique. The more important elements stand out, muting the less important ones thereby creating some dynamics on the screen: varied sizes on titles, body text, bold text; contrasting colors; different fonts, spacing between elements
Contrast
Repetition
Repetition is used in our solution concerning color, spatial relationships, line thickness and sizes to develop a sense of organization, consistency, and unity, eg. on titles, layout and colour schemes
Repetition
Alignment
We have used design elements with visual connection to one another contributing to an alignment to create a clean and clear look and feel, a visual flow that connects the screen
Alignment
Proximity
Proximity was used to group elements together that were related, so they became one visual unit and gave the user visual clues to help them in understanding it
Proximity
C.R.A.P.
Usage
Technical Documentation
About
The page is encoded in HTML, CSS and Javascript and no other methods are used. The DOM structure is set to three HTML pages, stylized from 3 pages of CSS, and data dynamism is set from 4 pages of Javascript code.
In creating the page, we used the code editor Visual Studio Code, and controlled the live changes in the Firefox browser. For the database we used the site https://restdb.io/, online database service, and Github was used for publishing the page as well as for task sharing and securing the workflow that we had.
Although some tools we utilized expired, the webpage may not function optimally.
HTML – Semantics
When setting up the HTML structure, we included all the relative semantic tags to make it easier for the browser and developers to read the code. We also used “div” elements for easier control and separation of structural parts, but also added “class” attributes with descriptive names to quickly distinguish between them. Some of the other tags that we have used to better diferenciate the compones in the HTML stucture are: article, template, main, body, header, footer, alterantive text.
Javascript
We used multiple files of Javascript, with the main purpose of fetching a database with JSON, where we used the database and made some functions such as “buildNav, getNameOfProductType”,” handleData”,”start” to create a layout and to filter by a maximum of 3 elements, so the user sees only the most relevant items.
CSS
Using CSS we wanted to set up a traditional site layout. We mostly used the CSS Flexbox Layout , often placing it inside each other to control the elements, while we used CSS Grid Layout to layout multiple products.
To position the elements, we used the option to put in the “div” element in order to position it centrally. CSS property “object-fit: cover” and placement of the image inside the container allowed us to determine the size and width without losing image quality and without stretching the image.
We raised the responsiveness of the site by setting up 5 types of media queries, which we chose due to breaking points. For small screens it starts at a minimum width of 350px, then at 700px, 1200px, 1600px and the largest at 1900px minimum widths.
We chose these media queries as such because of the responsiveness, but also because of the layout that ranges from the desktop version to the version adapted to mobile devices, and in the middle for tablets with a mix of both designs and layouts.
Video Post-Production
The videos are edited in Premiere Pro using simple cuts, without transitions, to keep the focus on the action. The medium shots are combined with close-ups.
Properties used in the editing process:
– changing the clip’s position and ratio by adding the Crop and Rotation in Effects;
– adding white balance correction in Lumetri Color;
– adjusting the exposure with toning down the Highlights in some of the images;
– adjusting the speed of some of the clips with Time Remapping;
– slightly correcting shaky images with Warp Stabilizer;
– motion graphics including text and video in the background;
– basic corrections and edits in the color panel and Adjustment Layer
Testing
The testing methods followed our whole process of creating a digital solution through
Think-Aloud test
In the first part of the project, we did a think-a-aloud test on the client’s actual website to find out what the users think, and feel is useful or pleasing to them, as well as what they consider could be improved in the experience. The test showed that the logo is not clear without additional information, and we used this insight in creating our solution.
Trunk Test
We have been using the trunk test method for the Product page of the Figma prototype. The test done with 10 people confirmed for us that the logo clearly says whose site it is, and the navigation is also understandable
5-second Test
For the 5-second test we have been using the platform www.usabilityhub.com. The investigation was created using the Figma prototype to find out what the users can understand as first impression.
In the 5-second test 17 people were participating, mainly on Mobile. For the question: “Did the brand appear professional?” all the users answered yes, confirming our design choices
Heuristic Inspection
We have been using the heuristic inspection method on the newly coded website in which we have tested the usability of the interface, this time only within our group and individually
Conclusion
The Answer to Our Problem Formulation
Primarily, we have created in our digital solution a website for Tasja P. that better differentiates her on the market than the previous one, representing her artistic values.
Secondarily, we have contributed to Tasja’s digital presence highlighting workshops and artistic collaborations on the website, keeping it suitable for product sales.
Other aspects
- on the website we have emphasized her social media channels;
- in the overall design we have kept in mind the artist’s values;
- we redesigned Tasja P.’s logo so that it is clearer for the customer.
Other Projects
We Can Together Make Our Ideas a Reality
Don’t hesitate to reach out—I’m just a click away. Let’s connect and make great things happen!