Exam Report - zlatkarizova.comzlatkarizova.com/images/exam-report-final.pdf · Team GGHZ: Team...

Team GGHZ: Team Coach:

Georgeana Panturu Anne – Marie Justinus Stærmose

Gintarė Jankūnaitė

Hristina Dimitrova

Zlatka Rizova

December 2017

Exam Report MMD 2nd Semester

1. Links to each group member’s website:

http://georgeanapanturu.com/IriJewellery/index.html Georgeana Panturu

http://amberdream.dk/exam2017/index.html Gintarė Jankūnaitė:

http://hrissi.com/exam2017/index.html Hristina Dimitrova

http://zlatkarizova.com/works/IriJewellery/index.html Zlatka Rizova

2. Link to GitHub Repository

https://github.com/giintaare/Exam

3. Trello

https://trello.com/examproject10

4. Number of keystrokes and standard pages

Keystrokes: 41 756 (only the main part of the report)

Standard pages: 18

5. Authors of different sections

Georgeana Panturu: Business Insights

Gintarė Jankūnaitė: Interaction

Hristina Dimitrova: Summary, Introduction, User Tests, Communication,

Conclusion

Zlatka Rizova: Visualization and User Tests

https://l.facebook.com/l.php?u=http%3A%2F%2Fgeorgeanapanturu.com%2FIriJewellery%2Findex.html&h=ATPJNyouA0Ka6LKzt3GME_DLTpolrwl8VBJjnYZOmQ2_Y2zBBeSQ8xwVuPBMR-FmANDanZpeOPoM-9xfNcBYG1wXKSBkzgR_J7VC0dDR3HGJ4u8NG4lXYA1LSEqcGPWTSVr9yB2TP1c

http://amberdream.dk/exam2017/index.html

http://hrissi.com/exam2017/index.html

http://zlatkarizova.com/works/IriJewellery/index.html

https://github.com/giintaare/Exam

https://trello.com/examproject10

Table of Contents

I. Summary ................................................................................................................ 4

II. Introduction ......................................................................................................... 4

Artist’s Identity Profile .................................................................................................................................. 4

Problem Area .................................................................................................................................................. 4

Problem Formulation ................................................................................................................................... 5

III. Business Insights .................................................................................................. 5

Market research ............................................................................................................................................ 5

Business environment and external factors .................................................................................... 6

Competitor analysis ..................................................................................................................................... 7

Mission, vision and values ....................................................................................................................... 10

Business model canvas ............................................................................................................................ 10

SWOT .................................................................................................................................................................. 12

TOWS .................................................................................................................................................................. 13

IV. Communication .................................................................................................... 14

Initial user research .................................................................................................................................... 14

User tests .......................................................................................................................................................... 16

5 second test result and conclusion ................................................................................................. 17

V. Communication plan ........................................................................................... 20

Purpose, objective goal .......................................................................................................................... 20

Effect .................................................................................................................................................................. 21

Message ........................................................................................................................................................... 21

Sender ............................................................................................................................................................... 21

User profile ...................................................................................................................................................... 22

Customer Journey ...................................................................................................................................... 23

Digital media ................................................................................................................................................. 26

SEO ...................................................................................................................................................................... 26

USP & ESP ......................................................................................................................................................... 27

VI. Visualization ........................................................................................................ 28

Design brief .................................................................................................................................................... 28

Artist profile ..................................................................................................................................................... 28

Internal approval process ...................................................................................................................... 29

Technical Constraints ............................................................................................................................... 29

Design Process .............................................................................................................................................. 30

StyleTile .............................................................................................................................................................. 34

Design program ........................................................................................................................................... 36

Video ................................................................................................................................................................. 38

VII. Interaction ........................................................................................................... 38

The process..................................................................................................................................................... 38

VIII. Tests on developed prototype ............................................................................. 43

Krug’s Trunk Test ........................................................................................................................................... 43

Heuristics inspection .................................................................................................................................. 44

IX. Conclusion ........................................................................................................... 45

X. Reference ............................................................................................................. 46

XI. Appendix .............................................................................................................. 47

Sketches ........................................................................................................................................................... 47

Mood board .................................................................................................................................................. 49

Wireframes ...................................................................................................................................................... 50

Mock ups ......................................................................................................................................................... 52

Design examples ......................................................................................................................................... 53

Design manual ............................................................................................................................................. 56

Test results ........................................................................................................................................................ 60

WordPress guide .......................................................................................................................................... 68

EXAM REPORT – IRI JEWELLERY 4

Summary

The following report represents the whole process, argumentation and final solution of

