71
1. Introduction 2 1.2. Problem formulation 2 2. Interface Design 2 2.1. Research method 2 2.2. Target group analysis 3 2.3. Hypotheses 3 2.4. Categorisation of the target group 4 2.5. Personas 5 2.6. Scenarios 7 2.7. Card sorting 9 2.8. Information Architecture 9 2.9. User journey 11 2.10. Atomic design 18 2.11.Color scheme 19 2.12. Progressive Web App 21 2.13. Affordance 21 2.14. Semiotics 24 2.15. SEO and Accessibility 25 2.16. Testing 26 3. Database 27 3.1. Entity Relationship Diagram 27 3.2. Normalization 29 3.3. Implementation 29 3.4. Data exchange format 30 4. Back End Development 30 4.1. Defining models 31 4.1. Creating controllers 32 4.2. Simple Front-End 32 5. Perspectivation 33 6. Literature list 33 7. Appendix 35 7.1. Closed Card Sorting 35 7.2. Think aloud tests - Sketches 38 7.3. Think aloud tests - Wireframes 40 7.4. Think aloud tests - Mock-ups 43 7.5. Qualitative interviews 46 7.6. User flow 52

1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

Page 1: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

1. Introduction 2

1.2. Problem formulation 2

2. Interface Design 2

2.1. Research method 2

2.2. Target group analysis 3

2.3. Hypotheses 3

2.4. Categorisation of the target group 4

2.5. Personas 5

2.6. Scenarios 7

2.7. Card sorting 9

2.8. Information Architecture 9

2.9. User journey 11

2.10. Atomic design 18

2.11.Color scheme 19

2.12. Progressive Web App 21

2.13. Affordance 21

2.14. Semiotics 24

2.15. SEO and Accessibility 25

2.16. Testing 26

3. Database 27

3.1. Entity Relationship Diagram 27

3.2. Normalization 29

3.3. Implementation 29

3.4. Data exchange format 30

4. Back End Development 30

4.1. Defining models 31

4.1. Creating controllers 32

4.2. Simple Front-End 32

5. Perspectivation 33

6. Literature list 33

7. Appendix 35

7.1. Closed Card Sorting 35

7.2. Think aloud tests - Sketches 38

7.3. Think aloud tests - Wireframes 40

7.4. Think aloud tests - Mock-ups 43

7.5. Qualitative interviews 46

7.6. User flow 52

Page 2: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

7.7. Sketches 54

7.8. Wireframes 55

7.9. Mockups 61

1. Introduction

The development team is assigned with the task to create web solution for the customers

of Aalborg Storcenter. The web application should enhance the experience of visitors to the

shopping mall. The shopping experience should be more pleasant and enriching.

The development team will create a web solution that provide the customers with the

option to create a list with the purchases that they would like to make. Once they are in the mall

they will be able to choose the product they want to buy first and navigate to the store that offers

it.

1.2. Problem formulation

The team will focus on creating a coherent web application with code first approach, while

using ASP.net framework and Entity Framework with SQL based database, where the final

solution will be focused on well developed user experience and user interface.

2. Interface Design

2.1. Research method

For the development of the product Agile paradigm - Prototyping is chosen, in order

to involve the end user in the process and make sure that the user experience is taken into

account and that the team will provide the client with a suitable, user-friendly solution. By

using Prototyping and conducting user tests throughout the development of the product the

team makes sure that the solution is coherent to the needs of the users (Spencer, D., 2010.).

Iterations

1. - Research - Qualitative Data;

Page 3: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

- Ideation;

- Target group analysis - Categorization, personas

- Tests - Closed Card Sorting;

- Information Architecture;

2. - Sketching;

- Test - Think Aloud on Low Fidelity Prototype;

3. - Design prototype wireframes

- Test: Think Aloud

4. - Design solution;

- Test - Think Aloud on High Fidelity Prototype - Mockups prototype in Adobe XD;

5. - Implementation;

- SEO

- Test - gorilla test and black box testing;

The project would be developed with the agile paradigm using prototyping as the

method. There will be five iterations which will be ended with low, medium and high-fidelity

prototypes.

2.2. Target group analysis

In order to get an overview about our potential target group, their behaviour and needs the

team performed target group analysis based on the qualitative and quantitative research. The

research was based on the hypotheses and assumptions regarding the visitors of Aalborg

Storcenter, which will proved or disproved in the following section. The results of the analysis will

help the team to develop suitable solution for its users. All transcriptions of the interviews

performed can be seen in the Appendix 6.5.

2.3. Hypotheses

1.Local people who visit Aalborg Storcenter are familiar with its concept.

The conducted interview proved the hypothesis that local people are familiar with the concept of

the store.

2.Our target group consists of buyers who prefer shopping online.

The fourth hypotheses was partly proved, however, even though all the people who were

interviewed agree with being described as an online shopper, they still still go to the physical

stores in order to try things. They also tend to search for the discount online beforehand.

3.Users of our solution prefer to login with their Google account.

Page 4: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

The fifth hypothesis was proven and the interviewers use Google login mostly, since in their

opinions, it is more convenient, faster and does not demand from them remembering passwords

for all the new websites they access with that login.

4.Visitors of Aalborg storcenter tend to think is hard to navigate around the store.

That hypotheses was proved, based on the opinions and experience of the interviewed visitors.

5.Shopping apps are popular among young users in Denmark.

According to the found research regarding Danish people, the hypothesis was proven. However,

there is a tendency for older user who start using shopping apps as well. (Hussain Fakhruddin.

2015)

6.Danish people in general tend to access the web via mobile devices.

According to the statistics, Danes tend to browse Internet on mobile devices. Around “81% of the

total number of internet-users in Denmark owns a smart device (phone and/or tablet).” and

majority of them use their devices to access Internet on a regular basis. (Hussain Fakhruddin.

2015)

All transcriptions of the interviews performed can be seen in the Appendix 6.5.

2.4. Categorisation of the target group

The team is going to perform categorization of the target group in order to be able limit

and narrow down the target group in the early stage of the project. By doing so, the team will be

able to have a clear overview of the audience that the team is going to target (Kotler, P. and

Armstrong, G., 2010). The team, based on the qualitative and quantitative research, will have to

consider geographic, demographic, psychographic and behavioral information of the audience in

order create a suitable solution for them.

Geographic

World region and country Aalborg, Denmark

Demographic

Age 18 - 54

Gender Male, Female

Psychographic

Life style Bargain and discount hunters, online and

Page 5: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

traditional shoppers

Personality Outgoing and open to new technologies, organized, ever-ready

Behavioral

Occasions Regular and special occasions

User status Regular and potential users

Loyalty status From medium to strong

Readiness stage Familiar with the concept of Storcenter

Benefits Convenience, fast navigation, accessibility,

personalized experience,

2.5. Personas

Personas Freja Kristensen Casper Jensen John Lee

Image

Background

Freja was born in Aalborg and lived in the city her entire life. She is a student, has a part-time job and follows current fashion trends.

Casper was born in Copenhagen until 2015 when he moved to Aalborg with his family because he got a new job in an IT company.

John is a student from England. He is a student in Aalborg university and he has been living in the city for a few years now. He doesn’t like lasting time and browsing through shops. He has a very busy schedule because he has a part time job and university, so he loves shopping online.

Page 6: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

Nationality Danish Danish English

How they find

out about the

application

She is following Aalborg Storcenter Facebook profile and she found out about the app when they created a new post promoting it

He is going frequently to Aalborg Storcenter to do the shopping with his family. He finds out about the app through the posters and ads from inside the mall.

