Merilin Võrk

Artist website
Portfolio website to promote the
artist and their work.
Computer Science BA Thesis

Overview
This project was created for my Bachelor's thesis. The aim of the
thesis was to design and develop a web-based art portfolio that is
structured in a way which supports the representation of the artist’s
work in the web environment.

Problem Statement
Nowadays amateur artists can publish their work on the Internet in
various ways, but due to the abundance of information, it is difficult
to stand out from the competition and gain the attention of potential
clients.

Thesis Questions

1 2 3 4
What are available What is the structure What is the What is the user
web-based solutions for and design of a web- development process evaluation of the
presenting artists work based art portfolio? of a web-based art created website?

online? portfolio?

Read full BA Thesis here

Lang: EST

Design Process
The design process aims to increase usability and aesthetics
following the methods and principles of interaction design.

Research

Literature Review

Competitive Analysis

Vision

Design
Product
Test Test Cases

Process Requirements
Define
User Feedback
Proto-Personas

Prototyping

WordPress

Website Development

Design

Research topics

User experience and design Portfolio Types

Classical and
Portfolio Platforms
expressive aesthetics Research
Topics

Determining the target group

Website optimization

Marketing an social media Preparing content

Competitive Analysis
The goal was to get an overview of the design solutions and
functionalities that are used to present an artist's work.

15 Websites 9 Criteria 8 Conclusions

View Full CA Here

Analysis Criteria

Overview of web Functional and Communication

solutions design solutions channels

Conclusions
1 Front page sets
the mood 2 Navigation bar
must be simple 3 Provide quick access to
what's important to user

4 Less is
more
5 Take the opportunity to demonstrate
your products through the design 6 Let your work shine in
the gallery, don't hide it

7 Encourage the customer

to get in touch 8 Provide necessary information
to sell your products or services

User Personas
I created four proto-personas to keep the product

user-centered and to define website functionalities. Due

to time constraints and limited resources, I decided to
follow Gothelf's Lean UX principles instead of creating
regular personas.

Demographic s

Age: 2
Occupation: Barist
Appreciates sentimental
gifts Demographic s

Careful with spending

money. Age: 2
Kathy - Devoted Friend University studen
Active on social media
An art fan who periodically
Frustrations & Goals Possible Solutions shares and recommends
her favorite artists .
Wants to order a photo Order form with picture Annabel - Fan
based artwork for her friend upload
Not sure in which style and Introduce artists skills and
format to order specialities Frustrations & Goals Possible Solutions
Wants to know about all the Call to action: get in touch .
expenses in advance. Wants notifications about Email newsletter and social
artist updates media announcements
Wants to share art on her Possibility to share art on
social media channels. social media
Demographic s

Encourage customers to
leave feedback and use
Age: 5 hashtags on social media.
Offers artists to sell their
work in her gallery
Appreciates personal style Demographic s

Margaret - Art Gallery Owner
Frustrations & Goals
Wants to see a collection of
artworks
Is interested in medium, art
style and dimensions of the
art piece
Wants to contact the artist.
on artwork
Uses computer to browse Age: 1
the Internet. Non-native speake
Searches for new artists to
feature
Possible Solutions Acive on his phone
Impatient - wants quick
Grid gallery to get a quick Michael - Art Enthusiast results.
overview of artwork
Possibility to examine work
more closely Frustrations & Goals Possible Solutions
Recommend similar art
Suitable for computer Wants to access website Multilingual website
screen. through social media Social media refrences
Gets frustrated if site is not Minimal amount of page
compatible with smaller levels
screens Responsive design for
Wants artists approval to phones and tablets
share art. Copyright display.

Home

Page

Portfolio

Product
Information Architecture
Page
I created a sitemap to visualize the navigation
between pages. It helped me simulate user flows,
Services empathize with the user and further improve the
information architecture of the site.

Contact

About

Social

Media

Prototyping
Based on the research conducted at the UX stage, I started
developing wireframes. It was important to conveniently
arrange the elements on the screens and provide an intuitive
structure of the application. Low- and high-fidelity prototypes
were created using Figma.

WordPress Website Preview

An artist's web portfolio was implemented on the WordPress
platform. Below we will take a look at the most important parts
of the webpage.

Understandability of the site is kept by

easy navigation and multilanguage
option.

The site rescales itself to preserve the

user experience and look across all
devices.