the exam case assignment `Develop the Online Presence of an Artist´. The flow of the

report is following the logic of the process starting with an introduction to the problem

and ending with the final solution and conclusion. Our team found a jewellery artist who

was willing to be an active part and supporter of the project. All the statements about

the artist are real facts, provided by herself.

Responsible authors of all the sections in the report are mentioned in the footnote.

Additional graphics and images are mentioned in the footnote and added in the

Appendix.

Introduction 1

Artist’s Identity Profile

Irizan Imamova is a hand-made jewellery artist. Since 2011 she is creating her pieces of

art under her own brand "Iri Jewellery". She has an existing website functioning as a web

shop which brings her satisfactory revenue. She is operating on the Bulgarian market.

Media channels which are currently used to promote the brand are Facebook and

Instagram. As an artist she insists on high quality in production and precision in design.

Problem Area

Since returning her hobby to business Irizan has put the emphasis on sales for a long time

and hasn't paid the needed attention on her presence as an artist. Now she wants to

move to the next level aiming at brand awareness for Iri jewellery and turning the lights

1 Hristina Dimitrova


on herself as a recognizable valuable artist with a strong online presence. As a young

and ambitious artist her next challenge is Scandinavian market.

Problem Formulation

How the online presence of Irizan Imamova should be improved to distinguish her as a

valuable artist among competitors in Scandinavian market and in the same time to

create awareness and communicate effectively her brand Iri Jewellery.

Business Insights2

Market research

The market

Denmark has a sound basis for obtaining a share of the increasing market for creative

products and handbags, watches and jewelry.

According to the jewelry editor Charlotte Møbjerg Ansel-Henry, in the Scandinavian

market jewels play an important and independent role on the fashion scene and

Copenhagen has the role of the hub.

Sleek minimalist design is a celebrated characteristic of the Danish jewellery market and

it can be difficult for young designers to set themselves apart from the crowd. But, some

of the Danish artists strives to ensure their handmade pieces are all completely individual,

distinguishing their brands from others. They are also fairly affordable for handmade

pieces; a pair of earrings start at around 250DKK.

2 Georgeana Panturu


Potential competitors:

1. Danish artists

2. Danish websites

3. Known shops from Copenhagen

We have started the business plan with a deeply jewelry research about the

Scandinavian market. We have categorized the results in 3 different areas, like: Danish

artists, Danish online shops and very-known jewelry shops in Denmark. We are going to

focus on the Danish jewelry artists who are making handmade, unique jewels, as they are

our main competitors.

Business environment and external factors

There are two kinds of business environments: micro and macro. These environments’

factors are beyond the control of marketers but they still influence the decisions made

when creating a strategic marketing strategy.

Micro Environment Factors

The customers: young women between 20 and 30. Our artist’s jewellery have affordable

prices, so the target group doesn’t necessary need to have a fulltime job / high income.

The competition: Danish artists – are the main competitors on the market, as they also

design handmade jewellery with precious stones. More than this, there are several Danish

jewellery websites that don’t have a shop in the city, but they do provide quality jewels

at affordable prices. And in the end but not the last competitors are the very known

shops like Pandora and Aveny.


Macro Environment Factors

Demographic forces: Being a Danish artist is definitely a plus since Danish jewellery is

deeply anchored in the country’s history. More than this with both expertise and creativity,

famous Danish jewellery brands range from 110-year-old silversmith Georg Jensen or 50-

year old, family-run Ole Lynggaard, to trendy, diamond-studded Shamballa Jewels worn

by superstars around the world

Technological factors: Since Denmark doesn’t have a big home market and artists can’t

rely on finding precious stones and materials on the Danish soil (Denmark has little amber

and a few freshwater pearls), so it required them to be creative. Diversity became a

strength. Yet, the brands that truly made it internationally are those with a universal

aesthetic.

Competitor analysis

In order to have a better understanding about strengths, weaknesses, position and shares

in market, we conducted competitors’ analysis. As we have focus on Scandinavian

market, we looked for jewelry designers only in this specific area. For defining direct

competitors, we searched designers who have similar products and revenue goals. As a

result of the research, we have chosen to describe and compare three famous

Scandinavian artists: Carre Jewelry, Sif Jakobs, Maria Black Jewellery.

CARRÉ JEWELRY

Carré Jewelry celebrated its 25th anniversary this year, now with four stores in Denmark

as well as outposts in Taiwan and Japan. The colorful collection of rings, earrings, and

bracelets is heavily influenced by female personalities, from Elizabeth Taylor to Danish

author Karen Bixen.


SIF JAKOBS

The Iceland-born designer Sif Jakobs has been creating her namesake brand out of

Denmark's capital since 2000. Sif Jakobs Jewellery designs and produces sophisticated

jewellery of the highest standard with a modern expression. Today, the brand is known

for its unique design profile and strong DNA.

MARIA BLACK JEWELLERY

Danish-Irish designer Maria Black launched her first collection MBJ in 2010 built on

ambition and passion for precious metals with a fashion-forward approach to

conceptual jewellery design. Her desire to create was sparked from the inspiration and

beauty she found, leading her to discover and pursue her natural talent for jewellery

design.

Value

preposition

Elegant, style,

luxury, quality

Style, classical,

simplicity,

quality

Luxury, style,

quality, elegance

Urban look,

style, elegant,

classical,

simplicity

Audience Modern-urban,

graceful,

elegant

people

Elegant, smart,

creative

fashionistas

Intellectual,

successful,

graceful people

Creative,

elegant,

modern-urban

women


Range of

authority

Rings, earrings,

bracelets,

necklaces,

jewelry for kids

Earrings,

bracelets,

necklaces,

pendants, rings

Rings, earrings,

bracelets,

bangles,

necklaces,

cufflinks

Earrings,

bracelets,

necklaces, rings,

ear cuffs

Product

prices

Approx. 200-

500 Dkk

Approx. 400-

1200 Dkk

Approx. 1200 –

2000 Dkk

Approx. 700-

1500 Dkk

Sales

channels

Online shop Online shop,

store

Online shop, store Online shop,

store

Advertising Facebook,

Instagram

Facebook,

Instagram,

Pinterest,

Newsletter

Facebook,

Pinterest,

Instagram, Twitter

Facebook,

Instagram,

Newsletter

Conclusion

According to competitor analysis, Iri jewelry fits in Scandinavian market quite well as it

has similar value preposition, range of authority, concentration to quality and

appearance as other famous this area’s artists. However, there are some disadvantages

such as lack of sales channels and advertising, on which Iri Jewelry should be working on

to increase sales and brand awareness.


Mission, vision and values

Mission

Iri Jewellery’s mission is to deliver handmade, high quality jewels using precious stones, to

every woman. Her goal is to make beautiful jewellery affordable for everybody, using

high quality materials and unique attractive designs.

Vision

Our artist’s vision is to expand her brand across borders and to get known for her unique

pieces of art. Her aim is to be recognizable as a valuable artist.

Values

Handmade/ unique products

Quality – precious stones (Swarovski)

Accessible- price comes straight from the artists (NO intermediary costs)

Business model canvas

The most important parts of the Business Model Canvas due to our concept are value

propositions, customer relationship, channels and customer segments.

Value proposition is directly connected with the values we have established as engines

of the website. Bringing value to the service we offer is our main goal.

Customer relationships are in the core of our concept. Creating long-term relationships

with them is a factor of success.

Channels are considered also as an important piece of the concept and essential for

realizing the idea.

Customer segments - young women between 20 and 30. Our artist’s jewellery has

affordable prices, so the target group doesn’t necessary need to have a fulltime job /

high income.


Business goals for the website and selected digital media

Our main goal is to improve the online presence of Irizan Imamova in order to distinguish

her as a valuable artist among competitors in Scandinavian market.

Our focus is to create awareness and communicate effectively her brand Iri Jewellery.

Through the selected media channels as Facebook, Instagram and Pinterest we are

planning to advertise and make her brand visible on the Scandinavian market.

We are in the process of developing an easy and friendly-user online shop in order to

deliver a nice experience and creating a long-term relationship between the artist and

the customers.

SWOT

S1: Unique handmade jewels

S2: High quality materials like precious stones

S3: Affordable prices for the Scandinavian market

W1: Weak brand presence

W2: Limited amount of products

W3: Lack of sales channels and advertising

O1: Scandinavian market is an open market who appreciate handmade

unique designs and products

O2: Artists are supported by the Danish culture

O3: Prices are a bit lower comparing with Danish artists

T1: Competitive market

T2: Competitors have an online shop or even stores in the city


TOWS

(S) (O) / Maxi-Maxi

Affordable prices comparing to the average price on the

Scandinavian market (S3, O3)

A great opportunity for selling handmade unique products (S1,

O2)

Scandinavian people appreciate luxury products (S2, O1)

(W) (O) / Mini-Maxi

Handmade unique products made out of precious stones at affordable price for the

Scandinavian market. Improving the online presence by advertising will create visibility and awareness.

(S) (T) / Maxi-Mini

Unique handmade jewellry market is a strong

competition, but high quality precious stones at affordable

price can be a successful business.

(W) (T)/ Mini-Mini

Focusing on promoting the brand through the social media channels.


Communication3

Initial user research4

Survey

Before defining user´s profile and continue with design brief we decided to create a user

survey to gather more information about the potential users, their buying behavior, their

preferences and expectations about the website. Most of the questions were with an

open answer. The aim of this was receiving information which comes direct from the user

without any influence by us. Results from this survey will play the role of a starting point

for solving the problem.

About the survey

We divided the survey in two sections. First one was about the users themselves, the

second one was about users' expectations about the website. The Survey was

conducted online and the participants were representatives of the target audience. To

receive more accurate and non-professional feedback we avoided intentionally female

students from MMD program.

Results and Conclusion

USERS|

Demographic data:

Most of the users were originally from Denmark. All of them are living, working or studying

in Copenhagen area. They work or study in various fields, but they all had something in

common - passion about style and accessories.

3 Hristina Dimitrova 4 Hristina Dimitrova, Zlatka Rizova


Buying behavior:

We asked our users questions like `How often do you buy jewellery ?´, ´Do you wear