He was browsing the latest newsletter from Shopcenter, before he goes shopping for the holidays and sees the advertisement for the app in the Store center website.

Occupation Student, works part-time in Nadias Sandwich

Social Media Manager, works full-time at Neas Energy

He is a Student and has a part time job in a design company in Aalborg

How does their

typical

shopping

routine looks

like?

She most of the time choses to go to the store alone, so she does not spend too much time on shopping. She likes to know what she is going to buy beforehand.

He goes mostly with his family and spends usually more than two hours inside. He is always making a list with all the stuff that he needs to buy.

His schedule is very busy, he usually shops online or checks the websites of certain brands during the evening when he relaxes. If he is set on buying something he wants to try it out and he wants to know exactly where to go to buy it.

What tools

might they use

She is an Apple fan. She owns an iPhone 8, which is her main device. She browses Internet via her mobile, contact her friends and update her social media. She also owns MacBook, which she uses mostly for studying.

He is an Android fan. He owns a Huawei P20, and uses it daily. He browses Internet through Google Chrome, contact friends and update his social media profiles. He owns also a Lenovo laptop for his working time.

He has an Android mobile device. He uses his phone a lot when he uses for dedicated shopping apps like ASOS. However, the rest of the time he uses his laptop for more extensive searches.

What social

media they use

She uses mostly Facebook and Instagram, in order to keep up with current events in the city and keep in touch with her friends

He is using mostly Facebook and LinkedIn because most of his friends and co-workers are using these platforms and he can keep track easily of new events around Aalborg and talk with friends.

He uses mainly Instagram. There he has a lot of advertisements so he can keep track on new products and latest styles

Page 7: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

What do they

value in their

personal life

She is a busy person. She works and studies at the same time, therefore she strongly values her time. She likes to keep up with the latest trends.

He values his work and he is doing his best to advance day by day. In his opinion, family is the most important aspect of his life.

He values his friends because as a foreign student they are the closest people he can rely on. He values his free time and loves efficiency.

What is

important for

them when they

are shopping

Affordability, accessibility, discounts, possibility to try things on before buying

Accessibility, discounts Efficiency, structure, sales

What

objections

might they have

She might not use an app, since she knows the shop very well and is very specific about what she is looking for

He might not use the app because he is an old-fashioned type of person

He might not want to go again through the whole browsing process of different product in order to create the shopping list when he has already browsed through other websites.

What drives

their decision

making process

Price, accessibility, how fast she will be able to use the product

Price and accessibility Efficiency, sales and accessibility

2.6. Scenarios

Freja Kristensen Casper Jensen John Lee

Start with

situation

Freja wants to buy a new winter jacket. She does not want to buy it online, because she wants to try it on before. Recently, she is busy with her job and school, so she does not have much time for shopping. She wants to visit

Casper wants to buy Christmas presents for his kids. He doesn’t know much about toys stores so he opens Aalborg Storcenter website and sign up in the app provided. He creates a new list and browses through toys categories.

John wil have a Christmas Party at his company and he needs a new outfit for the event. He is doesn’t have time left because he was pretty busy the last couple of weeks and there is no time to order online because the clothes are not going to arrive on time.

Page 8: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

Storcenter to make her purchase. She opens the app and creates her new shopping list. She browses categories, where she finds clothing, she looks for jackets and finds few that she would like to try. She adds them to her list. The next day she visits Storcenter. She opens the app with the list, clicks on the navigation icon next to the product and goes to the specific store. The jacket she picked turned out to be a great fit and she decided to buy it.

He selected the products that he wants to buy and added them to the list. The next day he goes to the Aalborg Storcenter. He doesn’t know exactly where the store is, so he decided to open the app and navigate to the store by clicking the navigate button next to the product from the list.

He doesn’t want to waste a whole day browsing the store. The application is pretty useful because he can see the products and he know on the next day in which store exactly to go to.

What could

prevent my

persona to

reach his

goal

She would not be able to find a specific product when she is in the specific store, due to the lack of navigation inside of specific stores. She could get overwhelmed with the amount of products included in the app.

He knows already the toy stores inside Aalborg Storcenter. He might not use the app because of this fact.

The product that he is looking for might not have the correct size so it doesn't fit him.

Should

something

occur after

the goal

has been

reached

Freja should be satisfied with her personalized experience and fast way of navigating through the Storcenter.

Casper should be satisfied with the easy and fast experience of navigating inside the store.

John can remove the purchased product from his shopping list once he is ready.

How the issue will be prevented

To avoid the issue the development group will develop in the future more extensive search regarding the product sizes, colors and quantity.

Page 9: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

2.7. Card sorting

The development team created a closed card sorting test in order to incorporate the user

in the development process of the application. Because card sorting is a user-centered method,

where you can see the matches of your predictions about the structure of your website by letting

the user structure it themselves, the development team used this method as a starting point for

information architecture.The team divided the topics in specific categories. We're using card

sorting to have a diversity of perspectives on how our website can be structured.

With the card sorting we wanted to test if our predictions are right regarding the app

content. We gave to the users a pile of cards and we explained that this is going to be the structure

of the website and then we gave them the opportunity to sort them the way they see it relevant.

We were able to observe the process of sorting and hear the thoughts and ideas of the

potential users (Usability.gov, n.d).

2.8. Information Architecture

Based on the results from the first iteration and the closed card sorting (see Appendix

6.1.) the development team is creating information architecture, while taking into consideration

people, content and context (Spencer, D., 2010).

1.People

What do target group needs?

● Convenience;

● Fast navigation;

● Accessibility;

● Personalized experience;

● They need to have know about : price, navigation to the store;

How they think?

● They are curious about the new trends;

● They value quality;

● They value good communication;

● They value low prices and good bargains;

What do they already know?

Page 10: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

● They are familiar with the store center;

● They are familiar with the stores in the store center;

2.Content

What do you have?

● Location;

● Photos of the products;

● Shopping list;

● Logo;

● Discounts;

What should you have?

● Resources;

● Clear understanding of the demands and the needs of the target group;

● Knowledge;

What do you need?

● The client needs information about the products;

● They need a clear navigation to the store where they can find specific product;

● They need to able access their list, create a new one, as well as delete them;

● They will have to be able to add products to the lists, delete the products and view their

lists;

3.Context

Goals for the website

The development team want to create an online platform that will make it easier for the

clients of the Store Center to navigate through the place. The goal for the website is to improve

the shopping experience of the clients of the mall. The team’s goal is to have an information

architecture that is well structured and easy to navigate through.

Who else will be involved?

The client as well as the target group will be involved in the development process, by

participating in the user tests that end each of the five iterations.

What are your constraints?

● Lack of information about the target group

● No previous experience in creating Web api

Page 11: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

● Using technologies and frameworks that the development team hasn’t experienced until

now

2.9. User journey

The team kept in mind the user journey. The application was developed by creating

coherent step by step journey for the user. That helped the team to identify better user’s needs

and the way the will interact with the application.

Based on the tested information architecture and the created personas the team created

a think aloud test, where the users had to complete a task of creating a shopping list in the current

wireframes and finish it by selecting a product that they would want to buy from that list in order

to navigate to the store. The test went without any difficulties from the user to complete the

task.The results confirmed the application flow that the development team will use and these are

the steps:

Page 12: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

1st User Journey Scenario Goals and expectations

Freja wants to buy a new winter jacket. She does not want to buy it online, because she wants to try it on before. Recently, she is busy with her job and school, so she does not have much time for shopping. She wants to visit Storcenter to make her purchase. She walks in the Store center and sees the advertisements of the app around the mall and downloads it.

She expects that the app will improve her shopping experience and she will find the shop as fast as possible