Services & help

The site introduces services and

demonstrates all necessary actions for
the user. The contact page enables the
user to get additional information.

Portfolio View
Home / Paintings

Brand New

Portfolio page has a gallery with Eyes

different kind of art seperated into This Painting is created at a
time when illusions were
categories. Every piece can be directly broken. They were broken, but
new illusions covered up the
reality. How do you know if you
shared through social media. see clearly... maybe that too is
an illusion.

User Testing
Online and offline test sessions were conducted with users to
assess the usability and aesthetics of the website.

With user journeys in mind, I created 5 test tasks for every

participant. The methods used in the test session were think-
aloud protocol and Microsoft Reaction Card Method.

5 test users

The goal was to get User feedback

feedback on the following:
User feedback on the e-portfolio was
overall positive. Users described the
first impression of the front page
website as engaging and easy to
and the purpose of the website
use.

finding and sharing artist's work

understandability of offered
Usability testing resulted in finding
services
many bugs and development
commissioning art
proposals for the future. The biggest
the overall user experience.
problem for users was the website's
slow response time.

Takeaways

Seek familiarity
For better navigation, portfolio categories and the
contact page had quick access buttons sticking
from the sides of the screen.

These buttons didn't fill their purpose - users

didn't notice them at the edge of the screen, and
the icons weren't universally understandable.

Provide feedback
To avoid confusion, some interactions require
reassurance.

Feedback is needed while the page is loading and

?
about which search filters are currently active.

Ask the right questions

Furthermore, tasks need to be
Usability test results can be distorted when the clear enough so the user can
questions aren't asked correctly or when the carry them out without
facilitator fails to create a simulation close to a assistance.
real-life situation.

Screens
The result was a WordPress website for the artist to introduce
their art and services in a unique and personalized way.

Unfortunately, the website is not available at the moment, but

here are some screen views of the site.

Mobile version:

Thank You!

This was my first design and WordPress

project. I learned a lot about the
developement process and found many
Illustration by Merilin Võrk

topics to improve on.

For more information about my UX journey,

feel free to check out my LinkedIn and CV.

linkedin.com/in/merilin-võrk

bit.ly/MerilinV_UXPortfolio
 Merilin Võrk

Artist website
Portfolio website to promote the
artist and their work.
Computer Science BA Thesis

Overview
This project was created for my Bachelor's thesis. The aim of the
thesis was to design and develop a web-based art portfolio that is
structured in a way which supports the representation of the artist s ’

work in the web environment.

Problem Statement
Nowadays amateur artists can publish their work on the Internet in
various ways, but due to the abundance of information, it is difficult
to stand out from the competition and gain the attention of potential
clients.

Thesis Questions

1 2 3 4
What are available What is the structure What is the What is the user
web-based solutions for and design of a web- development process evaluation of the
presenting artists work based art portfolio
?
of a web-based art created website ?

online?
portfolio ?

Design Process
The design process aims to increase usability and aesthetics
following the methods and principles of interaction design.

Research

Literature Review

Competitive Analysis

Vision

Design
Product
Test Test Cases

Process Requirements
Define
User Feedback
Proto-Personas

Prototyping

WordPress

Website Development

Design

Research topics

User experience and design Portfolio Types

Classical and
Portfolio Platforms
expressive aesthetics Research
Topics

Determining the target group

Website optimization

Marketing an social media Preparing content

Competitive Analysis
The goal was to get an overview of the design solutions and
functionalities that are used to present an artist's work.

15 Websites 9 Criteria 8 Conclusions

Analysis Criteria

Overview of web Functional and Communication

solutions design solutions channels

Conclusions
1 Front page sets
the mood 2 Navigation bar
must be simple 3 Provide quick access to
what's important to user

4 Less is
more
5 Take the opportunity to demonstrate
your products through the design 6 Let your work shine in
the gallery, don't hide it

7 Encourage the customer

to get in touch 8 Provide necessary information
to sell your products or services

User Personas
I created four proto-personas to keep the product

user-centered and to define website functionalities. Due

to time constraints and limited resources, I decided to
follow Gothelf's Lean UX principles instead of creating
regular personas.

Demographics

Age: 2
Occupation: Barist
Appreciates sentimental
gifts Demographics

Careful with spending