handmade jewellery?´ , ´Where do you search when you want to buy new jewellery?´,

´Do you prefer online or physical shopping?´

Answer to these questions were as various as the users who participated in the tests. Main

results of this part of the survey were that users are mostly searching online when they

want to buy something new. Almost all of them have a preferable artist or brand but they

are opened to give a chance to unknown artist if the design and quality are worth it.

They are also willing to buy handmade jewellery because it's considered as trendy and

unique. Price is not an issue in that case, because most of them are willing to pay up to

1000 DKR. Users are using social media like Facebook pages, Instagram and Pinterest as

a main source of information about new modern artists and brands.

Regarding answers from this section we can conclude that the right usage of social

media could be the protagonist of communicating the artist's identity and brand. Results

also turn on the light that word of mouth marketing strategy is never old fashioned and

it could be used as a working tool. It appeared that the most important value for user

when they choose jewellery is DESIGN, that means that to promote the artist in a best

way we should choose to show in the gallery the most distinguishing items which could

present her in the best way. A way of doing this will be to show various items to users

when we conduct a focus group interview and see which products will be most popular.

WEBSITE

In this section we focused a little on UI and more on UX. We wanted to know more about

users' ideas about how the website should look like. We asked them about color, design

and style preferences to get initial idea about the UI of the website. We asked also basic