Steps

Page 13: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

Step 1

When the user enters the store center app for the first time she does not have login details

therefore user click button to create new user.

Step 2

Once the user is successfully logged in the first thing that they would see is the option to create

a list. Once they click on the button for creating a list they would be redirected to step 4.

Step 3

Step 4 gives a range of categories to the user where they can go in and select different products

for their shopping list

Step 4

When the category has been selected user can see the list of images of the products that

belongs to the specific category. They can select a certain product and see more detailed

information for the product.

Step 5

Step 6 presents the popup with extra information that will appear once the user clicks on a

product that they are interested in. In this popup the user is presented with two decisions of

either adding the product to their list or continuing with the browsing process.

Step 6

Once the uses selected all the items that they needs to buy they click first button in the menu

which represents complete list of selected products - My list. Here she has the option to delete

or add new product to the list as well as get a direction to the store that they have the product

they want to purchase.

Page 14: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

Thought and emotional experience

Covers the whole journey:

(Freja): I just arrived at the Shoping center and I want to find a specific jaket

Research Options

(Actions, Thoughts, Feelings)Open the app and navigate to the clothing category find a product

she likes

(feeling: I hope I can find the store fast )Find store and item.l Make purchase, after purchase

delete the product from the list

What can be done to improve the user journey?

There could be a more extensive search for a specific product instead of the user scrolling endlessly. This would be considered in the future development of the app

2nd User Journey Scenario Goals and expectations

Casper wants to buy Christmas presents for his kids. He doesn’t know much about toys stores so he opens Aalborg Storcenter website and sign up in the app provided.He makes the creation of an account and creates a shopping list at home and now he is at store center and wants to go to a toy store

He doesn’t know exactly where the store is, so he decided to open the app and navigate to the store by clicking the navigate button next to the product from the list.

Steps

Page 15: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

The next day he goes to the Aalborg Storcenter. He doesn’t know exactly where the store is, so he decided to open the app: Step 1

The uses selected all the items that they needs to buy they click first button in the menu which

represents complete list of selected products - My list. Here they have the option to delete or

add new product to the list as well as get a direction to the store that they have the product they

want to purchase.

Step 2

He clicks on a first product navigation button and a map with a highlighted store appears.He

navigates himself to the store, purchases the product and deletes it from the list by pressing the

delete button next to the product.

Thought and emotional experience

Covers the whole journey:

(Casper): I just arrived at the shopping center and I want to find a specific the toy store.

Research Options

(Actions, Thoughts, Feelings)Open the list and navigate to the toy category find a product she

likes

(feeling:“It is a very efficient and time saving” )Find store and item.l Make purchase, after

purchase delete the product from the list

What can be done to improve the user journey?

“You have to be prepared in advance so that you do not waste time browsing in the application when you are already there” There could be added a complete button so that the user can still keep track of everything that

Page 16: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

he has bought.

3rd User Journey Scenario Goals and expectations

John wil have a Christmas Party at his company and he needs a new outfit for the event. He is doesn’t have time left because he was pretty busy the last couple of weeks and there is no time to order online because the clothes are not going to arrive on time. He doesn’t want to waste a whole day browsing the store. The application is pretty useful because he can see the products and he know on the next day in which store exactly to go to.

He expects that the app will provide them with fast and easy choice, that would speed up the shopping process.

Steps

Page 17: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

Step 1

He checks out the sale page at the bottom right menu of the application, so that he can see the

current sales.

Step 2

Once he is ready he click on the bottom left button “list” which show him the shopping list with

the option to add products

Step 3

When he click on the button he is presented with a range of categories to the user where they

can go in and select different products for their shopping list

Step 4

When the category has been selected user can see the list of images of the products that

belongs to the specific category. They can select a certain product and see more detailed

information for the product.

Step 5

Step 6 presents the popup with extra information that will appear once the user clicks on a

product that they are interested in. In this popup the user is presented with two decisions of

either adding the product to their list or continuing with the browsing process.

Step 6

Once the uses selected all the items that they needs to buy they click first button in the menu

which represents complete list of selected products - My list. Here he has the option to delete

or add new product to the list as well as get a direction to the store that they have the product

they want to purchase.

Thought and emotional experience

Page 18: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

Covers the whole journey:

(John): I am home and I am browsing through the products

Research Options

(Actions, Thoughts, Feelings)“I want to be able to add the products directly from the newsletter

instead of me browsing once through the newsletter and then browsing again through the

categories in order for me to select the products I already have liked”

(feeling:“I want to know more about the sale option”)Find store and item.l Make purchase, after

purchase delete the product from the list

What can be done to improve the user journey?

There could be implemented a sale icon next to the product images that have discounts, so that it attracts the attention of the user

User Flow - for better quality refer to the Appendix 6.6.

2.10. Atomic design

Atoms

Molecules

Page 19: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

Organism

Because atomic design is not a linear process, the design team can constantly modify it,

if there is a detected issue, which fitted well for the prototyping method that the team is using

(Brad Frost, 2016). The atomic design is used for the development of the design and user interface

of the app

The team wanted to use repetitive components throughout of the design in order to keep

continuity. By breaking the components of the website down to it basic atoms it was easy for the

team members to mix and match atoms in order to create new molecules and then organisms.

This is very easy to observe in the layout of all of the sections in the website.

The atomic design will be a important part in the final iteration when the team members

will code the app, the developers can reuse the code that it’s already created and minimize the

likelihood of writing a duplicate code. This method will result in more consistent code and more

efficient time management.

2.11.Color scheme

The color scheme for the site will be based on three main colors: dominant, accent and

background color. the development team main objective, when choosing the color scheme for the

website, was to make the app similar to the the already existing website of Store center, because

the app should be perceived as an extension to the Store Center website. The user has to fill as

if they know the brand already and they can trust it.

Dominant color

Page 20: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

The dominant color will be used on a specific places throughout the website , where the

team wants to draw the attention of the users, or on places where we want to accent the call to

actions. The color is bright enough to attract attention to more important parts of the design and

the places where the designers want from the users to take action. By choosing the brands color

for the dominant color of the app, the design team is making sure that they building a strong brand

identity, and that the user perceives it as an extension to the already existing website.

Accent color

An accent color is highlighting secondary information on the website. The parts of the

website that are not the focal points , but still have a significant and have to stand out. The shades

of blue color are the other accent color that is used throughout the design for buttons color for

certain sections that the design team wanted to highlight in order to create clear differentiation

between the section of the different subpages.

Background color

Page 21: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

The team used white in order to create white spaces where the users can rest their eyes,

as well as make sure that the content of the page was the one that the users were paying attention

to. The content of the website more readable and visible.

2.12. Progressive Web App

The main task for the project was to create a prototype of a web app that could be

described as a progressive one. There are several requirements that have to be fulfilled for an

app to be progressive. The web app that the team is going to develop can be categorized as one

due to the fact, that the app is much more engaging than typical web apps, is meant to be browsed

on mobile devices on the go, where the users are inside of the store. Therefore, the app is

responsive, designed and implemented with a mobile first approach. As for now, the desktop

resolution is not implemented, since it was not the focus for the current project, however, it is

possible to adapt the app to wider screens and desktop devices in the future development. This

aspect was taken into consideration by the team during the design process. Currently, the app is

using HTTP requests, the authentication for the prototype was not implemented, but the team is

aware of the fact that, since the app is requiring personal information and password from the user,

the connection should be secure.

To do so, the team should implement HTTPS protocol, that will secure the interaction

between the user and the app by encrypting the data that is going to be exchanged between them.

