Essay: Bellacci, Website Redesign

For the final 4th semester exam project we had to find and contact a company. I chose to work with Bellacci, a popular hair salon in the city center of Odense.
Having a user friendly website is very important1. The use of mobile devices, such as smartphones and tablets are increasing drastically each year. Therefore taking a closer look2 at responsive web design is important. Further study on Bellaccis current website 1 (http://www.vmdoh.com/ blog/importance-user-friendly-website-design ) 2 (http://www.smartinsights.com/mobile-marketing/ mobile-marketing-analytics/mobile-marketing-statistics/)
INTRODUCTION
would be optimal. (link) I will do a Redesign of Bellaccis current website. The purpose of the project is to create design that will meet the needs of Bellacci as well as the target audience. The website has to represent Bellaccis work and values.
The main problem will be solved in this report using various analysis, models and research methods.
The problem definition on the following page was made based on information executed from quantitative research that is explained on page 3.3
3 Appendix 6
2
How do I create a better and functional web design solution for Bellacci?
How do I reach the right target audience?
How can I improve the overall visual web design?
PROBLEM DEFINITION
3
The first step in order to define the problem on Bellaccis website a few online tests were done.
Online broken links checker The first step was to check the website for broken links. By typing Bellaccis website URL into www. brokenlinkcheck.com, it would give me a list over broken links. The result: Out of the websites 8 pages,3 broken links were found.
Browser/device testing The website was tested on various browsers and devices. The result: The website is non responsive.
Speed test1 A speed test of the website was done using GTmetrix page speed tool2. The result: The load time of the website is 3.2 seconds. It is recommended to a loading time of 2 seconds or less. If loading time 1 (Appendix 7) 2 (29/4-2015 ,https://GTmetrix.com/)
PROBLEM DESCRIPTION
takes to long there is a chance that the user will leave the website and/or page.3
Validation of code The last website test was to validate it. It was validaded via. W3schools4The result: 21 HTML errors was found.
By analysis the website using these online websites/tools a list of current issues is created. I will now be able to start the next part of the project which is time and method planning.
3 (10/7-2015, https://blog.kissmetrics.com/speed-is-a-killer/) 4 (1/5-2015, https://validator.w3.org/)
4
Desk research: 1I used desk research to do various searches online, gathering information about the target audience.
Field research2: Collecting information from individual interviews (user test)
Surveys/Questionaires: In order to learn more about the target audience I will use survey/questionaire.
Persona:3 A fictional person created based on the information from the target audience.
GANTT4: I am using GANTT chart to structure the different work tasks within this project and to understand the tasks relationships.
Mini-risk:5 Mini risk is used to identify and manage the possible risks in the project. The purpose is to create awareness on possible obstacles and problems so I can prevent it from happening.
1 http://www.marketingdonut.co.uk/marketing/market-research/market-analysis/introduction-to-desk-research 2 Field research, http://libweb.surrey.ac.uk/library/skills/ Introduction%20to%20Research%20and%20Managing%20Information%20Leicester/page_54.htm, 9/05/15 3 Defining a persona, http://www.smashingmagazine. com/2014/08/13/a-closer-look-at-personas-part-2/ 4 GANTT, http://www.teamgantt.com, 30/04-2015 5 http://www.pmhut.com/managing-project-risks
Target group1: Identifying the taget audience will provide me with information. This is a important and usefull step in the research process.
Styletile:2 I used the styletile to showcase the choice of fonts and general design theme on the website.
Business Canvas Model3: I am using this template to get a visual overview over the company by describing the 9 important elements of a business model.
Moodboard4: I created a mood board to show a visual direction for the project.
1 Target group, http://www.entrepreneur.com/encyclopedia/target-market, 10/05-15 2 Styletile, http://styletil.es/, 14/05-15 3 Business Canvas Model, http://www.forbes.com/sites/ tedgreenwald/2012/01/31/%20business-model-canvas-a-simple-tool-for-designing-innovative-business-models/ , 15/05-15 4 Moodboard, http://everydaydesigner.net/design/ why-moodboard, 14/05-15
METHODS
5
Wireframe:1 Is used to show the basic elements on the website.
Visual research2: I used visual reaearch methods in the design process: sketching and photography.
CRAP analysis:3 C.R.A.P is used for analyzing the contrast, repitition, alignment and proximity on the website.
Sitemap4: This will create an overview over the old and new website.
1 Wireframe, http://www.infragistics.com/community/ blogs/gradientgirl/archive/2013/09/10/what-is-a-wireframeand-why-are-they-useful.aspx, 19/05-2015 2 Visual research, http://srmo.sagepub.com/view/ sage-hdbk-visual-research-methods/n8.xml, 19/05-2015 3 C.R.A.P, http://blog.teamtreehouse.com/how-crap-isyour-site-design, 23/05-2015 4 Sitemap, https://blog.kissmetrics.com/build-a-sitemap/, 17/05-2015
Sketching: I used sketching to illustrate basic layout and structure of the website.
Design principles: By looking at the design principles, I can analyse the design of the current and the new website.
SWOT1: By using this planning tool I am able to learn about Bellaccis strengths, weaknesses, opportunities and threats
TOWS2: Using the information from the SWOT analysis in the TOWS matrix to explore different strategies for Bellacci.
Mockup3: I will create a mockup to illustrate a detailed and realistic draft of the new website. using Adobe Photoshop
7 p’s Marketing mix: The marketing mix will give me an overview over Bellacci as a brand. How they work as a company, how Bellacci is communicating and with whom. Communications plan: ‘
1 http://www.mindtools.com/pages/article/newTMC_05.htm 2 http://www.mindtools.com/pages/article/newSTR_89.htm 3 Mockup, http://www.creativebloq.com/ux/3way-create-website-mockups-11513936, 20/05-2015
HTML5/CSS3: The website will be made using HTML5 and CSS3.
Starframe analysis: 4The new website will be analysed using this analysis.
4 Designing new media, Heidi Philipsen, Lise Agerb��k, & Bo Kampmann Walther, 2010
6
7
CLIENT DESCRIPTION: BELLACCI FRIZISTO
Bellacci is a hair salon located on Vestergade, in the heart of Odense. They opened the salon in Vesterbro, Odense in March 1999. After a few years they had to relocate because of the customer growth that was increased gradually. They moved to a new and larger location in the city center: Vestergade 201 on the city promenade in Odense in 2004. Bellacci have the same location today. They have 5 employees in the salon including Rico, the owner and founder of Bellacci. The hair dressers have years of experience with hair care through education and/ or courses.
In the salons 240 m2 you will find an open coffee bar where
the customer can sit and enjoy a latte or a cappuccino. The customers can also sit and enjoy their coffee in the lounge area. The salon has an overall relaxed, fun and positive vibe. To the left of the salon entrance, you will meet the hair care shopping space area where you can find professional hair care products.
Inside and outside the salon you will notice the black and white theme. The exterior design is black with a high contrast picture of Rico, the owner of Bellacci. As you step inside of the salon the first thing you will notice is the bright and simple interior design decorated with green plants and flowers. The black and white theme is also reflected on the salon furniture’s.
Bellacci appreciate good communication between the hair salons employees and the customers. The purpose is to make the atmosphere in the salon comfortable and layed back, making room for everyone regardless background and age. The employees work hard, offering professional advice with the purpose of highlighting individuality in each customer. As a result of Bellaccis professional work and good communication towards the individual customer, the customer will feel good and satisfied after spending time in the salon. The company values good communication amongst everyone and a good atmosphere which they believe will create the best experience in the salon. It is not only about
hair but about the overall experience.
Customers can book an appointment through Bellaccis website, by calling or by personal appearance 1Bellacci has a ‘reminder’ service available for the customers. An email will be send out one day before the appointment and a SMS will be send to the customer one hour before to remind them of the appointment.
8
Bellacci Team (Image): http://www.bellacci.dk/HJEM.aspx
9
I made a Mini risk analysis to create awareness over the possible risks within this project. It is important to foresee and predict as many possible obstacles and problems from the start, so it can be avoided. Being well prepared and planning was especially important for me, when working solo on this project.
If I get stuck on an issue, I do not have group mates to help me – Lack of support (support you usually get from your group mates) is one of the main challenges I will have working alone.
Requirement specifications ?
PROJECT MANAGEMENT
10
Project Planning To stay organized through out the entire project and to be aware of the deadline, I planned and organized the project using a GANTT chart1. This chart shows the different tasks within the project.
1 (Appendix 3)
11
SWOT
Beneficial Harmful
Internal
Strenghts
1. High traffic location (On the city promenade). 2. 20% Student discount. 3. Well trained team/employees. 4. Salon associated with quality work and good interior design. 5. Attracts people from all around the country. 6. Good ranking on Google. 7. A wide range of services offered
Weaknesses
1. Outdated website / design. 2. ‘Slow’ activity on Bellaccis social media accounts (Facebook and Instagram). 3. No parking available for customers.
External
Opportunities
1. Update website. 2. Engagement with the customers (via. competitions on social media). 3. Introducing new hair care product 4. YouTube tutorials 5. Marketing on regional or local television stations.
Threats
1. Competition from new and/or already established hair salons.
I will be taking a closer look at Bellacci by identifying and analyzing the strengths, weaknesses, opportunities and threats. As a result of SWOT, I will create an overview over the internal and external factors within the company.
12
S.W.O.T Strengths 1. High traffic location (On the city promenade). Bellacci hair salon is located on Vestergade in the center of Odense, on the promenade surrounded by various stores, restaurants and caf��s. The promenade is pretty crowded and busy during the stores opening hours (10AM17PM) and because of the surrounding stores this street is a high traffic location. (link til Odense by informationer)
2. 20% Student discount. Bellacci offers a 20% discount to student’s regardless service.
3. Well trained team/employees.1 Bellacci has a well-trained team of six including the salon owner Rico. All six with a hair dresser education and/or job experience in the field of professional hair care.
4. Salon associated with quality work and good interior design. 1 http://www.bellacci.dk/HJEM. aspx
5. Attracts people from all around the country. Rico, the owner of Bellacci, confirmed that some of his loyal customers travel from Copenhagen and other cities in Denmark for an appointment in Bellaccis hair salon. According to the store owner Rico, the majority of the costumers is Loyal customers that has been coming to the salon for years.2
6. Good ranking on Google.3 Bellaccis have a highly ranked on Google. By searching for key words like ‘Fris��r Odense’ Bellacci is the first hair salon to appear.
7. A wide range of services offered.4 Bellacci offers a wide range of different services for women and men in all ages. They also sell retail products in the salon.
Weaknesses 1. Outdated website /design.5 The website (including the design) is outdated. It was concluded based on research and analyzing tools executed online. It included testing the website for broken links, testing the website in
2 (Appendix 9) 3 (Appendix 10) 4 (Appendix 8) 5 (Appendix 6)
different browsers, SEO test and research, speed test and a validation of the website via. W3school.
2. No activity on Bellaccis Instagram. They currently have 103 followers on Instagram6.
3. No parking available for customers. Bellacci does not offer parking spots for the customers but the customers are able to find parking lots in the city center. (links to odense parkeringspladser)
Opportunities 1. Update website Expand service by optimizing the website making it easier, faster and better for the client to navigate on the website regardless of the client’s choice of device. It would be a good idea to take a closer look on the current website design by taking a look on the design principles and analyzing it.
2. Engagement with the customers (via. competitions on social
6 https://instagram.com/bellaccifrizisto/
13
media). Another idea would be to do competitions on Bellaccis social Medias. Making the customers engage via. a contest creating an efficient customer engagement on Bellaccis Facebook and Instagram as a result.
3. Introducing new hair care product Introducing new product brands and lines in the salon could be an opportunity, taking in consideration that they already sell products from various hair care companies.
4. YouTube tutorials Creating a YouTube account with YouTube hair tutorials could be another way of adding to the customer relationship by giving them the extra service, tutorials they can watch from home.
5. Marketing on regional or local television stations. Creating a promotion campaign could be a way to engage with people who may not know about Bellaccis existence.
Threats 2. Competition from new and/or already established hair salons. A big threat for Bellacci is the competi
tors. It could also be if a hair salon opened or expanded within a close distance of Bellaccis hair salon.
Sub-Conclusion: As a result of the SWOT analysis, internal and external factors were analyzed and identified. With the information executed from the SWOT analysis, the next step will be taking the information and put it in a TOWS matrix to find possible strategies for Bellacci.
14
TOWS
Strengths Weaknesses
Opportunities
Strengths-Opportunities ‘ Bellacci should take advantage of the high trafficated location by creating a promotion campaign in the city center (with the store employees) with focus on promoting the student discount, the social media accounts and the website.
Weaknesses-Opportunities ‘ Making sure that the website matches the hair salons interior design and theme in order for the customer to get the same feel, the sense of the hair salon reflected on the website through the design. ‘ Create an improved and functional website for Bellacci. A website with easy access to the social media accounts, so the costumer can get easy access to information and be updated if the hair salon has new products, news or a competition.
Threats
Strengths-Threats ‘ Stay updated and on the lookout for other competitors. ‘ Have the best communication possible with the target audience. Doing questionnaires in the hair salon to stay updated about the customer’s needs and thoughts.
Weaknesses-Threats ‘ Bellacci’s ‘outdated’ website and the slow interaction with the two social media accounts (especially Instagram) creates a huge benefit for the competitors. If the competitors spot the weakness, they can outrun Bellacci on social media and gain popularity and possibly (slowly) take some of Bellaccis costumers.
The information retrieved from the SWOT analysis, will be put in to a TOWS matrix in order to find the best suitable strategies for Bellacci.
Sub-Conclusion: By adding the information from SWOT into a TOWS matrix, a possible strategy (+ more) has been created. These strategies will help adding to improvements to Bellaccis situation.
15
16
BUSINESS CANVAS MODEL
Business canvas model, (Appendix 5)
17
The business canvas model will look into which business model Bellacci is currently using.This model will give me a visual overview over the company. A overview over 9 important elements: Key partners, Key activities, Value proposition, Customer relationship, Customer segment, Key resource, channels, cost structure, revenue stream.
Bellacci relies on their current location, the loyal costumers, the team in the store as well as promoting the salon. By focusing on promotion they will be able to grow gradually.
Key partners: International haircare brands – K��rastase – RedKen – GHD – BaByliss – Moser
Media companies – Website
Key activities: Professional service – Styling – Color
Value proposition: Performance – Professional educated staff Customization Brand/status Accessibility – The salon is located in the heart of Odense. – Their website – http://www.bellacci.dk (good SEO)
Customer relationship: Dedicated Personal Assistance Impersonal – Online (www.Bellacci.dk) Loyal
Customer segment: Segmented market – Odense/Funen – Consumers
Key resource: Human/physical contact Team approach – The staff work as a team Store/salon Customers
Channels:
Store Website – http://www.bellacci.dk Social media channels – Facebook – Instagram
Cost structure: Rent and utilities Value driven – Focus on value creation, premium value proposition Website – Server, domain Salaries – Staff: Salon manager, hairstylists, junior hairstylists (students) Salon equipment and supplies – Salon equipment (chairs, mirrors etc) – Salon supplies (Shampoo, conditioner, hair coloring products etc.)
Revenue stream: Fixed pricing – Product feature depents Client purchasing a product/service – Appointment – Product (in salon)
18
Med et business canvas76 kan vi danne os et overblik over konceptet som helhed, samt fastl��gge hvilke indflydelser der p��virker b��de projektet og virksomheden. leog en klar plan for klientens markedsf��ring, har vi nu et overblik over konceptet som helhed. Med en klar formulering af det overordnede budskabs udformning og struktur, kan vi nu begynde at udvikle den visuelle identitet for klienten.
19
Product: Professional hair care (B2C) – Offering haircut, styling, color and selling hair products.
Price: The price is individual ‘ Every hair cut/color/styling is different depending on the individual customers need and hair length. There is no standard prize, every solution is customized for the individual customer. The product they sell in the store has standard prizes but it also various depending on what brand it is and which product it is.
Promotion: – Website (www.Bellacci.dk). – Seminars.
7 P’S MARKETING MIX – Social media: Facebook1 and Instagram2 (promoting #bellacciklip on social media) – Word of mouth.
Place: Bellacci is a 240 m2 Hair salon located in Vestergade 102, 5000 Odense C.
Physical evidence: – The salon. – Business cards.
People: Bellacci has 5 properly trained employees in the hair salon. The founder of Bellacci, Rico. 3 hair dressers and 2 hairdresser students.
Process: The process would be a customer contacting the hair salon regarding getting an appointment: They can 1 Facebook, https://www.facebook.com/BellacciFrizisto 2 https://instagram.com/bellaccifrizisto/
______ Image: http://www.professionalacademy.com/ media/images/7Ps-Marketing1.jpg, 25/05-2015
do that online and offline. Time is put off for each customer. During the appointment the hair stylist and the customer will talk about the needs and expectations and agree on a customized solution. The hair stylist will continuously inform the customer when working on the hair. The customer pays for the ‘product’ when it is done.
The marketing mix will give me an overview over Bellacci as a brand. How they work as a company, how they communicate and with whom.
20
Process Place
Price Promotion
Physical enviroment
People
Product
_________ Product (hairdresser) image: http://freedesignfile.com/upload/2012/09/Hairdresser-beauty-salon-vector-4.jpg, 26/05-2015
Cash register image: http://www.clker.com/cliparts/b/8/7/c/ 1287719215923712413cash%20register-md.png ,26/05-2015
21
TARGET AUDIENCE The first step in defining the target audience was to gather as much information, I did that by using qualitative and qualitative research. This is an important step in the research process in order to create a product based on the target audiences’ needs as well as the needs from the client. The process of defining the user is explained in 4 steps as you can see below.
Step 1: Meeting with Bellacci. 1The first step was to talk to Bellacci about their target audience. The store manager agreed on a meeting and I prepared questions. When talking to Rico the store manager, he was very clear about his client. The main target audience is in the age between 35-50.
Step 2: Questionnaire2 Bellaccis customers, I made a 1 Appendix 1, Pictures from Bellacci meeting 2 Appendix 2, Questionaire via. Google Drive, 11/05/2015
questionnaire aimed at people in the age of 35-50. The purpose was to learn more about Bellaccis customers.
Step 3: The Target audience This info is based on a questionnaire containing 13 questions, answered by 302 people. The target group is located in the center of Funen, 35-40 years old. They use Google to find information on a hair salon. They always visit the hair salons website before booking an appointment. Easy access to contact information is important. When booking an appointment they prefer to call the hair salon. They use a windows computer and a Apple smartphone. When it comes to Social media they spend most of their time on Facebook and a little bit on Instagram. Most of them get an appointment at a hair salon once every second week to get a haircut. Good service is the most important thing for the costumer when going to get hair done.
Sub-conclusion: Based on the information on the target audience, I will create a primary and a secondary persona. Two fictional people that represents different parts of the target group. The product will
be created for the persona.
22
Name: Nina Gender: Woman Age: 35 Location: Odense Education: High school degree
Bio: Nina is working a fulltime job in Odense. She likes technology and mostly spend her time after work in front of the television watching her favorite TV show or movie. She likes spending time on social medias like Facebook and Instagram.
She is single and not dating anyone due to her busy schedule. She enjoys going to the hair salon and try to do it as often as possible to get her roots highlighted and a haircut.
Nina values a hair salon who can offer her a proffesionel experience. She always get an appointment at her local hair salon. She is a loyal costumer and has been for years.
When getting an appointment for a hair
PRIMARY PERSONA
cut she books an appointment online, for other requests she calls the salon.
She expects good service from the hair stylists. Bellacci can offer her a good layed back experience in the salon with good service.
______ Image: http://thsproduction.s3.amazonaws.com/ upload/cache/03/21/03217b9b2da391194cc580a67f3dd1ef.jpg, 22/05-2015
23
Name: Frederik Gender: Man Age: 50 Location: Center of Funen Education background: BA degree
Bio: Frederik is hard working man from Odense, Denmark. He does not spend a lot of time with his hair but because of his busy schedule he likes to get a hair cut when needed. He gets his hair cut once every second month.
Frederik is not a big fan of technology and tries to avoid it as much as he can. When he want and needs an appointment to get his hair cut, he calls the salon to arrange an appointment.
Frederik values a hair salon who can offer him a proffesionel hair cut. He expect a nice experience getting it done. He does not mind getting his hair cut in new hair salons once in a while but he does appre
SECONDARY PERSONA
ciate the ones located relatively close to his home in Odense.
Bellacci can offer him a proffesionel experience as well as a good, fun and layed back environment in the salon.
________ Image: http://media.spokesman.com/photos/2010/07/19/19_demeerleer.jpg, 22/05-2015
24
The purpose of this plan is to make sure that Bellaccis website is gonna stay updated and maintained. It is important that they have an attractive website that appeals to the target audience. By looking at how popular Bellaccis competitors are online compared to Bellacci. It will provide me with information about how strong Bellacci is.
Competitors Based on the search result for ‘Fris��r Odense’, I got an overview over Bellaccis competitors in Odense. This information on the competitors are based on search results on Google1 and the popularity on social media.
Bellacci is number 1 in the search result. Below is the list in the correct order: 1. Bellacci Frisizto 2. Haircode2 3. Barner Coiffure3 4. Idendity hair4
1 http://www.Google.com 2 http://www.haircode.dk/ 3 http://www.barnercoiffure.dk/ 4 http://www.identityhair.dk/main/index.php
COMMUNICATION PLAN
Choice of media Website and social media. The website links the user to Bellaccis Facebook account and Instagram account and vice versa. It is especially important with the Facebook account, that is the social media channel that the target audience prefer and use the most1. Activity on the social media accounts is needed as well as a improved and funcitonal website.
1 Social media statistic: Appendix 2.
25
Bellacci Frizisto
Facebook likes: 1,516 Facebook review: 5,8 of 5 stars. (based on 72 reviews)
Instagram followers: 97
Barner coiffure
Facebook likes: 702 Facebook review: 4.9 of 5 stars. (based on 14 reviews)
Instagram followers: (No instagram account)
Bellaccis competitors do not use Instagram to promote their brand. There is a clear difference when it comes to the Facebook likes where Bellacci is in the top. The competitors are not on Instagram. Bellacci is stronger on the social media.
Haircode
Facebook likes: 625 Facebook review: 4.6 of 5 stars. (based on 61 reviews)
Instagram followers: (No instagram account)
Identity hair
Facebook likes: 808 Facebook review: 4.7 of 5 stars. (based on 28 reviews)
Instagram followers: (No instagram account)
26
DESIGN PROCESS In this chapter I will get into different aspects of the design process. The information in this chapter is based on quantitative and qualitative research, brainstorming and sketching. I will get into the design process, step by step and explain the design choices that were made along the way.
27
In this chapter I will get into different aspects of the design process. The information in this chapter is based on quantitative and qualitative research, brainstorming and sketching. I will get into the design process, step by step and explain the design choices that were made along the way.
To get started with the visual process, the first step was to capture the feel of Bellacci by taking pictures of the hair salon interior and exterior design, to document the feel of the place and to use it later on in the project. I did a qualitative research by having a meeting with the owner of Bellacci, Rico1. The purpose of the meeting was to get useful information to start the design research process with. Becoming informed about Bellaccis values and target audience.
The following part of the chapter will show further development.
1 (Appendix 9)
VISUAL RESEARCH
28
In order to create a good user experience and improved web design, I used the C.R.A.P analysis to analyse the current website. I chose to focus on the DON’Ts of Bellaccis current web design because it has a lot of flaws. This will give me guidelines and focus point for the new design.
Contrast: The footer contains poor contrast. The background color is dark grey while the text is a lighter grey. The elements are too similar. In order for the text to stand out, a stronger contrast needs to be added to the text and background. The (black) logo which is located in the footer and in
the navigation bar, becomes a part of the background because of the similarity with the colors.
Repetition: On page ‘Bellacci’ and ‘kontakt’ you will see the same exact image slideshow. There is no obvious purpose with the slideshow being located on the ‘Kontakt’ page. It is unnecessary and unimportant.
Alignment: On the page ‘kontakt’ you will see left and right alignment. This creates confusion for the eye. The two bottom pictures are completely disconnected from the other elements on the page. The use of left and right alignment creates confusion and a unballanced overall web design. It can be seen in the footer as well: The social media buttons being left-aligned and the logo, address and phone nr., being right aligned.
Proximity: The video located in the bottom of each page is so unconnected from the rest of the website elements. Fixing the width, making the video wider (bigger size) would change it a bit but the location of the video is making the video unseen and unimportant.
By looking at the current web design using C.R.A.P analysis, i now have an overview over the main visual issues. This will help add value to the new web design. As a result of this analysis, guidelines were created and I now have an overview over things that will be avoided, in the new design.
C.R.A.P ANALYSIS: CURRENT WEBDESIGN
29
INSPIRATION
30
31
PROBLEM DESCRIPTION
I created this list after going through every link, and every page of the website. http://www.Bellacci.dk. The list is flaws or just elements that need to either be removed or updated.
1. There is no Fav Icon on the current website. 2. The web design is not responsive. 3. Hover sound effect on the buttons (In the nav bar). 4. Video on the bottom of each page start playing automaticly when entering the website. 5. Dysfunctional links on the page ‘Produkter). 6. A useless page (Aktiv). It has no content.. 7. No opening hours info on the front page. 8. The web design is outdated. 9. Poor design decisions: – Contrast – Alignment 10. Small play button in top right corner for music. (It is optional) 11. They still have the OLD logo on the website.1 1 _________ List, Appendix 4, 24/05-2015 Image: http://www.Bellacci.dk, 24/05-2015
32
Based on the visual research, a moodboard was created. A moodboard was created to express/explains the concept and style in shapes, colors and images. The moodboard is based on an informational meeting/Q&A with with Rico (link til m��de notater), related to the visual research. Rico gave me keywords to explain Bellacci. It was keywords like: ‘black and white’, ‘happy vibe/mood’, ‘relaxed atmosphere’, ‘satisfied customers’, ‘minimalistic design’. Next step was to use a quantitative research method to find and collect images that symbolize the keywords mentioned above as well as images from Bellaccis interior design.
The moodboard expresses the general vibe in the salon: A scenario with happy customers getting their hair done in a polished and minimalistic salon with a nice and relaxed atmosphere. Based on the moodboard, the next step is to create a styletile, to specify the design details.
MOODBOARD
33
To specify a more detailed vision of the design, a styletile is needed. I am gonna use a styletile to define how the website will appear via a color scheme, fonts and website elements. The styletile below is very minimalistic and centered. As you can tell, the styletile is a bit more detailed.
. It is a ‘prototype’ of the proposed visual solution for the Client.
Color scheme
The color scheme is minimalistic with a black and white inspired theme. The chosen colors for the website is White (#fff) Gray (#575757) Black (#151515) and light blue (#46b3ca). The colors was chosen based on the meeting with Rico as mentioned in the visual research part. As I did more research, I quickly learned that black and white not only goes well with Bellaccis logo (Link til logo) which also is in black and white but it is very common to stick with a limited color scheme, to use black and white when creating simple and minimalistic design as I concluded in the
STYLETILE
34
inspiration part of this chapter. (link to page in report) A quantitative research was done before choosing a font for the website. (‘web safe fonts’ ‘Analyze of the new website: Typography’). The Sans-Serif font Verdana was chosen to be the font on the website. It is
Sans serif because it is more
Typeface Sans-serif Font-family: Verdana, Geneva, Sans-serif Font: Verdana Font weight: regular and bold
The result of a style tile is a clear overview over the visual choices for the website. It creates a clear vision of how the website is going to communicate visually. It is a step closer in the process, identifying and creating the best design solution for Bellacci.
(link til styletile forklaring)
35
DESIGN PRINCIPLES The next step was a walk through the design principles. The purpose is to explain the design decisions for the new website and why it was chosen.
The Typography/fonts for the new website is Verdana, geneva, Sans-serif. The reason is because these fonts are Web safe which meens the font will look very much the same no matter what browser or system you are using.
The color scheme is mostly black and white. White (#fff), Dark grey (#575757) and (#151515).
A blue color (#46b3ca ) was added to the navigation (hover text and dropdown). The blue color is used to add focus to the ‘booking’ button. These represent simplicity and it gives the new website a clean and proffesional look. The black and white scheme goes well with Bellaccis logo as well.
In order to create a simple, classic and minimal design on the new website, a maximum contrast needed to be added. The white background and black text perfecly highlight the text. The contrast and the choice of fonts creates a good readability1 on the website making it easy for the customer to read about the various informa1 Good readability, http://blog.usabilla.
tion on Bellaccis website fast and easy.
The layout is symmetrical all through the website. Keeping all the elements balanced and conbined by using the right amount of white space, just a little bit around each element. Mostly around the elements located in the center of the website: below the image banner and above the footer.
The important elements are located in the top of the website. Creating a Hierarchy were the user should be more aware of the ‘Book online’ button in the top of
36
the page rather then the social media buttons in the bottom of the page. One of the important tasks for the user when visiting the website is to book an appointment, so it is important that the book online button (in the navigation bar and the sidebar) is visible and easy to find. The navigation bar is simple and userfriendly.
The new web design creates awareness on the important elements so the user will have an easy time finding the book online function and the nessecary information about the hair salon, the emploees and the links to social media buttons. The reason that the facebook plugin is located below the Vimeo video is because Facebook is the most popular social me
dia channel prefered by the target audience is Facebook. Instagram is not a prefered social media channel but it is being used by the target audience as the second prefered social media channel, that is why the link to Bellaccis Instagram account is located in the footer.
The overall design is a simple and minimalistic making it easy for the user to navigate around the page.
37
WEBSITE STRUCTURE In order to create a improved website acitecture, minor changes were made. I decided to delete the page ‘Aktuelt’ because the page had no content. When I had the meeting with Rico, the hair salons manager, i asked him about the page and he had some ideas for the page but it was not something that would be implemented in the near future and therefor not relevant (for now). Based on that info I decided to delete the page.
Another decision that were made was so put the content from the ‘Konceptet’ page and relocate it into the page ‘Bellacci’. The page ‘Bellacci’ contains information and the history of Bellacci and that is why I chose to relocate the information.
Sitemap: Before
Sitemap: After
In the new sitemap you will see the page ‘Produkter’ moved as a drop down connected to ‘Bellacci’. The ‘produkt’ page is not that important to highlight: The purpose of the website is for people to get to know more about Bellacci and book an appointment.
Even though the original navigation bar is somewhat simple, it was a little mess. The new navigation system is more simple and it highlights the most important elements for the customer to see.
38
Brugsm��nsterdiagram Her fastl��gges brugernes handlingm��nstre, n��r de f��rdes p�� websiden. Igennem diagrammer103 kan vi ogs�� fastl��gge baggrund for anvendelse. Privathttps://s.w.org/about/ images/logos/wordpress-logo-notext-rgb.png, 23/05-15
I created a theme in wordpress using HTML5, CSS3 and PHP.
I used Google web fonts,1 it is fast to load (because it is via. Googles server) By loading the font via Google web fonts we are insured a uniform appearance I dediced to use font awesome 2for the The social media buttons is a icon font called font awesome.
The website theme is Responsive. It have been build to support desktop, tablet and mobile which ensure a streamline experience across all platforms.
One of the main reason I decided
1 https://www.google.com/fonts 2 http://fortawesome.github.io/ Font-Awesome/
to use wordpress, is because of the freedom to create dynamic content. You can do this by using the wordpress’ build in content management features. Refarding the actual theme I have been taking advantage of wordpress’ dynamic integration of various hooks. These insure easy adoption of new functionality in the theme which makes future upgrades fast and effecient. An example of this could be the inclusion of stylesheets, where i haven’t included them directly in the HTML but instead I included them using the functions.php file which is a theme controller file and it takes care of the structure of the theme.
43
According to the previous text I included the following code. Which shows how i included each stylesheet using the wp_enqueue_style WordPress function. This function ultimaticly load the stylesheets into the theme in the header. By using simple PHP tags I can specify in which order the stylesheet should be loaded for an ex
ample, FontAwesome requires reset to be loaded before it can be loaded itself, it is shown on line 7 which you can see in the written array. To include these styles, on line 5-10 I added a new action on line 12 which runs the actual function from line 3-11 and implementet it directly into the WordPress runtime.
44
blabla….RESPONSIVE WEBSITE
45
The goal was to create better functional web design for Bellacci. Doing research on Bellaccis target audience by talking to the owner of Bellacci and doing a questionaire anwsered by 317 people in the target group. This project was about creating a website that are appealing to the target audience as well as pleasing the needs of Bellacci, keeping their overall simple design and creating design that goes well with the logo. The website is now up to date and functional making the user experience for the target audience good and flexible by including responsive web design and wordpress. !!! The goal was to create better functional web design for Bellacci. Doing research on Bellaccis target audience by talking to the owner of Bellacci and doing a questionaire anwsered by 317 people in the target group. This project was about creating a website that are appealing to the target audience as well as pleasing the needs of Bellacci, keeping their overall simple design and creating design that goes well with the logo. The website is now up to date and functional making the user experience for the target audience good and flexible by including responsive web design and wordpress. CONCLUSION
46
Website links: GANTT, http://www.teamgantt.com, 30/04-2015
Teacher powerpoint ‘Dag-2-Risiko_Kvalitet_kravsspecificationer’, appendix 1 & http://www.pmhut.com/managing-project-risks
Thinking aloud, http://www.nngroup.com/articles/thinking-aloud-the-1-usability-tool/, 22/05-15
Desk research, http://www.marketingdonut.co.uk/marketing/market-research/market-analysis/introduction-to-desk-research
Field research, http://libweb.surrey.ac.uk/library/skills/Introduction%20to%20Research%20and%20Managing%20Information%20 Leicester/page_54.htm, 9/05/15
Defining a persona, http://www.smashingmagazine.com/2014/08/13/a-closer-look-at-personas-part-2/
Target group, http://www.entrepreneur.com/encyclopedia/target-market, 10/05-15
Styletile, http://styletil.es/, 14/05-15
Business Canvas Model, http://www.forbes.com/sites/tedgreenwald/2012/01/31/%20business-model-canvas-a-simple-tool-for-designing-innovative-business-models/ , 15/05-15
Moodboard, http://everydaydesigner.net/design/why-moodboard, 14/05-15 Wireframe, http://www.infragistics.com/community/blogs/gradientgirl/archive/2013/09/10/what-is-a-wireframe-and-why-are-they-useful.aspx, 19/05-2015 Visual research, http://srmo.sagepub.com/view/sage-hdbk-visual-research-methods/n8.xml, 19/05-2015
REFERENCES
47
C.R.A.P, http://blog.teamtreehouse.com/how-crap-is-your-site-design, 23/05-2015
Sitemap, https://blog.kissmetrics.com/build-a-sitemap/, 17/05-2015
http://www.mindtools.com/pages/article/newTMC_05.htm
http://www.mindtools.com/pages/article/newSTR_89.htm
Mockup, http://www.creativebloq.com/ux/3-way-create-website-mockups-11513936, 20/05-2015
48
Books – Principles of marketing, By Adrian Palmer.
– Speed Up Your Site: Web Site Optimization, By Andrew B. King.
– Research Methods in Business Studies: A Practical Guide, Third edition , By Pervez N. Ghauri and Kjell Gr��nhaug.
– Graphic Design School: A foundation course for Graphic Design, Fourth edition, By David Dabner and Sheena Calvert.
– Flash CS6: The Missing Manual, first edition by Chris Grover.
– HTML & CSS: The Complete Reference, Fifth Edition by Thomas A. Powell.
– Learning Web Design Third Edition, By Jennifer Niederst Robbins.
– 20 Designprincipper, First edition, By Ian Wisler-Poulsen.
– Layout Workbook: A Real-World Guide to Building Pages in Graphic Design, By Kristin Cullen.
49
Appendix 1: Client meeting, Bellacci (images)
50
Appendix 2: Google drive, Questionaire
51
Appendix 2: Google drive, Questionaire
52
Appendix 3: GANTT
53
Appendix 4: Problem list
54
Appendix 5: business canvas model