questions related to functionality of the potential site. Where do they expect to see the

navigation, the social media icons, etc.


Answers to these questions gave us basic but important information for the design

program. Most of the users prefer light but soft colors, contrast and minimalism in design.

Most of them expect social icons to be in the footer, but we have to mention that this is

because of common sense. Navigation all of them expect to be on the top of the page

but some of them mention they expect to be aside. Users expect to see details about

the materials from which the products are made and also if they have the option to buy

the product they would prefer to do it directly from the website and not to be referred

to an external page.

User tests

Design User Tests

To make a visual testing on the design we conducted BERT and 5 second tests on the two

mock ups

First we showed to the users 5 second test and after BERT. The reason for this order is that if

users make first BERT they already would be prepared for the 5 second test.

Note:

5 second test was conducted on 2 mockups created based on initial survey about

handmade jewellery website. Tested users were part of the target group (young women

between 20/30 years old, living, working or studying in Denmark). Results are summarized

from the two mockups tests, because answers to both of them were very similar.


5 second test result and conclusion

1. What do you think this page was about?

On these questions most of the users answered "jewellery", but some of them were

confused from the images of the bride that the page is about wedding jewellery or

jewellery for special occasions. Regarding this results image will be changed with a not

confusing one.

From answers to this question we also understand that it is not clear to users that jewellery

is handmade which is one of the core values for the brand and the artist. That’s why

emphasizing this information should be considered for the final mock up.

2. Rate the quality of this page between 1 and 5

Results on this question are satisfying but not good enough as we want them to be. Users

rated the page between 3 and 4. This should be a red light for us to improve the whole

appearance of the page, which is very important for creating brand awareness

3. Did the brand appear trustworthy?

Answers to this question were various. The basic and most important conclusion from them

is that if more information about the brand itself is put on the home page it will make the

brand appearance more trustworthy and strong. Other recommendation from users is

that by using more simple design for the webpage brand also will appear more

trustworthy and will not look "cheap"

4. Which element on the page did you focus on most?

Almost all the answers are saying "the bride". That confirms the conclusion made from the

answers to the first question that we are sending a wrong message to the users using that

image and we have to change it with something simple which sends the right message.


Design

Minimal

Clear

Professional

Friendly

Interesting

Modern

5. What was the brand name?

Most of the users don’t remember the name of the brand, because of too much noise on

the page. This shows again that if we simplify the design and make it more clear, the

brand will be noticed easier and become memorable.

BERT5

GOAL:

The aim of our mock ups was to reach results closer to 1 point (left side answers). Conclusion

is made as a summary of the two BERT results, because the answers are almost the same

to both of them. This test appeared to be very significant and important for design process,

because we could extract the minuses of the design and improve them in the final mock

up, which will be later tested again. For this test we focused mainly on users who are part

of KEA digital, because we wanted to receive more professional feedback regarding the

design.

5 Results graphics, screenshots plus mockups in the Appendix


Mainly results are showing that the design is pretty clear, but there is what to be improved.

It's absolutely friendlier than impersonal, and at that point the goal is reached. It's also

perceived as minimal and not complicated, which is also a good start for it.

Conclusion

Main concerns are related to professional appearance of the website, how interesting it

is and if it's modern enough. What we must improve is to make design look more

professional which directly make it more trustworthy. We must think what to do to make it

more interesting and not boring to the users, because this will make them stay longer on

the page. Last but not least we must bet on the modern look. Regarding the fact that

there are many artists with very interesting and modern website proposals we have a

strong competition which shouldn't be underestimated and to try to be one step before

them. This will help to attract more users and communicate the brand effectively.

Users define the design as more casual than formal. And here appears the question should

we keep the formal design goal or change it to casual. We will reconsider this goal and

ask the users again about their preference.


FINAL BERT6

Final BERT was conducted on a new created mockup which is a result of the conclusion

made on the previous two BERTs on the initial mockups. The aim of the final mockup was

to improve all lacks of the design and to cover as much as possible the design goals we

set in the beginning.

Results and conclusion

Results from BERT on this mockup showed that we reached the goal and we could use it

as a base for developing the website.

Communication plan7

Purpose, objective goal

The objective goal of the website is to improve the online presence of Irizan Imamova

(Iri ) and her brand Iri Jewellery. In the digital world we live our artist and her own brand

could not survive, be competitive, recognizable and popular without a strong online

presence. Using the power of social media as a bridge between the artist and her target

audience could make stronger her online presence. Also showing to the users who the

artists is and what is the story behind her art would deliver the message Irizan Imamova

wants to send via her art.

6 Graphic in the appendix 7 Hristina Dimitrova


Effect

Effect of the website will be to popularize Irizan Imamova as an artist and her brand Iri

jewelery among Scandinavian users

Message

Hand made with love

Sender

Irizan Imamova - handmade jewellery artist from Bulgaria.

Note: see artist’s identity profile

Target audience

Location: Denmark

Age: 20/30

Gender: Female

Occupation: students/ young professionals with a personal style


User profile

Gender: female

Country: Denmark

Hometown: Ebeltoft

Current address: Valby, Copenhagen

Name: Ida Jørgensen

Age: 26

Occupation: Marketing Intern at Think PR, Copenhagen

Education: Brand Management at University of Copenhagen

Interests: Organization and participation in marketing campaigns and social events


Customer Journey

Pre – Service Period


Service Period