HTTPS also have quite big impact for SEO, as well as increases the credibility of the app in

general. To implement HTTPS, the team will have to obtain and set up valid SSL (secure socket

layers) certificate, like e.g. Cloudflare (Ayo Isaiah, 2018).

2.13. Affordance

During the design process of the app, the team took into consideration affordance and its

importance, which helps to understand users’ thinking and how they might interact with the user

interface, based on its design. Affordances can be defined as clues in the design or in the

environment that indicate that certain action is possible to perform by the user. What is important,

is the fact that affordances should be perceived in direct way, almost immediately, without giving

too much thoughts or explanation to it (James Jerome Gibson, 1966).

Donald Norman (1999) divided affordance into two types: actual affordance, where due

to object's properties the user is able to guess the purpose that the object might be used for. They

other type is a perceived affordance, where the user guess the purpose of the object based on

they way it is presented, meaning that they can assume based on the previous experience or

cultural aspects.

We can also categorize affordance as a metaphorical or a explicit one. In the design of the

app, the team wanted to rely on the perceived affordance, where the users have to have some

sort of knowledge regarding the apps in order to recognize patterns used in it. The team made

Page 22: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

sure to use icons as a form of metaphorical affordance in the bottom menu, but the titles were

added under them in order to make it easier for the user to decode the information. Also, the

placement of the menu, order of the form fields and buttons resembles patterns that are well-know

from other mobile apps, therefore the users should be aware of them and their purposes.The color

was also considered during the design process - buttons that are considered as a ones that

perform actions that can be perceived as “safe” have blue color and rounded corners. However,

buttons that delete products or the list itself are red to indicate that the change that is about to be

made by the user has permanent consequences.

Page 23: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg
Page 24: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

2.14. Semiotics

In order to create our app’s content minimalistic and easy understandable the development

team decided to create icon based design.Based on the common way people perceive icons and

signs the development team decided to apply Pierce’s model. (Chandler, D., 2017). Using Peirce

three parts model which is referring to icon, index and symbol. The development team is able to

explore and analyse signs and meaning in words, images, actions, rituals, myths and any other

sign system. Pierce concentrated on the relations between the sign vehicle and the object. He

divided signs into three types: icon, index and symbol.

Icon: The relation between sign and object is based on resemblance. An icon bears

resemblance to its object.

Index: The relation between sign and object is based on a direct existential connection.

An index is a sign with a direct existential connection with its object.

Page 25: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

Symbol: The relation between sign and object is based on conventions, agreements, or

rules. A symbol is a sign whose connection with its object is a matter of convention, agreement,

or rule.

