How to evaluate, select and use
methods for improving the user
experience of a web platform
Jonny Str¨ omberg
June 14, 2021
Degree Project in Interaction Technology and Design, 30 credits
Master of Science Programme in Interaction Technology and Design
Supervisor at CS-UmU: Jan-Erik Mostr¨ om
Examiner: Ola Ringdahl
Ume˚ a University
SE-901 87 UME˚ A
Improving the user experience of an extensive existing web system can be a challenging task. There are a number of questions that have to be addressed. 1) What part of the system should be improved to achieve the most significant upgrade? 2) What changes should be made? 3) How should these changes be implemented?
The purpose of this thesis is to investigate what methods can be used to find answers to these questions, more specifically, what methods are suitable to evaluate the KollaCity platform .
The background study resulted in two methods for deciding which parts of the system should be improved. An online survey showed what the potential users were interested in, and Think-aloud protocol interviews highlighted the best and most complicated parts of the current platform.
A competitor analysis and a SWOT (strengths, weaknesses, opportunities, and threats) analysis gave an understanding of the market position of the platform and aided in the process of selecting which parts of the platform that was to be improved.
The design process started with sketching, followed by feedback, continued to a proto- type, and then finally an implementation.
A conclusion from the background study is that reading emails still is the most common online activity in 2011. This makes email marketing very effective and useful if it’s carried out in the right way. There are many pitfalls, but if the content is right and the structure and design follow the guidelines set up by governments and experts, there are big chances for success. However, keep in mind that designing HTML emails is not like designing websites.
There are many limitations, and the difference between rendering engines is big.
1 Introduction 1
1.1 Goals . . . 1
1.2 Purposes . . . 2
1.3 Methods . . . 2
1.4 The web plaform . . . 2
1.5 Terminology . . . 2
2 Background Study 5 2.1 Methods for evaluating user experience . . . 5
2.1.1 Methods considered . . . 6
2.1.2 Methods not chosen . . . 7
2.1.3 Methods chosen . . . 7
2.2 The KC platform . . . 8
2.2.1 The marketplace . . . 8
2.2.2 Broadcasts . . . 8
2.3 Email marketing . . . 9
2.3.1 HTML emails . . . 10
2.3.2 Compatibility . . . 10
2.3.3 Rules for email content . . . 11
2.3.4 Content guidelines . . . 11
2.4 HTML & CSS structure and best practices . . . 12
2.5 The market and the company’s position within it . . . 13
2.5.1 Competitors . . . 13
2.5.2 SWOT . . . 15
3 Analysis and Evaluation 17 3.1 Survey . . . 17
3.1.1 Punch-tickets and club cards . . . 17
3.1.2 Mobile web page . . . 17
3.1.3 SMS marketing . . . 17
3.1.4 Email marketing . . . 18
3.1.5 General comments . . . 18
3.2 Think-aloud protocol . . . 18
3.2.1 Participant 1 . . . 18
3.2.2 Participant 2 . . . 19
3.2.3 General findings . . . 19
4 Design process 21 4.1 Ideas . . . 21
4.1.1 Interconnecting SMS, Email and Web site . . . 22
4.1.2 New slider . . . 23
4.1.3 New menu . . . 24
4.2 Sketching and prototyping . . . 25
4.2.1 The week concept . . . 25
4.2.2 New slider . . . 27
4.2.3 New left menu . . . 29
5 Implementation 33 5.1 The weekly issue . . . 33
5.2 The new slider . . . 34
5.3 The new menu . . . 35
6 Results 37 6.1 Goal fulfillment . . . 37
7 Discussion 39
8 Acknowledgements 41
A Survey results 45
B Think-aloud protocol questions 51
E-commerce has grown enormously during the last decade. The possibility of reaching out to customers on a national and global level without having to build your own e-shop or maintain a staff of employees has attracted many entrepreneurs. Nowadays, shopping online is more common than shopping in physical stores for many people.
E-commerce is, however, not for everyone. Many companies do not have the time or money to run their own e-shops. KollaCity is a web platform that aims to gather all marketing tools at the same place and offer both support and full help service to minimize the effort needed by the companies.
This thesis aims to show how the user experience of the KollaCity platform was evaluated, analyzed, and improved.
The first chapter explains this thesis’s goals and purposes and explains what methods were used to fulfill these.
The second chapter is a background study, and it consists of five different sections.
One lists and selects methods for evaluating user experience, one gives an overview of the KollaCity platform parts that are most relevant for this thesis, one diggs into why email marketing is essential and what the challenges are, one gives a brief overview to how to structure CSS and HTML, the last part of the background study looks into KCs market position and who the competitors are.
The third chapter covers the analysis and evaluation of the platform. It consists of a survey, and two Think-aloud protocol sessions.
The fourth chapter describes the design process. It consists of three parts, an idea part, sketching and prototyping part and an implementation part.
The fifth chapter presents the final results and the seventh is a discussion.
There are four goals with this thesis, and they were meant to be fulfilled in order.
– Get an understanding of the market in which KC operate.
– Analyze and evaluate which functionality is most important to improve or add to increase quality of the user experience for the customers and visitors.
– Create prototypes of these improvements.
– Implement the prototypes.
The purpose of this thesis is to evaluate and decide which methods are best suitable for finding out what upgrades would improve the user experience most significantly of the KC platform. Then to use these methods and discuss the result.
Conduct a background study to 1) find out which methods that exist for evaluating user experience and to decide which methods should be used in this thesis, 2) get a better understanding of the KC platform and its market.
The implementation part of the thesis was focused on a design process with three different phases. The idea phase, the sketching and prototyping phase and the implementation phase.
These did not follow any standard project method, but each phase’s work was both iterative and agile.
1.4 The web plaform
KollaCity is a web platform for marketing. The idea is that companies that join KollaCity join a network. All companies are given loyalty cards that they can give to their customers.
With their card, the customers get offers, not only from the company who gave them the card but from all companies connected to the KollaCity network. The focus lies on recruiting as many companies as possible within specific cities. Connected companies close to each other means a better service for the customers.
A company connected to the network can create ads and publish them on KollaCity.se and broadcast them through email and SMS to target their customers. Within certain limi- tations, a company can also reach customers registered through other connected companies.
KollaCity is buil by Klara utveckling which is a Swedish web service company with an office in Sundsvall. It was founded in 2007 with the name KollaCity AB, but changed it 2010 to Klara utveckling AB. The name KollaCity was kept as the name of their primary service.
The two founders are working with sales. There is one developer and one designer/developer.
The marketplace is the public part of the KollaCity website, where all ads and com- panies are published.
The control panel is the GUI that companies use to administer their information on KollaCity.
KollaCity has a RESTful API where most public information can be accessed.
The KC platform consists of the marketplace, the control panel, and the API.
1.5. Terminology 3
All companies connected to KC get a store available at kollacity.se/company-name.
The store contains all public information about the company, e.g., description, address, and opening hours (if applicable). All ads and events are published here.
Loyalty card (f¨orm˚anskort)
When connecting to a company’s customer club, the contact gets a loyalty card that can be used to access all offers in a store.
An ad means an entity that can be published in a store and consists of a headline, a description, and optionally a picture. Ads can represent products, special offers, information, news, or practically anything.
Offers are ads that only are available for people with a loyalty card. A blue marking identifies these in the left upper corner of the ad picture. [PICTURE]
Events are entities that belong to an ad. Technically there are just regular ads, but the difference is that events occur at a specific date and during a specific time frame.
Events are represented in a different way than normal ads. One example is lunch. A restaurant can have one ad with information about their lunch, and then it can have one event for each day that contains information about the specific menu for that day.
A broadcast is an ad that is sent by email or SMS. Email broadcasts are presented like regular ads with headlines, descriptions, and pictures. SMS broadcasts just consist of the description. All email broadcasts are available at KollaCity.se, but they are not published in any stores.
A contact means a person. When a person joins a customer club, a contact is created containing all information provided. If this person already is registered in another KC- connected company, a connection between the existing contact and the new company is created. Depending on which information is available, the contacts can be used as broadcast receivers. Inside the control panels, companies have a list of all contacts connected to their customer club.
BL/Business life (Aff¨arslivet)
BL is another service made by Klara utveckling, but it is tightly connected to the KC platform. Companies connected to BL can subscribe to questions and then get notified when other companies answer them. KC collects the answers to the questions.
The background study consists of five separate parts. The first part assesses different meth- ods for evaluating user experience and how to decide what part of a system should be improved. The second defines and analyzes the parts of the KC platform that are the most relevant for this thesis work.
The third part digs deeper into email marketing, both why and how to do it properly.
The fourth part gives a brief overview of some best practices for structuring CSS when building a large website.
The last part looks into how to get an understanding of the market which KC operates in and what it’s current position is in it.
Klara utveckling wanted this thesis to be done because, during the last year, all focus has lied on the technical part of the platform. All work has been put into getting the new version up and running with all the previous functionality intact and with some new added.
The user experience has been put aside, something they are very aware of and want to improve through this thesis.
2.1 Methods for evaluating user experience
There are many different methods for evaluating user experience. One way to categorize them is as quantitative and qualitative.
Quantitative methods often quantify the problem by generating numerical data or data that can be transformed into usable statistics. These are especially useful when working with a lot of data.
Qualitative methods are often based on observation. It can involve several different methods, including Think-aloud protocol sessions, ethnographic studies, interviews, field studies, and moderated usability tests.
One other way to categorize them is as Wiberg does in her book A Measure of Fun. 
Method Measures Generated data Think-aloud protocol
Reactions, problems, ex- pectations
Written documentation User data collection Duration, errors, task
Quantitative data and statistics
Clinical experiments Heart rate, skin color, body heat, eye gaze, etc.
Quantitative data and statistics
Surveys and question- naires
Experiences from memory Documentation of an- swers, quantitative or qualitative with statistics Interviews General information from
Written or recorded docu- mentation
Clinical experiments is a method that requires a lab with special equipment, something that was not available during this thesis work. Neither did that type of method feel suitable for the current tasks.
Some user data collection also requires some special equipment or scripts that also were not available. The scripts could have been arranged, but the method did not feel suitable for the current tasks. User data collection is more suitable for systems where speed and error rate is critical. The user sample size for conducting a user data collection needs to be larger than KC’s.
After some research , the decision was made to go with one quantitative method and one qualitative method. Below is a more detailed discussion about the methods considered and their suitability for this project.
2.1.1 Methods considered
Data from services like Google Analytics 1 or Mixpanel 2 can be used for understanding how a system is used. They track which pages that are visited, which buttons are clicked, how long time users spend at each page, among other things. This information can be used to figure out what parts are used a lot, and which are not used. It can also be used for understanding where users drop in sign-up flows, and other funnels .
A persona is a description of a representative user, often with personal details. Age, gender, job, experience, sometimes even looks. It is used to understand the users of a system better .
Expert testing is when a group of experts is invited to evaluate a system against a list of predefined guidelines.
2.1. Methods for evaluating user experience 7
Talking to a user one-on-one results in detailed information about that person’s needs and experiences.
A focus group is a moderated discussion with a group of users. The idea is to get insights into their attitudes, ideas, and desires.
An online survey is a way to collect information from a broad audience for minimal cost.
A number of questions are asked, and the participants answer, and the results are collected automatically. The survey can be conducted both quantitatively and qualitatively, depend- ing on the types of questions. If the questions require long text-based answers, the survey is more qualitative. In contrast, if predefined suggestions answer the questions, the survey can be more quantitative since the result can be transformed into usable statistics.
Think-aloud protocol (TAP)
Watch the user interact with the thing being evaluated. The user should share what they feel and see during the process. The idea is that contextual interviews should generate more realistic results than ordinary interviews .
TAP’s advantage against interviews is that it captures many things that the user oth- erwise would not remember or notice. TAP is often preferred to interviews if possible.
However, there are many situations where TAP is not possible, like when the subject has been in the same situation before.
2.1.2 Methods not chosen
Data analytics is a popular and accessible method for testing web systems, and Google Analytics was already installed and used in the KC platform. However, the number of users was too low to generate valuable data, which ruled out the data analytics method. Expert review was not a good fit in this case because it would have required a budget to pay the outside experts, something that did not exist.
Interviewing users is something the KC salespeople do daily and was there for not inter- esting for this thesis. Personas already existed beforehand, so it was not needed to create new ones.
A Focus group could have been a suitable method since it has not been used before and would certainly be doable. However, only two methods could be picked for the user experience evaluation due to time limitations
2.1.3 Methods chosen
The methods chosen were an online survey and Think-aloud protocol (TAP).
A survey is an excellent way to get people’s general opinion on what KC should focus on for mobile and web marketing. It is especially suitable in this situation because it is easy to conduct on a large scale, which often is needed to get a general opinion. The downside is that it is hard to control who answers the questions, which means that there may be more people answering from a certain group than from another, which creates biases. It is also
easier to provide untruthful answers than in a personal interview, and there is also a risk that responders understand the questions or suggested answers differently. For example, the answer option ”somewhat agree” may represent different things to different responders and have their own meaning to each individual respondent. ”Yes” or ”no” answer options can also be problematic. Respondents may answer ”no” if the option ”only once” is not available.
TAP was chosen to pinpoint the most significant user experience challenges. The reason for choosing TAP was that it is suitable for highlighting good or bad aspects of a system that may not be obvious for the developer or designer.
2.2 The KC platform
The KC platform has many functions, and this section will list the most relevant to this thesis work.
2.2.1 The marketplace
The marketplace is an umbrella term for the ad or store related content of the KC web site.
The main components are the start page, the search page, the stores and the mobile version of the stores. This section will explain the different parts in greater detail.
Start page The purpose of the start page is to display the latest, most interesting content of the KC marketplace. The top is a slider with views showing the latest ads in five different categories (read more about the slider in section 4.2.2). Below the slider is a section where the latest ads from each main category is shown, and to the right, you’ll find the ten latest offers published. Furthest to the right is a list of the latest events and a couple of random companies.
Search page The search page is the core of the KC marketplace. It shows both ads, events, and stores. The left menu is dynamic and only shows categories and places where there are ads. There is a calendar at the top of the menu which shows dates when events take place. If a date is clicked, all events from that day and further are shown.
There are also checkboxes that let the user choose if they only want to see offers or only events. If the user chooses only to see events, the center view changes, and the regular ads get replaced by events, these events are shown to occur with the date visible.
Store The store is the company’s central place at KC. It is where all the company informa- tion is listed, including logo, address, map, presentation, branch, and opening hours.
It is also at the store where all the company’s ads are published.
Mobile store page The mobile store page contains the same information as the desktop store, but the design is adjusted for mobile screens. Meaning it is two columns wide instead of five.
The KC platform enables companies to broadcast their ads to customers or other contacts connected to the KC network. There are different ways to reach different audiences, each with its features and limitations. The goal is to satisfy the companies while at the same time not being annoying to the contacts, a balance which sometimes is challenging to keep.
2.3. Email marketing 9
SMS - Personal This is an SMS that companies can send to contacts registered in their store. The sender name of the SMS is the company’s name, and there are no references to KC, except for a link to a specific ad. There are no limitations for how many of these SMS a company can send. The price is 0.75 SEK/SMS.
Email - Weekly Public The weekly public email is an email that is broadcasted every Sunday at 17:00. Companies can apply to have an ad in this email. It does not cost anything and reaches many recipients. The email is unique for every recipient, and the ads are based on the contacts’ interests, address, age, sex, and interests. Companies who are applying to show ads in a broadcast can choose which contact segment they want to reach. The only limitation is that they can’t choose to reach competing companies contacts
2.3 Email marketing
Research from December 2010  showed that 94% of all American Internet users used email compared to 2009, where the same number was 89%. The exact number for social networks in 2010 was 61%. Some activities like photo sharing and general conversations have moved to social networks or other websites, but email remains the common platform most people use and understand.
As a marketing tool, emails have gotten a pretty bad reputation because of all spam floating around. However, the truth is that it can be very effective if it’s used in the right way. Moreover, thanks to the effective spam filters in modern email services, like Gmail, the spam amount that slips into an inbox has dramatically decreased.
In The Email Marketing Kit , Jeanne S. Jenning lists some of the most significant benefits of email marketing.
Cost effective Depending on the needs and the size of a company, there are different options available. If it’s a small company, it can use a regular email program to send emails. However, if the needs are more comprehensive, a mailing service like Campaign Monitor 3 or Mailchimp4 could be more suitable. In either way, the actual cost for sending emails is close to nothing, and compared to traditional direct marketing or advertising, email marketing is much more cost-effective.
Builds relationships With emails, it’s possible to start a conversation with the recipients, thereby making it easier to build a relationship.
Active and personal Email marketing is sent directly to the person that it’s meant for.
Traditional marketing often relies on the fact that a particular person picks up and actively pays attention to the content.
Quick results It is fast delivery. An email is sent within seconds and is often received after a couple of minutes at max. More often, it’s received within seconds. Studies 
have shown that 42% check their personal email more than four times a day and 32%
checks it 2-3 times, 16% check it once a day. Compare this with a home where some family members don’t even read their mail or the newspaper.
Easy to create Emails can be more or less complicated to create, but generally, it is the most time-consuming the first time. After a template has been set up, it’s easy to create new campaigns, and it does not take much time.
Hyperlinks HTML emails can contain hyperlinks that enables readers to go directly from the email to a website.
Detailed receive and response information One of the best features of email market- ing is that it is possible to know how many emails reached their destination and how many recipients clicked on different hyperlinks in the content. However, this requires either a pretty sophisticated internal email system or that you use an email campaign provider (like the ones mentioned above).
Choose segment Thanks to the personal nature of emails, it’s possible to send a message to a specific segment of users.
2.3.1 HTML emails
HTML emails are, as the name suggests, emails with HTML. Regular emails are just plain text, but HTML can be used to style and structure the content if HTML headers are included.
Creating HTML emails is not like creating websites. Common phrases among web designers are ”Tables are evil”, ”Use stylesheets for all styling”, and ”Use semantic markup”. These are the cornerstones of modern web development. However, when creating HTML emails, they no longer apply.
This is because the email clients today are either terrible or disabling features for other reasons like security.
Outlook 2000 and 2003 use the same rendering engine as the IE-version installed, mean- ing not so good HTML-rendering. Many people thought it would be better when 2007 and 2010 were released, but it worsened. Instead of IE, Outlook is now using the rendering engine from Word . This means no background-images, no floats, and a very bad box model , which results in all layouts having to be made with tables to ensure that elements are positioned where they should be.
Gmail does not allow style elements in either <head> or <body> which means that all CSS styling has to be inline. Every paragraph, headline and box have to be styled individually.
The table 2.3.4 shows the support for a selection of CSS-related things in the most commonly used email clients. To view a complete list, visit http://www.campaignmonitor.
The point with semantic markup is making content easier to understand by machines (mainly search bots), but the thing is that emails are personal and are available to parse for i.e., search bots. This, combined with the lack of CSS-rule support, makes semantic markup in emails unimportant. One more reason to write semantic markup at websites is that other developers can inspect the source code and see whether the author is skilled, but it is often more or less impossible to see the source code with emails.
2.3. Email marketing 11
2.3.3 Rules for email content
When creating commercial emails, there could be some rules that are required to follow by law. Depending on where an email is sent from and where the receiver is, there are different laws. The most famous one of these is the CAN-SPAM Act5. CAN-SPAM defines a ”commercial electronic mail message” as ”any electronic mail message the primary purpose of which is the commercial advertisement or promotion of a commercial product or service (including content on an Internet website operated for a commercial purpose).”. Here are the rules CAN-SPAM act states:
Unsubscribe link The email has to contain a visible link that leads to a page on which the receiver can unsubscribe to further messages.
Sender’s physical address It must contain a valid physical address to the sender.
Correct ”From” and ”To” and other header information the ”From” and ”To” in- formation has to be correct, including the other header information like routing. This is also one of the most important things to do if you want your mail to be read. If the sender is unknown or, worse, suspicious, the chances that the recipient will read the email very small, and he/she likely marks it as spam.
Clear information about that is a commercial email It is not allowed to disguise a commercial email to look like something else, it must be clear what the purpose is.
Not misleading subject line The subject line must describe the content and not mislead the reader.
2.3.4 Content guidelines
When creating email newsletters or advertising, some guidelines are good to follow. This section will list those found during the background study of this thesis work. Most of them are found in Campaign Monitor 6 employee Mathew Pattersons’ book Creating Stunning HTML Email That just work! .
Maximum width 600px When creating websites, the recommended maximum width is often 800px or 1024px, but when it comes to emails, we often have to take the right menu into account. It is often around 200 px which leads to a recommended max-width at 600px for the email.
Alt tags A good practice when creating websites is to always include a descriptive alt-tag at all images, but in emails, this is even more important. Because it’s very likely that images are not shown and without the alt-text, recipients have no idea that there should be an image at a certain place or what it was supposed to illustrate. There is also a chance that recipients that see an interesting alt-text will decide to show images.
Header In Outlook and other email clients, there is often a layout where messages are displayed in the top 3/5 of the screen, and then the content of a message is shown in the bottom 2/5 of the screen. A typical pattern when scanning the mailbox is to take a quick look at the messages and thereby just see the top of the content. This makes it a good idea to have an area at the top of the email which shows the most important information or a table of contents.
Table 2.1: CSS support in email clients (OL: Outlook, Y!: Yahoo!, A: Apple, LN: Lotus notes). Source Campaign Monitor 
OL 00/03 Live Y! Mail Y! Classic OL 2007/10 A Mail iPhone Gmail LN 6/7 LN 8.5 AOL Desk 10
style in head Y Y Y Y Y Y Y N N Y Y
style in body Y Y Y Y Y Y Y N N Y Y
link in head Y Y Y Y Y Y Y N Y Y Y
link in body Y Y Y Y Y Y Y N N Y Y
font-family Y Y Y Y Y Y Y Y Y Y Y
font-style Y Y Y Y Y Y Y Y Y Y Y
font-variant Y Y Y Y Y Y Y Y N Y Y
font-size Y Y Y Y Y Y Y Y Y Y Y
font-weight Y Y Y Y Y Y Y Y Y Y Y
line-height Y Y Y Y Y Y Y Y N Y Y
background-image Y N Y Y N Y Y N N N Y
opacity N N N N N Y Y N N N N
opacity N N N N N Y Y N N N N
border Y B Y Y Y Y Y Y N Y Y
margin Y B Y Y Y Y Y Y N Y Y
padding Y Y Y Y B Y Y Y N Y Y
position Y N N N Y Y Y N N Y Y
float Y Y Y Y N Y Y Y N Y Y
Marketshare 28% 16% 14% 9% 8% 7% 6% 1% 1%
Set no image width or height If images are not shown, which is very likely, images with width or height take up much whitespace.
Remind the recipient why they get the email To avoid being treated as spam, it is a good idea to remind the receiver why he/she has gotten the email.
2.4 HTML & CSS structure and best practices
A lot can be said about how to manage websites. This section will cover a few tips that were found during this thesis work.
The KC platform allows ads to be published and viewed in several different places, and there is a wide range of web design components that are recurring at different places and in different situations. One example is that sometimes the ad titles have to be an h2-element and sometimes an h3 element, depending on how important the ad is on that particular page ( SEO related). Moreover, there are also other situations when one component may look like another, but their markup is completely different. This makes the CSS complex and pretty hard to maintain.
A good solution for this is to bind CSS style information to classes rather than element types. The size and color of a headline should be dependent on the class and not whether it is an h2 or an h3. It is also a good tip to be aware of making CSS rules dependent on its parents. It may look good and produce clean code to make headlines and lists, and the
2.5. The market and the company’s position within it 13
menu container looks in a specific way, but you never know what other elements will be put into the menu container in the future. If the style of the element is dependent on its parent(s), it is much harder to add or change things. If a component is going to be reused across many different parts of a site it is a good chance that the design will be messed up somewhere if containers decide how element types are going to be styled.
Something that makes the maintenance of CSS much easier are languages that extend CSS. Examples of these are LessCSS 7, SASS/SCSS 8 and Stylus 9. These are languages that compile into regular CSS, allowing the coder to add extra functionality to CSS like variables, operations, functions, mixing, inheritance, and much more. This makes writing CSS much easier, and the code is more maintainable than regular CSS.
2.5 The market and the company’s position within it
Before evaluating and then deciding which parts of the platform should be improved, it was needed to get and better understanding of KCs market position and the market itself. This was achieved by doing a competitor analysis and a SWOT analysis. These are not scientific methods, nevertheless valuable and useful for this specific task.
The market for local trades and loyalty programs is full of companies, and it is hard to define which ones that are actually competitors to the KC platform. Six different categories of companies have been identified that could be competing. Here is a list of these, together with a selection of companies within that category.
Groupon http://www.groupon.com Living Social http://livingsocial.com Local sites / Tourist sites
Visit Sundsvall http://visitsundsvall.se CityGuiden http://cityguide.se/sundsvall Mobile club card providers
My Club Cards http://www.myclubcards.com ClubIdo http://clubido.se
Zatero http://www.zatero.com/site/se/home Rabble http://www.rabble.se
Connect Online http://www.connectonline.se/site/se/produkt-kundklubb/
Birsta City http://www.birstacity.se
Loyalty program providers Vistit http://vistit.se
Inspiration Company http://www.inspirationcompany.se/Vara_produkter/Lojalitet.
Company information search engines Eniro http://www.eniro.se Hitta http://www.hitta.se
Facebook http://www.facebook.com Google http://www.google.com
No companies were found that had the exact concept as KC, but many have built their business around selected parts of the services connected to the KC platform. The most noteworthy competitors are listed here.
Groupon is a website that offers deals that only are valid for one day. The company is one of the fastest-growing web businesses of all time 10and have expanded to a large number of cities in the world, including 25+ in Sweden. Compared to KC, Groupon offers only one deal per day/city and differs from KC, where companies can have an unlimited number of deals.
Eniro.se / Hitta.se
Both Eniro.se and Hitta.se are Swedish websites where you can find contact informa- tion about nearly all companies in Sweden. They are also offering map services like Google Maps.
Facebook Pages 11 is a way for companies (or noteworthy persons/group) to have a website on Facebook which people can ”like” and promote to their friends. These Pages can also have sub-pages with more information and a Wall where the owner can publish news. Facebook does also has an advanced ad-system, where companies can publish ads for selected users.
Facebook Deals 12 is one of Facebook’s latest innovations. It enables companies to publish offers which users buy with credit card or Facebook credits. At the moment, the service is only available in a limited number of cities.
After a failed attempt to buy Groupon, Google launched Google Offers. It is a service much like Groupon and offers people to get good offers to their mailbox. It is still in beta and exists only in six US cities, but there is a good chance that Google will work hard to reach the local trade business. Offers are a good complement to Adsense, Search, and Maps.
2.5. The market and the company’s position within it 15
My Club Cards
My Club Cards is a service where users can have their club cards inside their phones instead of in their wallets. All you need is a smartphone and an Internet connection.
This makes it easy and cheap for companies to join and comfortable for customers.
It’s especially suitable for people who do not like to have many things in their wallets or do not even have one. They are using HTML5 and are thereby not bound to a specific platform. They also offer a loyalty program together with the service and thereby enable companies to send their offers by SMS and e-mail to their customers.
Visit Sundsvall is a travel guide for Sundsvall that contains information and offers that are interesting for people visiting Sundsvall. This includes hotels, restaurants, events, and experiences. It is also possible to book or order some of these services. European Union and L¨ansstryrelsen V¨asternorrland finance it.
SWOT stands for Strengths, Weaknesses, Opportunities and Theats. It is a popular strate- gic planning method used to evaluate a company, product, or team compared to its com- petitors.
Strengths define the internal strengths of a company compared to its competitors.
Weaknesses define what internal weak spots a company could have compared to its com- petitors.
Opportunities define which external business areas the chances for success are larges.
Threats define which external elements that could damage the company the most.
An advanced and capable platform that has been developed over four years. A broad base of functions where everything is tied together. The whole system is integrated, which makes it possible to publish ads both to specific customers or groups, and at the same time, publish them in the store and at the KC marketplace. Furthermore, everything gets available through the KC API.
There is a tight team behind the company that has a wide area of expertise. Close to all competence needed to run and sell the service is included within this small team of four people.
Sales are usually done face to face with the companies, which opens up to a large segment of customers that are otherwise difficult to reach with solely Internet marketing. Also, KollaCity has worked with selling the platform for over four years, leading to many customer contacts and an extensive network, something other startups have a hard time competing with.
While a rich set of features can be a strength, it can also be a weakness. A rich feature set make the system time-consuming to maintain, and it is difficult to make significant changes quickly. Many parts are dependent on each other, and it is complicated to change some things.
The downside of relying most sales on personal meetings is that it is hard to expand fast.
If the company is going to grow faster, more focus has to be put on Internet marketing.
The company only consists of a small core team with four people, and there is no external funding. This means that there is a minimal amount of money and time available.
A lot is happening in KCs market at the moment. The smartphone market has exploded in the last couple of years. Moreover, people have become more and more aware of the discounts available through the Internet thanks to services like Groupon. The KC platform has been developed for four years, while many other players only have been active for less than a year. In that way, this platform can, with some adjustments and improvements, offer a much broader experience than many others.
By reaching out via email, SMS, web, social media, and the API, a company’s KC store can be their central place on the Internet. The platform reaches out via more channels than any other player today.
KC has also retained a unique focus, enabling modern marketing for smaller companies that would not have the capability otherwise. Moreover, it focuses on collecting all ads in one place and then distributing them from there. Most competitors target either companies that are already active on the Internet through webshops or focuses on individual campaigns, like Groupon.
It is difficult for KC to keep up with new competitors that are niched and very good at what they do. Google and other competitors are also a problem. At the moment, their focus lies in contact information and individual exclusive offers, but if this changes, it could be a big problem.
Scalability, the platform is complex, and it is unclear what effect a significant increase in traffic would have.
Analysis and Evaluation
The first goal was to decide what the most essential things to focus on, and the second goal was to understand how to improve them.
As described in the background study, the methods that were used were Survey, and Think-aloud protocol.
A survey was conducted to determine what people felt about club cards, loyalty programs, and mobile and email advertising.
The survey was created via Google Forms. It was sent out to the author’s mailing list and Facebook friends, and this led to 42 responders, of which almost everyone was students in ages varying between 21 and 30.
Here are the results and the analysis of the survey.
3.1.1 Punch-tickets and club cards
Most responders had 1-4 or 7 or more club cards. 0-3 was most commonly used. The punch- tickets count was 0-1, and the usual usage 0. However, 77% would like and very much like to use a mobile KC platform to collect their club cards. Only one person did not want this at all. The percentage who liked the same idea for punch-tickets was 48%.
3.1.2 Mobile web page
There were some questions regarding how much people wanted to use a mobile KC platform for different tasks. The result showed that the responders were mainly interested in these different tasks; 70% wanted to use it to find offers in their surroundings, 69% wanted to use it to find lunches nearby, 47% wanted to use it for finding company information (36%
answer ”whatever”). Only 23% wanted to use it for joining customer clubs.
3.1.3 SMS marketing
This part was focused on the responders’ level of tolerance towards SMS marketing and what information they would like if they got SMS from companies. It is shown that the responders could tolerate 0-2 SMS from companies that they like. If they have registered
themselves with the company, they were much more tolerant of SMS, but it was necessary that the information was excellent and helpful in both cases.
3.1.4 Email marketing
The same questions as for the SMS marketing were asked for the email. The result was close to the same, but generally, they were more tolerant to emails than SMS.
3.1.5 General comments
The survey shows that most people could accept email and SMS marketing if the content is excellent. However, a significant group of people does not want to get SMS or emails from companies at all. This is also something that is shown in other studies like one from Bucharest  which asked 153 responders (65 male and 88 females), aged 18 to 29, what content they wanted in their commercial emails. It showed that events were most interesting at 50%, then came news at 37%, then new products at 26%, then other information at 22%, then contests at 13%, then information about loyalty programs at 8% and card information at 5%.
Most people are interested in using a mobile KC platform for different kinds of tasks.
3.2 Think-aloud protocol
Think-aloud protocol (TAP)  is a method for testing usability or user experience. It is conducted by one or more participants and one or more observers. The participants are assigned a couple of tasks and are then supposed to carry out these while constantly
”thinking aloud,” meaning sharing their current thoughts during the entire session. This way, the observers will know what the participants are thinking and experiencing when using the product, web page, etc.
The observers are supposed to be quiet during the session and affect the participants as little as possible. The exception is that the observers are allowed to encourage the participants to speak more.
Two different TAP sessions were conducted with two different participants and one observer. The first participant was a 55+-year-old woman that works at a family store. She has many cards in her wallet and utilizes offers when she can. She uses the computer a couple of times a week but is not tech-savvy. The second was a 24-year-old woman who studies to become a nurse. She uses her computer often and is pretty tech-savvy. She uses the Internet to find offers and has used Groupon and other similar services.
The questions are found in the appendix, and here is a summary of the most important findings.
3.2.1 Participant 1
Participant 1 (P1) had a tough time with most of the tasks. The biggest problem was that she was very stressed and distracted by the image slider on the front page. She tried to stop it and click on it without a response. This was probably the reason why she missed the left menu completely. She did most of her navigation from the links and categories on the front page instead of the left menu. She also used the search field when she wanted to find things.
She had a pretty hard time interpreting the search result and wanted to see where all the stores were rather than only seeing them in a list.
3.2. Think-aloud protocol 19
Worth noting is that P1 seemed to be pretty inexperienced at using modern web pages.
She often got stuck on things that would have been obvious to an avid Internet user.
3.2.2 Participant 2
Participant 2 (P2) was very focused on the search field. It was the first thing she saw and used. She did most of the tasks pretty fast, and it was clear that she was an experienced Internet user. P2 did not use the left menu in the beginning. She did find it when she was trying to find the lunch offers (and could not find them anywhere else).
She did not manage to find out how to join a customer club. The observer had to step in and explain how to do it. After the explanation, she managed to join quickly. After registering, she did not understand that she was logged in and did not seem to understand what had happened.
3.2.3 General findings
The image slider on the start page is disturbing and not very useful. It should at least be possible to click on the headlines. The left menu is too hard to find, and it is not easy to use. It is almost impossible to understand how to join a store’s customer club just by visiting the store, and after joining the store, it is not easy to understand what happened and if you are logged in.
The design process is divided into three parts. Ideas, sketching&prototyping and imple- menting. In the first phase, the data from the analysis and the evaluation is gathered and based on that. Ideas are created with the help of brainstorming.
The second phase is the sketching and prototyping phase, where the best ideas from the brainstorming are visualized. First by pen and paper and later with omni graffle and last by Photoshop.
The third phase is the implementation phase, where the prototypes from phase two are put to life and implemented in the platform.
To determine which areas are most important for improving the KC platform, the data from the analysis and evaluation was used as a background for brainstorming sessions and meetings. Brainstorming was conducted by the author together with the other members of the KC core team. This means that the group consisted of one designer/programmer, one programmer, and two salespeople. Everyone wrote down their thoughts and ideas on paper, and then a discussion followed. This was repeated during a couple of meetings so that everyone got time to think and evaluate each idea. Between the meetings, members exchanged emails with additional comments or progressive ideas.
The brainstorming resulted in a bunch of thoughts and ideas, both good and bad. These were structured and then sorted and filtered. It was important that the result was excellent, doable, and would not take too much time to accomplish.
In the end less than ten areas were left and of these three was chosen to be the focus of the upcoming prototyping and sketching phase. This was the background for the three areas: KC has a lot of useful information and functions on the web site, but there are some things that have to be improved so that the visitors can get the most out of the page and the broadcasts.
The focus will be on three different areas. First Interconnecting SMS, email and the web site, the publishing and broadcasting channels must be tied together in a good and flexible way. The second is the left menu, it is too hard to find and use. The third is the image slider on the start page which is disturbing and not as useful as it could be.
For these three, the biggest current disadvantages were identified and then the group decided what the goals for each area was. What did KC want to accomplish with the reformation?
4.1.1 Interconnecting SMS, Email and Web site
The KC platform enables companies to create an ad and publish it in their store and the marketplace. Then they can send a copy of this ad both by SMS and by email directly to their contacts. This is great, but technically it is not the same ad. The problem is that all these services are separated from each other.
There is no way to see the contents of the weekly email on the website, and the ads included in the email only exist in the email. Moreover, the weekly email information is not personal or directed to any specific contact, so there is no reason why people not connected to the KC network should not see this information also.
SMS has a minimal length, and KC has substantial restrictions on how many SMS a KC-connected contact can send during a week. This limits the number of companies that can reach contacts and thereby limits KCs efficiency in marketing. It would be great if more ads could be included in a single SMS.
It would also be good if the companies could make both an SMS and an email at the same time when they want to broadcast.
Finally, it would also be good if the most interesting information from the KCs advertisers could reach the contacts and visitors without the advertisers having to do anything more than just publish their ads.
The Week Concept
The concept is to have one page at KollaCity.se that summarizes the current week. The content should be the information most valuable for the reader, generally speaking, of course.
It should show all or select the weeks’ lunches, events, ads, and offers be shown. It should also be possible to feature some posts that are made from stores that pay extra. There are many benefits to this.
This becomes a good starting point for the visitors at KollaCity.se. It shows the most critical parts of the content and then encourages visitors to start exploring the site.
For the contacts registered at the KC network, this is a way to minimize the number of SMS received. The only thing needed is an SMS with a link to the week-page once a week or two times per month.
This could also complement or replace the weekly email. Moreover, if the algorithm for deciding content is the same as on the page, it is relatively easy to implement.
The content should, however, depend on some parameters. One of KCs main selling points is that all broadcasts are personalized. The weekly emails’ content is based on the contacts’ interests and which store he or she is registered in. This is something that should be kept in the week-concept. It would also be good to be able to filter information dependent on which city the visitor/contact lives in.
The idea is that the page always looks the same but that there are several different urls to get to it and depending on which url is typed, the content is filtered accordingly.
What happens at the entire KollaCity this week?
What happens in Sundsvall this week?
What happens in V¨asternorrland this week?
4.1. Ideas 23
What happens at KC this week that is specific for the user with phone number 0707723023. This is the link that could be sent to contacts that have their phone number registered.
Same as the last one, but for contacts that have not registered a mobile number.
This feature will be reasonably easy to maintain and understand by using the same content with the same algorithm for both the email, the week page, and a mobile version of the week page.
4.1.2 New slider
There were many complaints about the image slider on the start page. It takes much space and is the first thing that visitors see. As seen on 4.1 each slide does only shows three ads, and there is nearly no information about them. This shows three lunches, but there is no information on which day or where it is. Both of the TAP participants tried to click on the headline shows at the top right, which is impossible. The sliding was also distracting.
Figure 4.1: The image slider at the start page
KC decided to keep the slider but do an entire makeover. The new version should first of all not slide but fade; fading is less distracting. Visitors seeing the slider should easily find links to click and start their KC exploration. There should also be more information about each ad and, most importantly, show more ads on each slide.
4.1.3 New menu
The old menu in Figure 4.2 did look pretty good, but based on the TAP sessions, it was hard to find and hard to use.
Figure 4.2: The old left menu
The main problem is that it does not encourage clicking. First of all, users have to click at the drop downs (Hela Sverige, Alla kategorier, Alla underkategorier) to see the content at all, and it’s not obvious at all what ”Calendar posts” implies.
A new menu is therefore needed. It should present more of what KC offers and encourage visitors to start the KC marketplace.
4.2. Sketching and prototyping 25
4.2 Sketching and prototyping
After deciding which areas needed improvement the most, the biggest problems, and what KC wanted to accomplish, it was time to start the sketching and prototyping phase.
The work began with a pen and paper. A rough sketch was done to get a feeling for how things should be structured. These sketches were sometimes shown for the rest of the core team, and sometimes not.
When the team was somewhat happy with the sketches, outlines were done in Omni- graffle, and these were more informative in regards to what every part of the sketch meant and was supposed to do. The sketching and outlining were repeated until all members of the core team were satisfied.
After the core team was satisfied with the initial sketches and outlines, it was time to move over to Photoshop. Here prototypes were made piece by piece. First, an overall design and then added details one by one.
Finally, simple HTML prototypes were created from the Photoshop designs, and after, they were tried out at the KC development servers.
4.2.1 The week concept
To make the work as easy and fast as possible, the week concept design was decided to be inspired by the weekly mail design. It was also decided that the design for the ads and events should use the same design as the one on the website. The umbrella term for the email, page, and SMS is The Weekly Issue, TWI.
The hardest part was to decide exactly which information should be included in the concept and how this information should be structured. Earlier it had already been decided what kind of information should be included in the TWI, but now it was time to take care of the details. The first thing decided was that only information from paying companies should be included in the TWIAnd after some meetings, the complete content was decided, and here is a list of the final selection.
– Ads from KC partners in three different sizes.
– One large ad from the company where the contact is registered
– Ads that could be booked by companies that want to be included in TWI, no limit (could be changed if the demand increase).
– The latest lunch offers, max 5 – Upcoming events, max 5
– The latest offers, max 6 + information about how the offers work – List of random companies
The sketching began with trying out how wide the design was going to be. KC has a standard column width at 170px, and this was also going to be applied at the TWI. The question was if there should be three or four columns. The first drafts had four columns (figure 4.3 and 4.4), but after some discussion, the number was determined to three, like the Weekly email broadcast. This makes room for a fourth column where partner ads can be placed. The mobile version should only have two columns though, like the mobile version of the store. This feels natural because mobile screens are smaller.
Figure 4.3: Early sketch of the week concept design
Figure 4.4: Later sketch of the week concept design
The order in which the content is displayed was mainly decided based on the survey results combined with some of the core team’s thoughts. However, there was one exception, the partner ads should be put somewhere at the top because that is what they are were paying for. The result is shown in figure 4.5. At the top is a message unique for each TWI.
It could contain information about what has happened the last week and what’s included in this message. It should be short and effortless to read. After that is the table of contents, it summarizes the most content and shows how many ads there are in different sections, etc.
It is not a complete list like the ones in a book, but more like those in magazines.
The first ads shown are those from companies (usually one) to which the contact is connected to. This is because if a contact is connected to a company, it is very likely that they are interested in what the company offers. These ads are called main ads. A section of partner ads follows this section.
About the partner ads: It was decided that there should be three different partner types;
A, B, and C. The A type should be presented with a big-sized ad at the top under the main ads. The B types are displayed under the A type but in a standard size. The C types are presented like the B types but further down in TWI.
After the first partner section comes a list of lunches for the upcoming week. This is prioritized because it is content that is likely to be interesting for viewers regardless of interests.
After comes ads booked by companies, followed by upcoming events, and then comes the offers and information about how to utilize them. In the lower parts of TWI is information
4.2. Sketching and prototyping 27
Figure 4.5: Later sketch of the week concept design
about the contact that the message has been sent to, after comes a list of random companies.
At the bottom is information about Klara utveckling AB and some contact information.
4.2.2 New slider
Most of the design decisions regarding the new slider were based on the output from the TAP sessions. The sliding had to be removed, and more incentives to start exploring KC added.
The old slider had five different views, and the decision was made to stay with the same number of views for the new slider. The order was changed though. The new order of the views :
Lunchs The latest lunches.
Shopping The latest ads.
Culture The latest ads in the categories related to culture.
Events The latest events.
Offers The latest offers.
The difference from the previous order is that the lunches are placed before Shopping.
The simple solution for the sliding problem was to replace it with a fade mechanism.
This could maybe also be disturbing in some sense, but it seemed like the best solution. To move away from the concept of having multiple views was not attractive to the core team.
One thing that was decided early on was that it should be visible how many views there were in the slider and what the name of each view was. The alternatives here were to put the list of views on the top, left, right, or bottom. Figure 4.6 shows four sketches of early slider ideas, two have the names in the top, and two have them in the bottom. In the end, the decision was made to have them at the bottom. There was also a discussion about not putting big images in focus and instead of having more information. The argument for having more information is that the slider is at the most visible spot on the website and should thereby focus on providing as much helpful information as possible. The argument against it is that the images are appealing and gives the site a good touch. The author liked the alternative one, but the core team disagreed.
Figure 4.6: Sketches of the new slider
To get as many incentives to explore KC as possible, it is essential to make more things clickable and show more information about what KC offers within the different categories.
The things done to achieve this are listed down here and are shown in figure 4.7.
– Make the views name clickable. A click leads to a search for something suitable for that view.
– List the most popular related categories and subcategories together with the views name.
– Include the entire headline and company name with each ad.
4.2. Sketching and prototyping 29
Figure 4.7: Improvements to increase click rate
When the Photoshop phase came, all the components were established, but the details needed to be decided. A selection of the design prototypes with the final result is shown in figure 4.8.
4.2.3 New left menu
The new left menu is mostly based on the TAP sessions result where neither of the partici- pants used the menu as much as the KC crew would have wanted. The left menu is central in the KC interaction flow. It is through the menu all ads and events can be found; it is also where all categories and subcategories are found, showing all that KC has to offer.
The first thing decided was to remove the drop-down menus for the categories. The drop-downs hide the categories and do not encourage visitors to explore. First-time visitors have no idea about what KC offers and should not be forced to take action just to get this information.
However, at the same time, all subcategories can not be visible because they are too many. The solution was to prioritize them. Figure 4.9 shows two priority levels, bold and not. Then there is one more level that is hidden as long as its main categories aren’t clicked.
Categories are dependent on what search results there currently are available. If there are no ads in a specific category, that category will be ”disabled.”
The drop-down for location has been kept. The reason for this is to save space and because it is easy to expect what to find in a drop-down named ”Whole Sweden” (translated).
There is also a plan to make this choice automatic in the future, but at the moment, there are a bit too few ads to filter them by city. The position is at the top because it feels logical that that choice should be first; all other content depends on that.
What’s not included but will be added is the offers-button (Formanserbjudanden). It will be placed below the categories. The images and the map of Sweden will be removed.
The purpose of the images was to inspire the visitors to click, which is hopefully fulfilled by the new categories.
Figure 4.8: A selection of design prototypes with the final at the bottom
4.2. Sketching and prototyping 31
Figure 4.9: A comparison between the old and the new left menu
This section will cover how the different parts and improvements were implemented and what difficulties arose during the process.
5.1 The weekly issue
Implementing TWI is time-consuming because it includes both a regular web page, an HTML email, and a mobile web page. The two last ones require extra work and are a bit harder to test.
The technique for making HTML emails are very different from making regular web pages or mobile web pages, which is explained in section 2.3.1. The implementation of the email version of TWI went well, despite troublesome markup.
When it comes to the webpage and the mobile webpage, the biggest challenge was to avoid double work. The most convenient way to do the design was to reuse the CSS from the KC marketplace. The problem was that it would have been undesirable the import all CSS. The file size would be too big, and 90% of the CSS would have been unused. The solution for this was to use the Less CSS1, a dynamic CSS language that extends CSS with dynamic behavior such as variables, importing and functions (more in section 2.4). This solution made it possible to put all ad markup in a single file and then import it at both the marketplace, the TWI web page, and the TWI mobile web page.
The backend code for TWI is yet to be implemented. The one responsible for that is Jonas S¨oderberg from the core team.
There have also been discussions regarding if once a week is too often for TWI. The final implementation will probably result in one SMS every fourth week and one email every other fourth week (week 1: SMS, week 3: email, week 5, SMS, week 7: email, etc.).
The resulting TWI are shown in figure 5.1, that design is the one that will be used in the email and on the web page. The mobile one are not finished yet, but it will use the same components and the same design except that it will have two columns instead of three.
The yellow areas display where the partner ads should be. The banners Fantastisk shopping, Ta del av lokal kultur, Hitta event i din n¨arhet, F¨orm˚anserbjudanden are clickable and leads to searches at suitable categories at the KC marketplace. There is also a button on them to show the viewer that they are clickable.
Figure 5.1: The final version of TWI
The reason for putting the message at the top ”outside” the rest of the design is that it should look more like a personal message when sent by email.
5.2 The new slider
KC is using jQuery, and therefore the slider was to be implemented using that. The old slider was built on using the SlidesJS script2, but an entirely new script was written to the new one.
The slider images had to be adjusted so that the views name and subcategories could be readable when placed at the bottom of the pictures.
Two improvements were made that are not visible. First, the slider content is put to KCs Memcache3cache so that there is no need to do multiple API calls each time the start page is loaded. The other improvement is that thanks to the cache’s speed, the slider no longer needs to be loaded by AJAX. This makes it possible for Google to index all content of the slider.
The final result of the slider is visible at http://www.kollacity.se. As figure 5.2 shows, all views have the same structure with a large picture and ads to the right.
5.3. The new menu 35
Figure 5.2: All the views of the new slider
5.3 The new menu
The new menu became a part of the entirely new search script. It is made with the help of jQuery and is controlled by the search script. It was pretty hard to get the showing and hiding to work correctly. It was a lot of if/else, and it was not always obvious which categories to show or hide in all situations.
The entire search script is, however, not, at the time of writing, finished. Some bugs need fixing and some logic to think through, but the menu works as intended.
The new menu has the focus put at the categories as figure 5.3 shows. All the main categories are visible by default, together with the most popular subcategories.
The right part of 5.3 shows how it looks when the main category is clicked. The main category gets inverted, and all its subcategories are shown. The subcategories of other categories are faded because they no longer contain any search results.
Figure 5.3: The new menu, on the right with one category clicked
6.1 Goal fulfillment
There were four goals with this thesis stated in section 1.1 and all of them were more or less fulfilled. One thing that could have been done better is implementing the Weekly issue and the new menu. The complete implementation of them were not finished in time, but the things that are yet to finish are outside the authors’ work scope.