Post – Service Period


Digital media

As it’s mentioned before in the digital world we live digital media is one of the most

efficient weapons of any artists or business to have a strong and persuasive online

presence. Developing a portfolio website which represents the artist’s work and herself

is the basic step and foundation. But the real deal is not only to be online but to be

actively online, up to date and follow up your target audience. Facebook and Instagram

are proved to be the social media channels which are more than successful and working

tool for being popular. As much active the artist is by using these tools as better will be for

her brand, for her popularity as an artist and her image among the users. A trustworthy

image is the key for strong customer relationship and social media is very important for

building it. Having a Facebook page, an Instagram profile were the first steps the artist

made for her online presence, but they were representing only her art and not herself.

Now with developing a portfolio website we give the users a chance for a deeper look

inside what and who is behind this art. Being consistent we put an emphasis on social

media in the new build website and giving also an opportunity to users to contact directly

the artist on the contact page. Sharing images of art users like in Instagram and

Facebook, saving them on Pinterest and also sharing will gain popularity to Irizan

Imamova. Once users start sharing they start networking and word of mouth marketing

will be brought to the next level.

SEO

SEO is essential for successful online presence. The reason for that is pretty simple. An artist

could have a fabulous website, but when nobody visits it all of the hard work and effort

become nonsense and a lost cause. There are many ways to search engines to be

pinged, but in our particular case we needed something which will work for the artist.

Regarding the fact the we used WordPress as a CMS we found two solutions. First of them

is to use Yoast SEO plugin for WordPress and the other one is to activate the XML sitemap


functionality, which will automatically ping Google and the other search engines

wherever the artist post something new.8

USP & ESP

USP

Unique selling proposition is an essential part of the communication between the Artist

and her target audience. What makes Iri and her jewellery unique and distinguishing is

something that local Scandinavian artists don’t have for a simple geographical reason.

This simple unique feature is the Southern accents of the design which make her art

recognizable and different from what is offered in the market. This couldn’t be

considered as a disadvantage but as a main advantage because Scandinavian women

tend to be trendy and open minded for something new which will make them shine.

USP of Iri’s art is also related with her main values – high quality and original unrepeated

design. Materials she uses are Swarovski crystals which are very popular among young

women and silver which is the preferable metal in Scandinavia.

ESP

If USP is essential for Iri’s brand and sales, then ESP is twice more important for herself as

an artist and the message she wants to send to her customers. Establishing strong

customer relationship is the key for a long lasting and loyal engagement. As an unknown

artist to Scandinavian market Iri is facing a challenge not only to be noticed, but to build

a bridge between her and the new customers. The question is how to build that bridge

and achieve the goal. During the survey we made we asked potential users if they would

like to know more about the artist. The results show that the majority of them are interested

in the artist herself and knowing more about who is standing behind the product is very

important for building trust. The challenge here was to find the best way of presenting Iri

8 http://rightbrainrockstar.com/general-advice/16-things-you-can-do-today-to-get-your-artwork-noticed/

http://rightbrainrockstar.com/general-advice/16-things-you-can-do-today-to-get-your-artwork-noticed/


in a light which is distinguishing, friendly and in the same time trustworthy. We were

inspired by VOGUE’s videos about famous people and artists where they are being

interviewed in their homes in the most natural way while they are doing random daily

tasks. These videos are very popular among young women and they have a lot of

followers. This approach of presenting an artist in a natural light is considered to be

successful for building a trust and closer relationship with the customers. We decided to

go even further than VOGUE where the filming is somehow directed and we asked Irizan

to make herself a homemade video in which she is making a small talk about the story

behind her art, how she started, what inspires her and why her art is important and special.

Visualization9

Design brief

Artist profile

Irizan Imamova is a handmade jewelry artist. She needs a responsive website with

modern design. The website should be professional, clear and minimalistic with the main

purpose to present her products in the Scandinavian market. Based on her first website

and her own design she prefers to her new website three colors: grey, pink and white.

Design objectives

- Responsive website and mobile friendly;

- Contemporary design and modern UI;

- Appropriate colors for the target group;

9 Zlatka Rizova


- Transform Hicks law to Fits law;

- Simple navigation bar with three main sections: "Home"; "Gallery" and "About the

artist";

- Option for purchase but the emphasis is on the gallery;

- Clear social media menu for the users;

- Video related to the artist and her work

Issues

Internal approval process

One of the main issues we can have is the time spent on the internal approval process.

In order to speed up the flow of a document, we need to have a well-thought-out

workflow. It will streamline the time it takes to coordinate the approval process by

managing and tracking the different stages of the process. It will also streamline the cost,

minimize any risk and make for a more efficient work process.

Technical Constraints

We can refer to different platforms used by users, Android/ iPhone(ios), PC/Mac in which

case we have to make sure that the website offers the same experience in every use

scenario. We need to make sure that the website is delivering the same quality of service,

no matter how new/updated the platform used by the user is.

Additionally, we have to make sure that the website is updated to make sure it works as

intended on new updated platforms, or in other words: maintenance.


Design examples10

We observed the competitors of Iri Jewellery in details on the Scandinavian market

because we wanted to build an equivalent website to those of the direct competitors

such as Carre jewelry, Sif Jakobs jewelry, and Maria Black.

We made a research analysis of the most modern websites of 2017 because our aim is to

create a responsive, clear and minimalistic website with contemporary style. The