[Accessed on 12th of December http://visual-memory.co.uk/daniel/Documents/S4B/ ]

2.15. SEO and Accessibility

The development team plans to implement before the deployment in the future all well

known good SEO practices such as : descriptions, quality links, titles, semantic structures, but

they also focus on the content quality. The development team focused also on quality and made

sure that the app is perceivable, operable and understandable (W3C. 2018).

Perceivable

The developers made sure that the information and UI components must be presentable

to users in ways they can perceive. The team provided text alternatives for any non-text content.

The design team created content that has simpler layout and still provides good information or

structure. Last but not least, in order to make sure that the user has a good perception of the

application the team made it easier for users to see content by separating foreground from

background.

Operable

In the created application the UI components and navigation are operable. To achieve that

the developers will provided users enough time to read and use content, as well as, provide ways

to help users navigate, find content, and determine where they are, by having active color in the

navigation regarding the page the user is currently in.

Understandable

Page 26: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

Based on the performed user tests the development team can surely say that the

information and the operation of user interface is understandable. The text content is readable

and understandable.The web pages appear and operate in predictable ways and the users have

the opportunity to avoid and correct mistakes, which was achieved by adding back buttons and

option to delete added list items.

2.16. Testing

Black box testing

With the Black Box Testing the development team is testing the internal structure and

implementation of the app. The application is not known to the tester. The user had to complete

given task with expected outcome. The task was to change the address in user subpage. The test

was perform on working prototype and as expected the results showed that the test subject fully

understood the idea about tested functionality. Our user was able to follow the steps of the

application and fulfil the assigned task without any problems. Here we see usage of perceivable

content that was created. The user new what to expect and how to react in certain situation.

Following the example with one of input fields with self explanatory placeholder from the app we

can see that the user is aware of the expected input, therefore, we are preventing our app from

unexpected outcome. (Software Testing Fundamentals. 2018)

Gorilla testing

In order to find possible bugs throughout the development of the prototype, the team

decided to use Gorilla testing (David Peter Simon, 2017). The test took into consideration several

user cases, where the tester had to perform repetitive actions, for example change their address

of their profile or add and delete several products from the list. Therefore, only specific functions

and parts of the working prototype were tested at the time. The tester had to know very little about

the app in order to make the test as reliable as possible and find possible bugs that might be

caused by unexpected actions.

By performing the tests, the team was able to assure themselves that the program, which

was tested in modules is working properly and will not start working improperly after a while, when

more actions are performed and more inputs are made by the users.

Page 27: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

3. Database

The team used SQL database for this project due to fact that a relational database was

much more suitable in this case rather than using a non-relational database. That choice was

based on the fact that the project which the development team created doesn’t contain large

amount of data. Also, the structure of the data and models with their attributes are strictly defined

and should not require changes in the later development. Even though NoSQL databases are

easier to manage and maintain, as well edit their structure in the future development, the team

decided that SQL is a better approach due to fact that the members have previous experience

with it and have a better understanding of the whole creation and maintenance process. Also, the

team was obligated to develop their Web API solution using C# language and therefore used

ASP.NET and Entity Framework, so SQL database was the most optimal choice due to its

compatibility with SQL queries and wide support in the field in a form of detailed documentations

for developers. Those facts that led to the creation of an Entity Relationship Diagram specifically

for SQL relational database where all the participation constraints, cardinality and relationships

will be defined.

3.1. Entity Relationship Diagram

First of all, the Entity Relationship Diagram was created using Chen notation (P.Dybka,

2015). Inside it there are four strong entities, one weak entity and four different relationships

between them. The first entity created was User with the following attributes: UserID, Address,

Username, Password and Date Of Birth. This table is the main core of the application because

every action that would happen on the website will start with a specific user and their actions. In

order to add certain products to the list, an unique list will be created when a user logs in into the

application. The attributes of the List table are the following: ListID, List Name and a foreign key

from the User table, FK_UserID. Between these two tables the relationship is one-to-one, due to

fact that one user can have only one list that will be automatically created when they will enter in

the application. Also, between User and List there is partial participation due to fact that not all the

entities are involved in the relationship, but total participation from the List entity because of the

foreign key UserID.

Furthermore, the other three tables Product, Store and Category are interconnected due

to fact that the Product entity contains a foreign key from the other two tables: FK_StoreID and

FK_CategoryID. The Product table contains the following attributes: ProductID, Product Image,

Product Description, Product Name and the two foreign keys presented previously. In the same

way, the Store table contains StoreID, Store Name, Store Logo, Image Location and Category

table only CategoryID and Category Name as attributes. In this case, the team can conclude

that the Product tables is a weak entity that it’s dependent of Store table because a product can’t

exist without having a store assigned. The same approach applies for Category table, but in this

Page 28: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

case both Category and Product tables are strong entities because a product can exist without

being part of any category and the other way around. The development team can state that in

both of the cases, the relationships are one-to-many, but with weak relationship between Store

and Product tables because the Product entity is a dependent of the Store entity. Regarding the

participation constraints, there is total participation from the Product table side because each

product must have a store and a category assigned. Also, on the other two sides, the partial

participation takes places due to fact that not all the entities are involved in the relationship.

As a final interaction between tables in the presented ERD, the team must connect the

Product entity with the List. The relationship between these two table was considered at first as a

many-to-many relation. After further research and brainstorming about it, the team updated the

diagram by adding another entity named Selected Product, which will store the foreign keys of

these two tables presented, FK_ProductID and FK_ListID. In this way, the relationship between

the tables will be changed. Now, there is one-to-many relationship between List and Selected

Product and one-to-many between Selected Product and Product. Due to fact that not all the

entities are involved in the relationship, the team encountered partial participation from both sides.

Page 29: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

3.2. Normalization

Moreover, the team took in consideration the advantages of using database

normalization along the creative process of the Entity Relationship Diagram. To reduce the

redundancy, the team made sure that all the attributes, according to 1NF, are single valued and

all of them have unique names. Regarding 2NF, the team made sure that all of the non-key

attributes from the tables are fully functional dependant on the primary key and according to 3NF

all the fields in the table can be determined only by the key in the table and no other columns. By

using normalization, the project team can help keep the data free of errors and can also help

ensure that the size of the database doesn’t grow large with duplicated data. In the same way,

inserts and updates will run quickly due to fact that the data is not multiplied in different locations

and the tables are smaller than usual, fact that will improve the performance of the database.

3.3. Implementation

In the project, the database was created by using Code-First approach using Entity

Framework, meaning that the database will be created based on the code written by the team.

After the creation of the models and controllers, the team wrote in the NuGet Package Console

the command that creates the migrations for the database, Enable-Migrations. This command

will automatically create a folder called “Migrations” plus a code file Configuration.cs inside this

folder. After these files were added, the team introduced into Configuration.cs file a Seed method

that will populate the database. Based on the classes previously written, the team started adding

data inside this method using the specific information for each model. Furthermore, the following

lines were introduced into the NuGet Package Console: Add-Migration Initial and Update-

Database. The first command generates code that creates the database, and the second

command executes that code. The database was created locally, using LocalDB meaning that,

when it is connecting, the necessary SQL Server infrastructure is automatically created and

started, enabling the application to use the database without complex configuration tasks.

In order to define the Web APIs for the application, the development team updated the

Controllers, that were automatically created, with specific queries that will access and retrieve

information from the database. The team edited those queries to match desired actions using

Eager Loading in Entity Framework. Eager Loading stands for the process whereby a query for

one type of entity also loads related entities as part of the query, so that the team doesn’t need to

execute a separate query for related entities. Eager Loading is achieved using the Include()

method. Inside the Controllers, the project team used LINQ Lambda expressions as a parameter

in the Include() method. Also, the following references were added into the Controllers in order to

access the Lambda expressions: using System.Data.Entity and using System.Linq. The

development team decided to use Eager Loading for the fact that it is easy to maintain afterwords

and it has an easy to read code structure. There are also some disadvantages that the team is

Page 30: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

aware of like long initial loading time and too much unnecessary data loaded that might affect the

performance.

As a big problem that the development team encountered during the process was that

whenever a model will be edited, for example if you want to change a field or a column, the whole

database will be affected by that change. As a solution for this problem, the team can take into

consideration using NoSQL in the future development of the project.

3.4. Data exchange format

After building and running the project, the data retrieved from the database was displayed

as XML format. Due to fact that XML is slow, uses more words than necessary and uses large

amounts of memory, the team decided to display the data in JSON format. The reason why the

team switched to JSON was because it is faster and the structure it is intuitive, making it easy to

read and map directly to domain objects in any programming language used. Also, in JSON

format, classic relational columns can be combined with columns that contain documents

formatted as JSON text in the same table, parse and import JSON documents in relational

structures, or format relational data to JSON text.

4. Back End Development

The team started the Back End part with the creation of an empty ASP.NET Web API

project, a framework from where the developers can build HTTP Service, which reaches a broad

range of clients including browsers and mobile devices. After the creation of the ASP.NET Web

Application, the development team installed Entity Framework through NuGet Packet Manager

because Code First technique will be used in order to seed and return the data from the database

using Web API. Entity Framework is a relational mapper framework which gives developers an

automated mechanism to access and store the data into the database. The graph below

represents simply graphic structure and main core of the app.

Page 31: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

After the installation of Entity Framework and Newtonsoft.JSON, a package that can

serialize and deserialize the objects in JSON format, the team created and configured the Models

according to the Entity Relationship Diagram. First step made by the team was to change the

default behavior of the Web Application for returning XML data to JSON data inside the

WebApiConfig.cs file..

4.1. Defining models

Later on, the group members started creating the Models. The classes created inside the

Models folder were the following: User, List, Product, Store, Category and Selected Product.

Inside this classes, the project team defined the primary keys, navigation properties, getters and

setters, the required attributes, and the relationships between the classes. When the creation of

the classes was done, the team started adding the Controllers inside the folder with the same

name. After the solution was built, the group created Controllers for every class by pressing right

click on Controllers folder and then Add New Scaffolded Item, from where a Web API 2 Controller

with actions, using Entity Framework was added. Right after the addition of every Controller, the

team was supposed to build the solution again, so that the Controllers that would have been added

after will work properly.

Page 32: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

4.1. Creating controllers

In order to display certain data from the database to the users, the team was using HTTP

Methods which are used to retrieve data from the server, submit, delete or update data to a server

for processing or delete an item from server’s data store. In this case, the team worked with all of

these requests. The controllers created by the Entity Framework allowed the team to check if the

Web API works, which was tested with Postman software. Then, the team proceeded to adjusting

the controllers to the app’s needs. As stated above in the database section, the queries used to

retrieve the data were done using Eager Loading and Linq Lambda Expressions. In order to

visualize the outcome, Class Diagram was created.

4.2. Simple Front-End

In order to access the application’s business logic, the team used the exposed API

methods that is defined in controllers using Ajax, which is a client-side script that communicates

to and from a server or database without the need for a postback or a complete page refresh. The

returned data was displayed dynamically using Javascript and JQuery by appending HTML on

run time.

Page 33: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

5. Perspectivation

The development team was able to fulfill most of the set goals , however there are

components that the team will consider developing in the future development of the application.

The team has to make sure to implement the newsletter , navigation, map of the store and back

button. All of this components are part of the front end development, however the team prioritize

the functionality of the application when taking into consideration the time frame that they had.

Currently the solution is styled only for small and extra small resolutions.

6. Literature list

Literature:

Page 34: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

1. Gibson, J. J. (1966). The senses considered as perceptual systems.

2. Ayo Isaiah. freeCodeCamp.org. (2018) How to add HTTPS to your website for free in 10

minutes, and why you need to do this now more than…. [ONLINE] Available at:

https://medium.freecodecamp.org/free-https-c051ca570324. [Accessed 15 December

2018].

3. Hussain Fakhruddin. (2015).Teknowledge Software : iPhone Application Development

Company India. 2018. Development Of Mobile Applications In Denmark:Trends &

Figures. [ONLINE] Available at: https://teks.co.in/site/blog/development-of-mobile-

applications-in-denmark-key-trends-figures/. [Accessed 15 December 2018].

4. Spencer, D., 2010. A Practical Guide to Information Architecture. Penarth: Five Simple

Steps.

5. Brad Frost. 2016. Atomic Design Methodology | Atomic Design by Brad

Frost. [ONLINE] Available at: http://atomicdesign.bradfrost.com/chapter-

2/. [Accessed 01 June 2018]

6. Card Sorting, n.d | Usability.gov. [ONLINE] Available at: https://www.usability.gov/how-

