1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The...
Transcript of 1. Introduction · 7.7. Sketches 54 7.8. Wireframes 55 7.9. Mockups 61 1. Introduction The...
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
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;
- 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.
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
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.
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
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.
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.
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?
● 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
● 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:
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
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.
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
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
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
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
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
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
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
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
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.
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.
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
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.
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
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.
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
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.
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.
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.
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:
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].
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:
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
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
● 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.
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
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?
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.
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
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.
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.
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
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.
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?
- 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
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.
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
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?
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
7.7. Sketches
7.8. Wireframes
7.9. Mockups