examples of some of the most modern websites of 2017 can be seen in the Appendix.

Design Process

Sketches11

We created sketches based on the information from the artist and her current website

and identity. In the beginning of her work, she made budget jewelry but over the years

her business has developed and she started to work with Swarovski and producing more

luxurious options.

In her current website, we found jewelry for women, men, and kids. That's why the

sketches include a navigation bar with four main sections - "Home", "Casual", "Deluxe"

and "About". The sections "Casual" and "Deluxe" have categories: "Women", "Men", and

"Kids". By "Casual" we mean her budget jewelry and by "Deluxe" - her luxurious jewelry.

When the user clicks on a product a new page opens with detailed information about

the product, product's name and a button "Buy now".

In the "About" page the user can find the artist's story, her contact information, and video

for her product - hand-made jewelry.

10 Design examples could be seen in the Appendix 11 Sketches could be seen in the Appendix


We mentioned in the sketches the media channels which the artist uses - Facebook and

Instagram.

We use the sketches to visualize our early understanding of the client, her work, and her

customer base. Additionally, the sketches would serve us as guides for the page content.

Mood Board12

After the survey, we made a mood board which illustrated our target group - women,

the product - jewelry and the colors which were chosen from the users - soft, light and

feminine colors.

We used the mood board as an inspiration for the first mock-up.

12 Bigger size of the mood board could be seen in the Appendix


Wireframes13

We created the wireframes based on the survey and card sorting test. We focus on the

Scandinavian market and more precisely, females living in Denmark because they show

interest in jewelry, unlike men and children.

After the results of the survey and card sorting test, we adjusted the main sections a little.

Instead of "Casual" and "Deluxe" from the sketches, we put a "Gallery" section with

categories: "Rings", "Bracelets", "Necklaces", "Earrings" and "Kits", because our target

group is women which are ready to spend more than one thousand krona on jewelry

and the price is not an issue in this case. Also, we added a Social media" section to the

navigation bar ", because it is important for the users. And the last main change we made

was on the "Product" page where the users can now see the price of the product

because it is important for the users to see the price before they click on the button "Buy".

The wireframes were helpful to give us a clearer picture of how the new website of our

client will look on a mock-up.

Mock-ups

For the Five-second test and BERT test, we prepared two kinds of mock-ups based on a

survey, card sorting test, mood board, and wireframes. Both of them have a mobile

version and desktop version because our aim as multimedia designers is to create a

responsive website for our client which should be modern, minimalistic and professional.

We chose a different design for the mock-ups because we wanted to give the users more

options and they could select the best ones and help us to improve the user interface

and the user experience.

For the mobile versions of both of them, we used similar colors, fonts and burger menu

but the difference is in the footer where one has a fixed footer with social media. Also,

13 Wireframes could be seen in the appendix


one of the mock-ups has a slideshow on the homepage as opposed to the other which

has a main image.

For the desktop version we used different navigation bars - aside and a horizontal

navigation bar in the header, but in the two mock-ups, the user can find the social media

in the header.

After the results of the Five-second test and BERT test, we created a third kind of mock-

up which was improved based on the user's answers. Thanks to the tests we managed to

reach our aim and make a clear, professional and minimalistic design for the website. It

is confirmed by the user's answers to the last BERT test of the third mock-up.


StyleTile

Design

For our website, we chose a contemporary design. The contemporary design is modern,

clear, simple and fit for different devices. That's why we used a large responsive image

on the home page, which can be seen in the most modern websites nowadays. The

large responsive image can be visible on different devices - computer, tablet, mobile

and accurately describe what the website is. For the mobile version, we removed the

busy navigation bar and changed it with a modern burger menu to make the user

experience clearer without distractions.

Color palette

Our persona prefers light, soft, feminine colors and contrasting darker colors.

That’s why we use white color for the website with shades of pink, gray and black colors

for contrast.


Logotype

We redesigned the artist's original logo. We used Vivaldi Italic font because it is a

handwritten font which looks elegant and feminine and gives a feeling for something

which is handmade. The diamond element emphasizes to the user the product which is

jewelry. The soft pink color of the logo hints that it is handmade jewelry for females.

Typography

We chose to work with Roboto Light font from the Roboto family for the website because

it is a web safe and sans-serif and also it is appropriate for responsive websites. Roboto is

a font developed by Google and is used as the default font for their mobile operating

system – Android. This gives the advantage of providing the user with a more seamless

and consistent user experience on their mobile device. Google themselves describe the

font as being “modern, yet approachable” and “emotional”.

Also, we use Freestyle Script font for an accent when we want to emphasize title or quote.

Composition

For the navigation bar on the desktop version, we use symmetrical composition. The logo

is in the center and on the left side of the logo is the menu with main sections on the right

side of the logo is the social media menu.

On the mobile version, the users can see symmetrical composition as well. On the left side

is the logo and on the right - burger menu.


We used hicks law for a "Gallery" section but for “Home”, “About Iri” and “Contact”

pages we used fits law.

Gestalt laws

PROXIMITY - Elements which are close to one another are part of one group and is clear

that they are all part of one item. It can be seen in the individual posts on the website.

SIMILARITY - The individual posts are similar to one another conveying the sense that

although they are different items they are all product items.

Design program

LOGO

History of the logo

Our client’s logo includes her name and her product. She has some variations from the

beginning of her idea until now.

This is the first one for her first website.