to-and-tools/methods/card-sorting.html. [Accessed 01 June 2018].

7. Kyle Peatt.2013.Mobify. A Beginner's Guide to Perceived Performance: 4 Ways to Make

Your Mobile Site Feel Like a Native App | Mobify. [ONLINE] Available at:

http://dev.mobify.com/blog/beginners-guide-to-perceived-performance/. [Accessed 16

December 2018].

8. Jitan Gupta, 2017.Creating Web API Using Code-First Approach In Entity Framework.

2018. Creating Web API Using Code-First Approach In Entity Framework. [ONLINE]

Available at: https://www.c-sharpcorner.com/article/creating-web-api-using-code-first-

approach-in-entity-framework/. [Accessed 14 December 2018]

9. Mike Wasson. 2018. Use Code First Migrations to Seed the Database | Microsoft Docs.

[ONLINE] Available at: https://docs.microsoft.com/en-us/aspnet/web-

api/overview/data/using-web-api-with-entity-framework/part-

3?fbclid=IwAR3FFfT3vQ288qzRB7Z7LnOtPdxQv9WSegsoieLC8MFkNO8uTrpW5C2atP

U. [Accessed 14 December 2018].

10. Skeleton: Responsive CSS Boilerplate. 2018. Skeleton: Responsive CSS Boilerplate.

[ONLINE] Available at: http://getskeleton.com/. [Accessed 16 December 2018].

Page 35: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

11. W3C. 2018. Web Content Accessibility Guidelines (WCAG) 2.1. [ONLINE]

Available at: https://www.w3.org/TR/WCAG21/#abstract. [Accessed 16

December 2018].

12. Software Testing Fundamentals. 2018. Black Box Testing - Software Testing

Fundamentals. [ONLINE] Available at:

http://softwaretestingfundamentals.com/black-box-testing/. [Accessed 16

December 2018].

13. P.Dybka 2015. ERD Notations in Data Modeling. Part 2 Chen Notation. [ONLINE]

Available at: https://www.vertabelo.com/blog/technical-articles/chen-erd-notation.

[Accessed 16 December 2018].

14. David Peter Simon 2017.The Art of Guerrilla Usability Testing | UX Booth. The Art of

Guerrilla Usability Testing | UX Booth. [ONLINE] Available at:

https://www.uxbooth.com/articles/the-art-of-guerrilla-usability-testing/. [Accessed 16

December 2018].

Graphic materials:

1. Pexels. 2018. Free stock photos · Pexels. [ONLINE] Available at:

https://www.pexels.com/. [Accessed 12 December 2018].

2. Icons8. 2018. 69,300 Free Icons (SVG, PNG). [ONLINE] Available at:

https://icons8.com/. [Accessed 12 December 2018].

3. Pinterest. 2018. Aalborg storcenter kort | Maps | Pinterest | Map. [ONLINE] Available at:

https://pl.pinterest.com/pin/213076626089901909/?lp=true. [Accessed 16 December

2018].

4. Aalborg Storcenter. 2018. Aalborg Storcenter - Nordjyllands største shoppingcenter.

[ONLINE] Available at: https://astc.dk/. [Accessed 16 December 2018].

7. Appendix

7.1. Closed Card Sorting

Structure of the navigation:

Page 36: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

My list Deals Map Profile

Add new product Information about discounts

Map of the Storcenter User information

Delete a list Information about deals

Log out

Delete a product from my list

Magazine with new offers

Navigate from specific product to the store

Content:

● Add new product ● Delete a list ● Delete a product from my list ● Navigate from specific product to the store ● Information about discounts ● Information about deals ● Magazine with new offers ● Map of the Storcenter ● User information ● Log out

Test 1

My list Deals Map Profile

Add new product Add new product (when having option to choose from deals)

Map of the Storcenter

Delete a list

Delete a list Information about discounts

User information

Delete a product from my list

Magazine with new offers

Log out

Navigate from specific product to

Information about deals

Page 37: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

the store

Content:

● Add new product ● Delete a list ● Delete a product from my list ● Navigate from specific product to the store ● Information about discounts ● Information about deals ● Magazine with new offers ● Map of the Storcenter ● User information ● Log out

Test 2

My list Deals Map Profile

Add new product Information about discounts

Map of the Storcenter User information

Delete a list Information about deals

Log out

Delete a product from my list

Magazine with new offers

Navigate from specific product to the store

Content:

● Add new product ● Delete a list ● Delete a product from my list ● Navigate from specific product to the store ● Information about discounts ● Information about deals ● Magazine with new offers

Page 38: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

● Map of the Storcenter ● User information ● Log out

7.2. Think aloud tests - Sketches

Interviewer: Paulina Bakalarz

Interviewee: Joseph Byiringiro

Test 1

1.

A: Hello! We would like to thank you for agreeing to participate. Before we begin, do you agree

with us recording this user test?

B: Yes

2.

A: The test will be fairly easy, we’d like to ask you some questions about what are your thoughts

when navigating on our website. The questions will have the form of simple tasks for which you’ll

have to say out loud what do you think when going in the different areas and how do you get

there.

B: Ok.

3.

A: Let's say you want to create a new user in the app, how would you do that?

B: I would access create account page by clicking on the button on login page.

4.

A: Now please imagine that you want to create a new shopping list and add there a new

product, how would you do it?

B: I would access list from navigation, If there is that button with plus there, I would probably

click on it to add a product.

5.

A: What would you do if you would like to check in which shop you can find that product?

B: In product info? (not sure)

6.

A: Let’s say that you want to see the sales. Where would you go to actually see them?

B: I press sale on navigation bar.

Page 39: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

7.

A: If you could move anything from the app, what and where would that be?

B: How about adding map to the product information, so you can scroll and see it right away.

8.

A: Along the process, did you feel like there’s something missing? If yes, can you identify it?

B: You could have a big map, where you would have the pins of all shops that are related to the

products that you chose. However, if you would choose to many, it could cause confusion and

clutter.

9.

A: Do you have any questions you would like to address us?

B: No, thank you.

A: Thank you! We will contact you in the near future.

The user had difficulties navigating around and understanding the flow of application at

first glance, since the sketches were not so detailed and was introduced to the them very

briefly before the test.

Interviewer: Bologa Bogdan

Interviewee: Toader Morosan

Test 2

1.

A: Hello! We would like to thank you for agreeing to participate. Before we begin, do you agree

with us recording this user test?

B: Yes

2.

A: The test will be fairly easy, we’d like to ask you some questions about what are your thoughts

when navigating on our website. The questions will have the form of simple tasks for which you’ll

have to say out loud what do you think when going in the different areas and how do you get

there.

B:Cool

3.

A: Let's say you want to create a new user in the app, how would you do that?

B: I would go to sign up link and put my information there, then log in with the credentials that I

inserted

Page 40: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

4.

A: Now please imagine that you want to create a new shopping list and add there a new mouse,

how would you do it?

B: I would go to the list with the products and then add the product by clicking the button where

it says “add to list”

5.

A: What would you do if you would like to check in which shop you can find that product?

B:I would go to the specific product page

6.

A: Let’s say that you want to see the sales. Where would you go to actually see them?

B:I would go to navigation and press the button “Deals”

7.

A: If you could move anything from the app, what and where would that be?

B:I wouldn’t move anything

8.

A: Along the process, did you feel like there’s something missing? If yes, can you identify it?

B:I would add a map section where you can see all the shops

9.

A: Do you have any questions you would like to address us?

B:No.

A: Thank you! We will contact you in the near future.

7.3. Think aloud tests - Wireframes

Interviewer: Paulina Bakalarz