Kathy - Devoted Friend
Frustrations & Goals
Wants to order a photo
based artwork for her friend
Not sure in which style and
format to order
Wants to know about all the
expenses in advance.
money. Age: 2
University studen
Active on social media
An art fan who periodically
Possible Solutions shares and recommends
her favorite artists .
Order form with picture Annabel - Fan
upload
Introduce artists skills and
specialities Frustrations & Goals Possible Solutions
Call to action: get in touch .
Wants notifications about Email newsletter and social
artist updates media announcements
Wants to share art on her Possibility to share art on
social media channels. social media
Demographics

Encourage customers to
leave feedback and use
Age: 5 hashtags on social media.
Offers artists to sell their
work in her gallery
Appreciates personal style Demographics

Margaret - Art Gallery Owner
Frustrations & Goals
Wants to see a collection of
artworks
Is interested in medium, art
style and dimensions of the
art piece
Wants to contact the artist.
on artwork
Uses computer to browse Age: 1
the Internet. Non-native speake
Searches for new artists to
feature
Possible Solutions Acive on his phone
Impatient - wants quick
Grid gallery to get a quick Michael - Art Enthusiast results.
overview of artwork
Possibility to examine work
more closely Frustrations & Goals Possible Solutions
Recommend similar art
Suitable for computer Wants to access website Multilingual website
screen. through social media Social media refrences
Gets frustrated if site is not Minimal amount of page
compatible with smaller levels
screens Responsive design for
Wants artists approval to phones and tablets
share art. Copyright display.

Home

Page

Portfolio

Product
Information Architecture
Page
I created a sitemap to visualize the navigation
between pages. It helped me simulate user flows,
Services empathize with the user and further improve the
information architecture of the site.

Contact

About

Social

Media

Prototyping
Based on the research conducted at the UX stage, I started
developing wireframes. It was important to conveniently
arrange the elements on the screens and provide an intuitive
structure of the application. Low- and high-fidelity prototypes
were created using Figma.

WordPress Website Preview

An artist's web portfolio was implemented on the WordPress
platform. Below we will take a look at the most important parts
of the webpage.

Understandability of the site is kept by

easy navigation and multilanguage
option.

The site rescales itself to preserve the

user experience and look across all
devices.

Services & help

The site introduces services and

demonstrates all necessary actions for
the user. The contact page enables the
user to get additional information.

Portfolio View
Home / Paintings

Brand New

Portfolio page has a gallery with Eyes

different kind of art seperated into This Painting is created at a
time when illusions were
categories. Every piece can be directly broken. They were broken, but
new illusions covered up the
reality. How do you know if you
shared through social media. see clearly... maybe that too is
an illusion.

User Testing
Online and offline test sessions were conducted with users to
assess the usability and aesthetics of the website.

With user journeys in mind, I created 5 test tasks for every

participant. The methods used in the test session were think-
aloud protocol and Microsoft Reaction Card Method.

5 test users

The goal was to get User feedback

feedback on the following:
User feedback on the e-portfolio was
overall positive. Users described the
first impression of the front page
website as engaging and easy to
and the purpose of the website
use.

finding and sharing artist's work

understandability of offered
Usability testing resulted in finding
services
many bugs and development
commissioning art
proposals for the future. The biggest
the overall user experience.
problem for users was the website's
slow response time.

Takeaways

Seek familiarity
For better navigation, portfolio categories and the
contact page had quick access buttons sticking
from the sides of the screen.

These buttons didn't fill their purpose - users

didn't notice them at the edge of the screen, and
the icons weren't universally understandable.

Provide feedback
To avoid confusion, some interactions require
reassurance.

Feedback is needed while the page is loading and

?
about which search filters are currently active.

Ask the right questions

Furthermore, tasks need to be
Usability test results can be distorted when the clear enough so the user can
questions aren't asked correctly or when the carry them out without
facilitator fails to create a simulation close to a assistance.
real-life situation.

Screens
The result was a WordPress website for the artist to introduce
their art and services in a unique and personalized way.

Unfortunately, the website is not available at the moment, but

here are some screen views of the site.

Mobile version:

Thank You!

This was my first design and WordPress

project. I learned a lot about the
developement process and found many
Illustration by Merilin Võrk

topics to improve on.

For more information about my UX journey,

feel free to check out my LinkedIn and CV.

linkedin.com/in/merilin-võrk

bit.ly/MerilinV_UXPortfolio