She has another one which she uses on Instagram and Facebook.


We redesigned her second logo according to the survey for the website UI and UX

because the users prefer light and soft colors. That’s why we changed the logo color with

softer pink. Also, the users would like to see more contrast and this is the reason the

diamond element in the logo is darker.

Colors

The colors are an important part of the artist's visual identity. The black and white colors

are classical and give the sense of professionalism. The soft pink color is a gentle and

feminine and also it is appropriate for our target group - young women of Scandinavia.

The grey color is for contrast and at the same time, it combines well with the pink color.

Typography

The Roboto Light font was chosen because it is a safe web, suitable for different devices

and readable by the users.

Freestyle Script font was chosen because it collaborates well with the style of the artist

and gives a feeling for something which is handmade because the Freestyle Script font

is in the group of handwritten fonts.

Vivaldi Italic is handwritten font either. It looks beautiful and emphasizes the elegance of

the artist and her unrepeated work.


Video

To build good ESP for the Iri Jewellery website we implemented a video related to the

artist and her work because this is what the survey results show. The users are interested

in seeing and receiving more information about the story behind the artist's art.

Unfortunately, the video quality is low because we had no chance to meet Irizan

Imamova in person and to make an interview with her with a professional camera

because she lives in Bulgaria and we are situated in Denmark but we are satisfied from

the result of the video as we show what the users want to see and hear. On the video, Iri

is shown in the most natural way in her daily routine and the users can hear Iri's story from

her own perspective. In this way, we established a strong and loyal relationship between

Iri and her customers.

Interaction14

After creating design brief based on different analysis and user tests, we started

developing a website, which would fulfill both artists and customers’ needs and desires.

The process

Starting from scratch

Before beginning to develop a website, we have created a new GitHub repository, so

that all group members would be able to access the code and work on it at the same

time. After this, we have started creating a simple structure of the site in brackets. First

we made it for the mobile version, later – created it more responsive, so that it would fit

for all digital devices. For this, we have been using media queries.

14 Gintarė Jankūnaitė


Creating Database

For database we have chosen to use WordPress, as it is easy to take information from

and simple for the artist to update new content. To extend functionality and add new

features to WordPress, we have installed few plugins. One of them is - Advanced Custom

Fields, which allows us to add extra information field to post. In our case, we used it to put

price and material fields that are required, so that the artist would never forget to write

in it. Another plugin is ACF to REST API, that sends custom fields to API, and we can use

them for our website.

Each post we divided in different categories (rings, earrings, bracelets and necklaces)

and added tags, which are unique for every product. Due to this, the customer would

be able to find the specific item very easily, as it has few searching options.

Fetching data

To fetch data from WordPress and use it on our website, we have been using JSON.

We have created a template, where we added all information about item, such as: title,

image, description, price, materials and “Buy” or “Details” button (depends of the page)

and cloned it multiply times, to show all items, that we had on WordPress.


Moreover, we called few more functions: one of them shows single post on the page

(we used it for giving more details about product):

And function that shows posts divided by categories:


For having categories listed in menu, we created one more template, which allows

putting all categories from WordPress, without writing them manually:

After that we called function, which fetches categories and ads to the menu:


Styling

For styling the website, we used both external (which has been used the most) and

internal (only for specific items) stylesheets. As the mockups that we have been testing

have a very simple style, we tried to keep it the same way in styling website too. However,

we still had some issues with creating navigation, as on mobile and bigger screen

devices, we needed different kind of dropdowns. Due to this, we used some examples

from w3schools.comi

For contact page, we have chosen to use contact form, where user can fill in his

information and sent directly to the artist. To do so, we took an example from

w3school.com again.


Tests on developed prototype15

After developing the website’s prototype we needed to check its functionality. That’s

why we conducted Krug’s Trunk test, Expert test and Think aloud test.

First test we conducted was checking Krug’s Heuristics. Participants in this test were KEA

students but outside MMD program. The aim of this choice was that we needed to see

how any potential user would navigate and explore the website and we didn’t need to

focus on the specific target group to get a feedback. We avoided MMD students for the

reason that they could orientate easier observing the page.

Krug’s Trunk Test

At any page point out as fast as possible we asked to testers the following questions:  

1. What is this? (Site ID)

2. What page am I on? (Page name)

3. What are the major sections of this site?

4. What are my options at this level? – (local navigation)

5. Where am I in the scheme of things? – (indicators, e.g. “crumbs path”)

Results and conclusion

All the 5 participants in the test managed to identify the site ID, to define on which page

they are (we showed different pages to each participant) and they could define their

options according to navigation. Some of them were not sure how to answer to the last

15 Hristina Dimitrova


question regarding indicators and crumbs path. Here we found one issue in our prototype

– there was not an indicator which was showing on which page was the user. All of them

managed to understand this regarding the information on the page. This fact showed us

that we need to improve UX at that point. Possible solution to this problem was to change

the color of visited page which would indicate it.

Heuristics inspection

Heuristics inspection was conducted because we needed to receive feedback not only

from potential users but also from experts. The role of experts played MMD students, who

have already done this kind of expert review and are familiar to heuristics. Conducting

heuristics inspection we tested website prototype’s navigation, efficiency and

functionality.

Navigation – Makes getting around the site easy and takes out the guess work of a

user’s visit.

Heuristic Rating 1-5

Efficiency/Functionality – Following basic rules will keep user frustration to a minimum.