Interviewee: Joseph Byiringiro

Test 1

1.

A: Hello! We would like to thank you for agreeing to participate. Before we begin, do you agree

with us recording this user test?

Page 41: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

B: Yes

2.

A: The test will be fairly easy, we’d like to ask you some questions about what are your thoughts

when navigating on our website. The questions will have the form of simple tasks for which you’ll

have to say out loud what do you think when going in the different areas and how do you get

there.

B:

3.

A: Let's say you want to create a new user in the app, how would you do that?

B: I would press on the Create an account link.

4.

A: Now please imagine that you want to create a new shopping list and add there a new mouse,

how would you do it?

B: I click on the big plus button, then I see categories with Technology category, which I click. I

see screen with product details and button add to the list, which I would press.

5.

A: What would you do if you would like to check in which shop you can find that product?

B: If I want to find one specific product I would click Navigate button, however I would expect if I

go to the map to see all of the shops related to my products highlighted with pins.

6.

A: Let’s say that you want to see the sales. Where would you go to actually see them?

B: I would click Sale button from navigation.

7.

A: If you could move anything from the app, what and where would that be?

B: No, I would not. It is fairly understandable for an average user.

8.

A: Along the process, did you feel like there’s something missing? If yes, can you identify it?

B: No, nothing.

9.

A: How easy was to fulfill given tasks? Do you recognize any issue or a thing that could be

improved in the flow of the application?

B: Well… I would not find it convenient to be forced to log in any way and give my personal

information just to see the products, browse through the app. Maybe you could think of allowing

user to choose if they would like to login or not.

10.

Page 42: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

A: Do you have any questions you would like to address us?

B: No, I dont, thank you.

A: Thank you! We will contact you in the near future.

Interviewer: Bogdan Bologa

Interviewee: Toader Morosan

Test 2

1.

A: Hello! We would like to thank you for agreeing to participate. Before we begin, do you agree

with us recording this user test?

B: Yes

2.

A: The test will be fairly easy, we’d like to ask you some questions about what are your thoughts

when navigating on our website. The questions will have the form of simple tasks for which you’ll

have to say out loud what do you think when going in the different areas and how do you get

there.

B:Ok

3.

A: Let's say you want to create a new user in the app, how would you do that?

B: I would go to the create a new user and put my credentials there

4.

A: Now please imagine that you want to create a new shopping list and add there a new mouse,

how would you do it?

B: I will click on the “plus” button and then go to the products, find the mouse and add it to the

list through the button next to it

5.

A: What would you do if you would like to check in which shop you can find that product?

B: I would go to the specific product, add it to the list and then press “navigate” button. I would

expect that it will open the map and redirect me to specific shop

6.

A: Let’s say that you want to see the sales. Where would you go to actually see them?

B: Sales button from the navigation

Page 43: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

7.

A: If you could move anything from the app, what and where would that be?

B: No, I wouldn’t

8.

A: Along the process, did you feel like there’s something missing? If yes, can you identify it?

B: No, nothing.

9.

A: How easy was to fulfill given tasks? Do you recognize any issue or a thing that could be

improved in the flow of the application?

B: It was pretty easy, i think that the user experience it’s quite good

10.

A: Do you have any questions you would like to address us?

B: No

A: Thank you! We will contact you in the near future.

7.4. Think aloud tests - Mock-ups

Interviewer: Paulina Bakalarz

Interviewee: Joseph Byiringiro

Test 1

1.

A: Hello! We would like to thank you for agreeing to participate. Before we begin, do you agree

with us recording this user test?

B: Yes

2.

A: The test will be fairly easy, we’d like to ask you some questions about what are your thoughts

when navigating on our website. The questions will have the form of simple tasks for which you’ll

have to say out loud what do you think when going in the different areas and how do you get

there.

B: Ok.

3.

Page 44: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

A: Let's say you want to create a new user in the app, how would you do that?

B: I sign up, fill the form out.

4.

A: Now please imagine that you want to create a new shopping list and add there a new mouse,

how would you do it?

B: I click the big plus icon, I search for the category - Technology. I see a collection of mice, I

click that one (clicks on the screen). I see more information about it, I click button at the bottom.

Oh, there is confirmation that I added it.

5.A: What would you do if you would like to check in which shop you can find that product?

B: Hmm, I will click that navigation button.

6.

A: Let’s say that you want to see the sales. Where would you go to actually see them?

B: I would access that from navigation. Is it going to be like a magazine?

7.

A: Yes, that was the idea. How would you access your personal information stored in the profile,

how would you log out of the app?

B: I would click the Profile icon at the top, now I see my information and here I can click log out.

8.

A: If you could move anything from the app, what and where would that be?

B: Nothing I can think of, as for now.

9.

A: How easy was to fulfill given tasks? Do you recognize any issue or a thing that could be

improved in the flow of the application?

B: The tasks were fairly easy. I do not see any issues.

10.

A: Along the process, did you feel like there’s something missing? If yes, can you identify it?

B: Again, nothing I can think of.

11.

A: What do you think about the design of the app?

B: It looks nice overall. I like the map, it looked nice. I look at the icons and the text underneath

together because the icons can be misleading, but in this case they were okay. The sections in

categories could have lower height, since it looks like a waste of space and a lot of scrolling. I

could replace List icons with Basket, unless the list is supposed be like your future wishes. The

navigation icon in the list was not so clear and maybe too small for my liking.

Page 45: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

12.

A: Do you have any questions you would like to address us?

B: No thank you.

A: Thank you! We will contact you in the near future.

As it turned out after the interview it was not so clear for the user that he can’t make

purchases in the app at some point. He thought that it could be possible in some later

steps.

Interviewer: Bogdan Bologa

Interviewee: Toader Morosan

Test 1

1.

A: Hello! We would like to thank you for agreeing to participate. Before we begin, do you agree

with us recording this user test?

B: Yes

2.

A: The test will be fairly easy, we’d like to ask you some questions about what are your thoughts

when navigating on our website. The questions will have the form of simple tasks for which you’ll

have to say out loud what do you think when going in the different areas and how do you get

there.

B: Ok.

3.

A: Let's say you want to create a new user in the app, how would you do that?

B: I will sign up through the form

4.

A: Now please imagine that you want to create a new shopping list and add there a new mouse,

how would you do it?

B: I will click on the “plus” icon, then go to categories, select the mouse that i want to buy and

then press the button “add to list”

5.A: What would you do if you would like to check in which shop you can find that product?

B: I will click the navigation button

6.

A: Let’s say that you want to see the sales. Where would you go to actually see them?

B: I would go to “deals” button from navigation

Page 46: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

7.

A: Yes, that was the idea. How would you access your personal information stored in the profile,

how would you log out of the app?

B: I would click on the icon on top right, and i expect that there is a logout button

i

8.

A: If you could move anything from the app, what and where would that be?

B: Nothing for the moment

9.

A: How easy was to fulfill given tasks? Do you recognize any issue or a thing that could be

improved in the flow of the application?

B: It was easy, i don’t think that needs improvement

10.

A: Along the process, did you feel like there’s something missing? If yes, can you identify it?

B: Nope

11.

A: What do you think about the design of the app?

B: It looks really nice, i like a lot the colors that you used. I like the fact that it’s easy to use and

there are visual representations that helps the users along the process, like icons for example.

The position of the navigation it’s alright and easy to access.

12

A: Do you have any questions you would like to address us?

B: No.

A: Thank you! We will contact you in the near future

7.5. Qualitative interviews

1st interview

1. What is your name? How old are you? Where do you live? What is your occupation?