Website loads quickly 4

Proper etiquette for links off site 5

Contact information is easy to find 5

Results from this Heuristic Inspection are more than enough to conclude that our website

is easy to navigate and efficiency and functionality levels are satisfying.

Note: Results ratings are summarized.

Consistent Navigation 5

Easy to identify your location on the site

(breadcrumbs, headers, colors)

4

Consistent way to return Home 5

Limited number of buttons & links 5

Organization of information makes sense 5


Conclusion

From ideation through deep research, surveys, user tests, creation and development our

team went through the whole process of solving the case assignment aiming to reach its

goal and to find the best solution for the formulated problem. Reaching the ending point

we found out that the prototype we built is a permanent solution for developing our

artist’s online presence because digital world and media is rapidly changing and what is

a good working tool today maybe will be outdated and not enough tomorrow. As

multimedia designers we used different tools and approaches we have learnt our first

year at KEA to develop the presented prototype as a competitive and useful platform

for the artist. Covering the four core areas important for multimedia design, we were led

by user centered design, cause no matter how good the artist, her work or her website

is, when user is taken for granted.


Reference

1. https://www.agora-gallery.com/advice/blog/2016/08/25/promote-your-art/

2. http://rightbrainrockstar.com/general-advice/16-things-you-can-do-today-to-

get-your-artwork-noticed/

3. https://www.w3schools.com/howto/howto_css_dropdown.asp

4. https://www.w3schools.com/howto/howto_js_accordion.asp

Design inspiration

5. https://www.maria-black.com/en/eu/

6. https://www.sifjakobs.com/

7. https://www.carrejewellery.com/

8. https://www.applify.co/

9. http://bodytoburn.com.au/

Potential competitors:

Danish artists

10. https://www.olelynggaard.com/en/collections-dashboard/

11. http://www.shamballajewels.com/

12. http://www.hartmanns.com/

13. https://annilu.dk/collections/all

14. https://www.maria-black.com/en/eu/bracelets

15. http://sophiebillebrahe.com/boutique

Danish websites

16. https://koloursjewelry.com/about/

17. https://www.chanti.dk/m-krystal

18. https://www.glamira.dk/swarovski-krystal/

19. https://www.voselle.dk/ovrige/krystalsmykker

20. http://phertz.dk/smykker/

21. https://www.carre.dk/

Known shops from Copenhagen

22. https://aveny.dk/home.php

23. http://www.pandora.net/da-dk

https://www.agora-gallery.com/advice/blog/2016/08/25/promote-your-art/



https://www.w3schools.com/howto/howto_css_dropdown.asp

https://www.w3schools.com/howto/howto_js_accordion.asp

https://www.maria-black.com/en/eu/

https://www.sifjakobs.com/

https://www.carrejewellery.com/

https://www.applify.co/

http://bodytoburn.com.au/

https://www.olelynggaard.com/en/collections-dashboard/

http://www.shamballajewels.com/

http://www.hartmanns.com/

https://annilu.dk/collections/all

https://www.maria-black.com/en/eu/bracelets

http://sophiebillebrahe.com/boutique

https://koloursjewelry.com/about/

https://www.chanti.dk/m-krystal

https://www.glamira.dk/swarovski-krystal/

https://www.voselle.dk/ovrige/krystalsmykker

http://phertz.dk/smykker/

https://www.carre.dk/

https://aveny.dk/home.php

http://www.pandora.net/da-dk


Appendix

Sketches


Mood board


Wireframes

Wireframes for mobile version:


Wireframe for the desktop version:


Mock ups


Design examples

Carre jewelry


Sif Jakobs jewelry

Maria Black


Design manual

Logo

Our client’s logo is a very important element of her visual identity. When used correctly,

it will make her brand stronger and more identifiable by her clients.

[A]

[B]

[C]


Logo [A] is the preferred and primary logo. It must be used whenever possible.

When the logo color is reversed [B], it can be used on same colored backgrounds as

logo [A].

A monotone black and white logo [C] is available for use when a second ink color is

not available.

Incorrect use of logo

To maintain IriJewellery’s brand unique in the customer’s mind, it is important that the

logo be used correctly and consistently. Its integrity must never be compromised.

The following examples show how not to use the logo:

Do not change the font of the logo.

Do not place the logo on top of a noisy or multicolored back-


ground. The logo should always appear as clear as possible.

Do not change the color of the logo.

Do not use the logo without its Diamant element.

Colors

The essential of a building of strong and unique visual identity are the colors and their

consistent use.

HEX and RGB:

Used for digital applications

CMYK:

Used for printing and digital printing


Typography

Iri Jewellery website has three main fonts:

Vivaldi Italic for the logo:

Roboto Light for the text of the website:

Freestyle Script font is used the accent for a title of the products or quote


Test results

Survey


BERT

BERT Goal

BERT 1 Mock Up


BERT 2 Mock up

Final BERT


WordPress guide

1) Login to WordPress

2) Press on the “Posts” icon


3) Create a new post

4) Put the content in the text field


5) Put an image in featured field

6) Fill in custom fields


7) Add category and tags

8) Publish it

Done!

Exam Report - zlatkarizova.comzlatkarizova.com/images/exam-report-final.pdf · Team GGHZ: Team...

Documents

Transcript of Exam Report - zlatkarizova.comzlatkarizova.com/images/exam-report-final.pdf · Team GGHZ: Team...