- Joseph, 23 years old, live in Norresundy. Student.

2. Are you online or traditional shopper?

- Online shopper.

2. Are you using any mobile apps?

- Yes, I am.

Page 47: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

3. Are you using any shopping apps, newsletters, discount apps?

- No, I am not, I mainly use websites for that. But I have used Burger King and McDonald

apps for a discount in the past though.

4. Where do you spend your time online? LinkedIn? Facebook? Instagram?

- Youtube and I guess Facebook to some degree, if it has to be

social network.

5. Where do they go to get their information(sales, events)?

- I usually look them up, if there is an item I am interested in, I go and see the price, price

drop, so I see the most accurate price for the product – like trough Pricerunner. (online)

6. Have you ever used the official app of Storcenter/have you ever been there? if yes or

no why?

- Yes, I know, I have been there of course.

- No, I never knew they have an app.

7. Which parts of the traditional shopping process do you like and dislike?

- I hate the type when I am getting dragged around by my girlfriend, but I enjoy the part

when I can look at what I want to look at, I don’t know… (laugh) When I am in control.

8. When you download app, do you prefer to login with your gmail/facebook or create

new account

- I don’t like to remember all my passwords and s*it like that, so I mainly just login use on

everything with Gmail. I also heard it is more secure.

9. Are you anyhow preparing before you go to the store? Checking

sales and products

- No, I feel like going to store gives a sense of adventure, I go there without knowing the

unknown and experience the feeling of: “oh, look, sale! – that kind of feeling. I enjoy surprises.

Sometimes there a good surprises, sometimes there are bad ones – especially, when there is

no sale on the item that I want.

10. *So would you say that having an app or a possibility where you

could check if the sales are actually available. Would that be useful?

Page 48: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

- It would be useful… but I am not so sure if I would use it often.

11. Have you ever been to Storcenter and had problems navigating

around? How did you solve your problem.

- Oh, yes I have! Because even though every shop mall has its items placed like, this

should be here, that should be here depending on season, marketing and stuff like that,

sometimes shopping malls are too different, so sometimes it is confusing to navigate around.

12. But when you had problems how did you solve them?

- I gave up… (laughs) No, it depends, I can’t think of it now, but I guess I just walked

around as it was a labyrinth and hopelessly trying to find it.

13. What features would you find useful in shopping center app.

- If you can customize the feature that actually pops up on your screen, like, because

people are different, so of course, they will have to use some data about me as an individual,

like for example Facebook does, only shows stuff that I have seen before or I looked up. If

maybe I was going to Storcenter and I open the app then I probably would want to only to see

stuff I want to see and not only ads of all the other stuff, because Storecenter is quite big and

there is a lot of stuff that I think would be irrelevant for me and few stuff that I am actually

interested in. So, if you are able to customize the parts you are interested in... If I am interested

in technology I would expect that my main screen would be more suited for that. Like with sales,

discounts and such.

14. Do you think that people from Aalborg are familiar with storcenter.

- Oh, definitely yes. Because it is the biggest here in the north and it is a neighbor to Bilka,

so.. and everybody knows Bilka. Even people who are not from here, because Bilka is a chain

store.

15. Do you think online map of the store would be useful?

- It depends… But yes, I guess it could, but wouldn’t it be better to have some posters

hanging around, like “here I am” in pretty much every corner? I think that probably that would

also be cheaper.

2nd interview

Page 49: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

1. What is your name? How old are

you? Where do you live? What is your occupation?

Marius Juscius, 24, city center Aalborg, student

2. Are you online or traditional

shopper?

Sometimes I buy stuff online when particular items I need or want are not available in the region.

Otherwise I prefer traditional shopping.

3. Are you using mobile apps? If

yes what kind of apps?

Yes, I use informative app like Reddit, Stackowerflow and Safari. I also use social media like

Facebook and Instagram or Youtube.

4. Do you use any kind of shopping apps, newsletters, discount apps?

In particular I’m not using any kind of specific shopping apps but I use PS Store and App Store. I

also tried Sweatcoin app but I didn’t really use it.

5. Where do you go to get

information about sales and events?

The thing is that I never search for sales. If I do its Google.

6. What about events? How do you usually find out that something is happening?

Trough Facebook events.

7. Have you ever used the

official app of storcenter?

No.

8. Why you never used it?

I don’t see a need.

9. Which parts of the traditional shopping process do you like and dislike?

I like to see item that I’m interested in buying in physical form for example clothes to try them on,

electronics in general... I can’t think of anything that I don’t like.

Page 50: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

10. When you download app, do you prefer to login with your google/facebook or create

new account?

I prefer to login with my Google account because it’s fast.

11. Are you anyhow preparing

before you go to the shop?

Depends on what I’m buying. If I’m interesting in particular items like electronics I check the

reviews first. If I go casual grocery shop and I know what I want to cook I just go and buy.

However when I don’t know what to cook I check online recipes.

12. When you’re planning to go to

shop are you checking sales and products?

No. I check the discount on the spot because some of the shops might be out of the item while

having in different city store. For example elgiganten might have the item available in Aarhus

while in Aalborg it’s sold out.

13. Have you ever been to

storcenter and had problems navigating around?

Sometimes I do.

14. How did you solve your problem?

I just walk around or I search for the map.

15. What features would you find useful in shopping center app.

I would say the map. You open the shopping app and you can see your location with shop, real

time map showing you the location. Also when searching for particular item in its category I

would appreciate small popup of particular category discounts instead of random add. For

example when I’m searching for laptop I would like to see small popup with laptops in sales

16. Do you think that people from

Aalborg are familiar with storcenter?

Yes I do.

3rd interview

Page 51: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

1. What is your name? How old are you? Where do you live? What is your

occupation?

My name is Ivan Georgiev. I am 22 years old and I am currently a student

2. Are you online or traditional shopper?

I am both

3. Are you using mobile apps? If yes what kind of apps?

Yes I do. Apps such as Amazon Ebay AliExpress

4. Do you use any kind of shopping apps, newsletters, discount apps?

No I am not

5. Where do you go to get information about sales and events?

Traditional shopping I see posters on the street, as for online shopping I see sales information

and advertisement mainly on facebook

6. What about events? How do you usually find out that something is happening?

7. Have you ever used the official app of storcenter?

No i have not, because I have not heard of it

9. Which parts of the traditional shopping process do you like and dislike?

I like that you can try and find a specific size and i can touch and feel the product. I dislike the

fact that most times the prices are a bit higher when I do traditional shopping, as well as the fact

that I have to spend a lot of time walking from shop to shop until I find the product I am looking

for or one similar to it.

10. When you download app, do you prefer to login with your google/facebook or create

new account?

Page 52: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

Log in with Gmail

11. Are you anyhow preparing before you go to the shop?

No when I am at the store I check if they have any special offers

13. Have you ever been to storcenter and had problems navigating around?

Some time I need to look for the map so I can see where exactly is the store I am looking for.

14. What features would you find useful in shopping center app.

Sales map and current sales

15. Do you think that people from Aalborg are familiar with storcenter?

Yes as far as I know it is a very popular shopping space here in the city

7.6. User flow

Page 53: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg
Page 54: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

7.7. Sketches

Page 55: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

7.8. Wireframes

Page 56: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg
Page 57: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg
Page 58: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg
Page 59: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg
Page 60: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg
Page 61: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg

7.9. Mockups

Page 62: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg
Page 63: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg
Page 64: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg
Page 65: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg
Page 66: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg
Page 67: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg
Page 68: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg
Page 69: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg
Page 70: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg
Page 71: 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The development team is assigned with the task to create web solution for the customers of Aalborg