Essay: Highend Recycling

Project
Formulation
Problem statement:
The company Tingfinderen, is
a Danish company that was
established this year (2015). It
recycles Danish design pieces,
typically ones with a historical
value, and reconstructs them to fit
into the modern homes. These are
unique pieces – one of a kind.
The owner, Tobias Hinchely
Pedersen, has a love for interior
design and wine. He wants to
combine the idea of selling
delicious, imported, and not too
expensive wines, while also selling
these recycled and renovated
pieces that he refurbishes. The
merging with Tyskenhavn will
make his dream come true,
Tyskenhavn already makes use
of the concept that you can buy
everything you see in their bar –
even the chair you are sitting on
while you sip the wine you just
bought.
The merge requires a redesign
of identity, logo, homepage, and
social media strategy.
Tingfinderen is expanding and
merging with the company
Tyskenhavn.dk which is both a
winery and a showroom. However,
they have no combined identity
and logo and they do slightly
different things. In the terms
of our project, the problem is
focused on redesigning the
identity, logo, homepage and
social media strategy only for
Tingfinderen. As an addition –
providing a web shop with the
possibility for ordering products
online, which is currently not an
available option on their existing
website.
‘ Problem Description:
On the Danish market there is a
sudden increase in demand for
old renovated pieces of design.
As people nowadays are looking
more and more for innovative
ideas, and sustainable solutions,
Tingfinderen is a very good
example of a successful business.
The renovated old city lamps really
grew on the Danish people so
much, that the company needs to
refurbish other products.
A big problem that the company
is facing is the lack of visuals and
not so many materials on the
existing website. In a world of
technology, internet is the most
used media. The website must
display clearly, large amounts of
information, necessary to make
an immediate impression to
the potential customers. Being
a business which really focuses
on a certain niche market, the
marketing strategies should be
flawless. Although the consumers’
demand is high, the overall niche
market is small. A good marketing
strategy could multiply the
number of customers many times.
‘ Problem Definition:
How to improve the company’s
marketing strategies and attract
more customers and Facebook
4
followers, implementing niche
marketing techniques in regards
to the target group analysis?
How to use design principles
and web development to build
a website which showcases the
above mentioned strategical
guides?
‘ Limitations and consequences
for solving the problem:
We will limit ourselves to making
a webpage only for Tingfinderen
with a connected database
responsible for their webshop.
The online store will not have login
and search functionalities. We
will also provide a social media
strategy, a visual identity (only
logo design) and ensure that
consistency exists across mediums.
We make use of the agile
development method called
SCRUM, which requires sprint
planning and generates
burndown charts as a progress
and success – tracking tool.
Product Breakdown and Work
Breakdown Structures are used to
define project goals and tasks.
To discover and define
stakeholders, we make use of
Grunig’s linkage model and the
Power/interest grid. Target group
will be defined through use of
Segmentation, Targeting, and
Positioning plus conversations
with the owner’s experience of
customer base. The risk analysis
table is used also at the planning
and researching stage.
User and Gangster tests will
be used for usability testing on
the finished product and test
cases will be written to evaluate
functionality sufficiency, but
budget estimation will not be
taken into account.
Theories
Principles of design
1) Gestalt laws:
Proximity: If the objects are closer
to each other they are most likely
to be percepted as a group.
Similarity: Objects that are similar
with matching components
are more likely to be organized
together.
Continuation: If the objects are
following the same line, they will
be grouped as a whole.
Figure and ground: there should
always be clear differentiation
between an object and a surface.
2) The rule of thirds:
The rule of thirds states that if
we draw imaginary vertical and
horizontal lines, which divide
our composition into nine equal
squares, we can achieve strong
results by positioning the objects
of our compositions along those
lines. This rule can be applied to
any graphics or layouts, in order to
emphasise elements and improve
the way our compositions look. By
using the rule of thirds, we can set
the points of interest by placing
them along the lines which divide
our screen into thirds.
3) Other methods, used in order
to achieve minimalist overall
webpage design:
5
Alignment: to keep everything
spaced, equally-distant with
a sense of uniformity. We
accomplish that rule’s goal by
using grids when designing
graphical elements and
developing the webpage, in order
to keep every piece arranged
in line with equal spacing. That
gives us control over the way we
represent the objects and avoid
chaos in the way our product gets
viewed by the observer.
Contrast: to distinguish different
elements which do not belong
together, in order to attract
attention to specific ones and
get control over the viewer’s first
impressions we used contrast
to communicate the hierarchy
of information and the ideas we
wanted to stress on as highlighted
visual representations (graphics).
White space: to use white space
is the advantage of creating clear
aggregation. This rule orients our
focus on the art of using simple
white space to let the page
‘breathe’ and therefore knowingly
avoid overcrowded groups of
objects and overwhelming for
the observer’s eye experience of
exploring the contents.
Balance: in the way different
elements are placed on the
webpage there should always be
balance. When we were going
through the process of web design
planning, one of the main tools
helpful to come up with right
decisions and also stick to the
basic minimalist movement we
chose to follow, was the principle
of balance. There are two ways
it can be achieved: by the usage
of symmetrical in their weight
elements (symmetrical balance on
both halves of the webpage) or by
the usage of contrasting elements
to achieve asymmetrical balance.
The second subtype of this
principle is based on the fact that
darker colors always stick out and
create focal point for the viewer
when viewed in comparison to
lighter colors (can be used with
one or even more different light
colors for sharper effect).
6
Color Theory
Color theory is an extensive set
of definitions and conceptual
guidelines which are extremely
useful in organizing visual
structures. This theory consists of
numerous rules and knowledge
in choosing the most appropriate
colors for the purposes of visually
appealing design with certain
effect over viewers. The most
useful for our project are:
– Color harmonies
– Color meaning
– Color wheel – primary, secondary
and tertiary colors
Design Manual
Or described differently –
documentation of the design, is a
brief description of basic sections
of the design work which a certain
product/project acquires. Design
manual normally defines basic
ideas implemented in typography,
color schemes, icons, logo design,
graphical elements and more. It
serves as a guidebook in project
reports for people who are able
to review final results (like in the
case of our project – the webpage
we created) and give them good
overview of the reasons behind
those particular graphical results.
It’s really useful as a part of the
documentation as a description
of design concepts and decision –
making.
Usage Rate
Usage rate segmentation we
used as a part of behavioral
segmentation criteria for target
group analysis. It basically defines
how often users are using the
product we offer and according
to that value, customers can be
included in one of three main
groups: non-users, light, medium
or heavy product users. Those who
are regularly purchasing particular
product are likely to indicate high
usage rate and be described as
heavy product users.
Stakeholder analysis
Stakeholder is anyone, who
has influence or is somehow
influenced by an organization.
To analyze the stakeholders,
means to use specific tools:
existing practices and models, in
order to make a list of all of the
stakeholders and differentiate
their actual power according to
specific criterias.
‘ Grunig’s linkage model:
this model helps the organization
separate the groups of
stakeholders according to the
way they’re linked (connected
by specific level of influence and
connection) to it. The linkages
between any stakeholder and
given organization are four:
enabling, functional, diffused and
normative.
PBS and WBS:
Product breakdown structure
is a project management tool,
which focuses on the product
deliverables required for a project
7
to be successfully developed. It
looks like a ‘tree’ diagram, which
breaks down what has to be
delivered as products. We use
PBS during the planning stage
of our project management
process, because it gives good
and complete overview of product
packages and therefore allows
easier tasks’ assignment among
team members. The next project
management tool, used to define
the actual work flow is called WBS
‘ Work breakdown structure. WBS
focuses on work outputs and what
has to be performed in order to
have all project products delivered
and tasks accomplished.
Burndown Chart:
A burn-down chart is a diagram,
which gets generated as a result
of sprint planning in SCRUM
and some other agile project
development methods. It can be
generated at the end of all sprints,
or for individual sprints separately.
The chart has two axes: amount
of tasks (story or story points)
and amount of days. As a result
of using sprint planning spread
sheet, the chart represents two
lines:
‘ Ideal line: shows the ideal
scenario of completing all tasks
for the days of the sprint
‘ Actual line: shows the actual
amount of work during
this sprint which has been
completed
Burndown chart helps to track
what progress has been achieved
for a project, easily displays what
still has to be done and therefore
is a helpful tool for identifying
possible future improvements for
better results.
ER Modeling:
Er modeling is a data model
mainly used in software
engineering for describing the
data or information aspects that
will end with a database. An ER
model has 2 main components,
entities and relationships.
In our case, we created an ER
Model to define all the entities
that will end up in our database,
for the needs of the web shop.
Risk Analysis
The risk analysis is a method
to test the chances that the
company might go wrong. The
general risk analysis can be
divided into two components: risk
assessment and risk management.
The first one refers to identifying
and measuring what the problem
might be, whereas, the second
one refers to actually solving the
issue. During this project, we used
risk analysis methods to decide
where and why can we get stuck
and tried to exclude those risks
and solve them.
8
Analysis
Stakeholder Analysis
We used Grunig’s linkage model
to separate the most important
stakeholders into 5 main
sections, depending on their
influences for the business, its
success, opportunities and future
development. It is essentially
important for the company’s
strategies and decisions to take
into consideration the link built
between the organization and
each individual stakeholder. Only
then it is possible to build the
strategic plan accordingly and
expect future support in times of
crisis, like capital and resources
contribution in the intensively
changing business environment.
The results of our methodology
are presented below:
1) Normative linkage:
Competitors:
‘ Danish Team Classics
(Minneapolis) ‘ international ‘
Danish furniture renovation
‘ Elliott & Tate (London) ‘
international ‘ Danish furniture
renovation
‘ Hacke Artcare ‘ Aarhus
‘ Lappemarkets on facebook:
Mini Loppemarket for Viby J og
omegen.
‘ Dba.dk ‘ webshop portal
‘ Yearly, monthly available
Lappemarkets in Copenhagen,
Odense, Sdr. Jylland
Professional societies: Interior
Design ‘ Denmark; Ecological
societies; Wine experts; Design
experts
2) Enabling linkage:
Government regulators:
‘ A main part of the business
deals with purchasing old
lamps from the Danish
government as they get
replaced by new ones.
9
The company has to operate
in regards to the existing
governmental regulations, as well
as future limitations.
Stockholders and boards of
directors:
‘ Tyskenhavn
‘ Tingfinderen
3) Input:
‘ Employees: CEO; bar staff;
winery and showroom
salesmen;
‘ Suppliers;
4) Output:
‘ Consumers: buyers ‘ online via
ordering or physical visitors
5) Diffused linkages:
‘ Media: facebook;
The tool we use to define each
stakeholder’s influence, interest
and powers over the association
is the Powerinterest grid. Having
the division into four main
stakeholders’ places shown on the
grid is very important for decision
– making and planning.
10
Target group analysis
‘ STP process:
We followed process of three main
steps – Segmentation, Targeting
and Positioning, or shortly called –
STP method. We find helpful the
advantages this tool offers for a
business:
– successful selection of main
customers’ characteristics,
depending on groups of diverse
factors
– going for a specific marketing
strategy of how these specific
groups of customers have to
be aimed at in the company’s
business strategy
– building positioning strategy on
the market when looking broadly
towards the competition’s main
features, proceeding positive
customer’s opinion and clear
differentiation from the powerful
competitors
1) Segmentation:
Demographic segmentation:
‘ Age segmentation: people
above their 20-ties
‘ Income segmentation:
customers with high income
are the main target audience
for the company, according to
the prices set for the interior
design products as they’re
unique and custom-made.
Social class segmentation:
segment of customers who are
interested in interior, decorating,
this includes both modern
couples and individuals; wine
lovers; environmentalists
Geographic segmentation:
‘ Country ‘ Denmark; Regions
– Copenhagen, Odense and
Aarhus
Psychographic segmentation:
‘ Lifestyle, interests, attitudes:
the main target the company
focuses on is the segment of
customers with high interest in
unique and beautiful products
designed with reused materials
that nobody else would use.
As the company’s CEO himself
describes the characteristics of
his products: ‘beautiful pieces
with a lot of history’.
2) Targeting:
Concentrated or niche targeting
involves going after larger
share of specific segments of
customers. After the first step of
segmentation, we know which
individual target audience
segments the company focuses
on and our market strategy
targets them. Going after specific
segments which the business
relies on means that we need to
develop and constantly update
knowledge in these segments’
needs, wants and interests.
We have to meet their wishes
and communicate company’s
ideas through the right tools via
marketing strategy design, visual
identity, offers and vision. We
also have to know which selling
strategies we want to use in
order to evoke awareness among
users about the uniqueness of
the products’ quality and design,
which therefore will lead to
11
heavy product users’ rate and
regular customers who show the
tendency of heavy usage rate.
3) Positioning:
From every possible point of view
when it comes to the merging
of Tingfinderen and Tyskenhavn
there is no other company which
provides winery + showroom
for artistic interior furniture
combination. In order to win
customers and differentiate the
business from the competition,
we need to implement specific
tools on the way of increasing the
profitability:
We want to communicate clearly
the message of uniqueness
through webpage, facebook
page and implement successful
marketing strategy. For that
purpose we focus efforts into
establishing uniquely looking
website and visual identity, which
implications result into immediate
recognition and association
with the unique products at the
showroom, environment at the
winery and also the message
we’re sending out. That can be
done by qualitative and precisely
planned design choices that
work for the business’ success
just instantly. What can be easily
noticed when reviewing any of
the competitors’ websites is a
lack of graphic design principles
and customization for better
presentational effect. It’s obvious
that there is not dedicated time
in the right amounts in order to
build strong visual representation
‘ and as we all know: ‘It is only
shallow people who do not judge
by appearances’-Oscar Wilde.
What makes tingfinderen +
Tyskenhavn different is the matter
of the business, which is extremely
rare and valuable. It has personal
touch in its outcomes and
atmosphere but is also oriented
towards people who care about
environment. We go one step
ahead by providing eco-friendly
products at the showroom,
which use recycled materials,
and transform our customers’
everyday life into extraordinary
experiences. This experience is
complimented by the high-quality
wine selections available at the
winery at affordable prices. We
definitely want to use these facts
as our advantage, implementing
them in the way we communicate
with customers, provoking their
needs and wants to visit the bar,
enjoy the environment, buy and
recommend the products.
Message:
Every business needs a
communication message ‘
expression which serves as
company’s slogan and main role is
to provoke customers’ recognition
immediately. After our target
group analysis we chose the right
message to be sent to the defined
group of audience and it is:
‘For the unique home with unique
taste…’
12
Risk Analysis
Risk Mitigation Probability Impact
Cost
The primary target group is everyone
passionate about design or old/vintage
furniture. This doesn’t necesarry mean a
high income, which means that the prices
can be reduced a bit. Although, that could
lead to the possibility of managing to
keep the business running.
Go into the market with lower
prices which may attract more
clients and overall a bigger
profit.
Investors
Medium High
Demand
There is a chance that people might not
be interested in the company’s products
and not willing to pay for any piece of
design
Advertising
Explaining what are the
advantages
Low HIGH
Business
At the moment, being a small company
might mean that they won’t be able to
deal with a sudden increase in the
demand.
Hiring more people in case of
increasing demand.
Merging (which they will) with
another company.
Medium High
Legal
Problems can appear in the webshop.
Some orders not being proccessed or
delivered.
Someone managing the
webshop, making sure that
everything works properly and
the products are delivered. Low Medium
Competitor
Someone might try to sell the company’s
products at a higer prices
Do a very good job associating
this type of products with the
company, so it will be
unmistakable where they came
from
Little signature as a small
carving somewhere.
Medium Medium
People
Expectations from customers VS what
they actually get for their money might be
off so that they are not satisfied with the
product.
We can prevent this by having
an elaborate webshop. Every
product should have a lot of
photos in the description.
Also, a return policy so they
can return the product and get
their money or another product
instead. In this way the
company can keep their
customers happy and make
them want to buy some more.
High High
13
Quality
Assurance
The quality plan encompasses
both project quality and quality of
deliverables.
Project quality is achieved by using
the right project management
tools.
We are making use of the agile
management tool SCRUM, sprint
planning, and burndown charts.
Quality of deliverables is about
how well the deliverables meet
the user’s needs. We need to
involve the user here by testing
the product to make sure we
are not using jargon that isn’t
understandable by the user.
In order to create a good quality
plan you need to identify all the
deliverables and then find out
what the best ways are to validate
these deliverables.
You basically need to determine
what needs to go through a
quality check, what the best way
to check the quality is (quality
event), when the quality check
should be done, who should be
part of the quality check and what
quality materials you want to use.
(Turbit 2005)
We started off the project by
Deliverable Quality Event Quality Material Purpose
Project Definition walk-through of project
formulation template make sure we are on the
same page.
Report Peer Review of final
report
standards, example
documents & procedures
look for gaps, spell
mistakes and overall
understanding
non-functional
requirements
Multiple person
Review check list
ensure that there is
agreement about
requirements
Database design Expert Review
Standard for database
design (Normal forms
and entity relationship
model)
Accuracy of ER-model
before building database
and content
website walk-through process, example
documents & standards
ensure that website
complies to best standards,
validates and works as
intended
logo, colours,
typography peer review User guides & standards
to make sure it complies
with design laws and has
good reasoning
user tests Multiple person
Review Procedures ensure correct structure
and content
target group-,
stakeholder- & risk
analysis
peer review User guides
ensure it complies to
relevant theory on the
subject and follows correct
structure
Sprint planning &
burndown charts peer review templates and example
documents
ensure it is done correct
according to template
Social Media
Strategy peer review user guides compliance to relevant
theory
Design Manual Multiple person
Review standards and templates Correct format, content and
structure of content
14
making a Work Breakdown
Structure(WBS) and a Product
Breakdown structure(PBS) this
way, we immediately identified
our deliverables.
To ensure quality of our
deliverables through quality
materials we complied to
standards in design and usability,
used templates for sprint planning
and burndown charts, and used
checklists for non-functional
requirements and wrote test
cases. We used procedures to
manage risks and example
documents in the form of previous
projects.
The quality of a deliverable is
typically checked just before the
deliverable is completed. You
can check the quality by use of
a quality event as for example
Expert Review.
Methodology
Our team decided to choose
already well ‘ known development
method, which is one of the Agile
development methods, due to
its basic practices we recognize
as advantages in the terms of the
given project matter. Some of the
most important upsides we found
as a result of the methodology
adoption during our working
process are:
1) Focus on self-organizing team
with cross-functionality and
commitment
2) Clear project iterations’ division
with specific, stated initially
duration which has to be followed
strictly by the development team
(using sprints as equal time boxes
which breakout tasks from the
backlog)
3) Possible adoption to change at
each stage
4) Possibility for working online
in order to develop set outcomes
and having face-to-face meetings
to communicate outcomes
quality, assign new tasks and plan
each sprint together as a team
5) Efficient workflow, which starts
with sprint planning whereas
sprint goal is stated, continuing
with actual working process to
deliver the goal and finishing with
reviews and testing to identify
future improvements
6) Focus on fully completed
product as an outcome of each
sprint, which has a good effect for
the time management
7) Gives freedom and
visibility to the team to: define
priorities and breakdown tasks
according to set goals; execute
meetings and develop reports
to document limitations which
might slow down the flow of
work accomplished within each
sprint; make reviews and improve
techniques in order to get better
results for the next iteration;
8) Provides graphical
representation of reached results
(Burn-down chart)
*Please, see appendix #2 for
a more details about sprint
planning process.
15
Brainstorming
16
PBS and WBS
17
Usability
Websites’ usability determines
how user – friendly and easy to use
a website is. In order to be desired
online destination, a webpage
should offer pleasant experiences
and satisfy specific goals users
have efficiently. Therefore usability
should be in the agenda from
the planning process when
developing a webpage.
Our team followed some
important principles, in order
to meet usability basic criteria
for webpage that is structured
properly and designed
appealingly:
1) Consistency and simplicity
2) Levels of hierarchy
3) Use of white space
4) Interactivity, efficiency,
functionality
5) Efficient error prevention
6) Minimalist design ‘
aesthetically beautiful
Having these points of
consideration before starting the
actual coding is always a good
idea. It makes it possible to adjust
usability settings before, instead of
having to fix everything after the
page has been created. And as a
best practice – usability should be
a vital part of the development,
not a function that just gets
adjusted separately.
As a final measurement of the
extend to which we cover these
principles, we chose to conduct
two usability tests on the finished
webpage. Our choice was based
on the described bellow features
they allow.
Gangster test
Gangster test is a quick usability
test which evaluates the website’s
information architecture. We
chose to perform exactly Gangster
test for a few reasons. Firstly, it
indicates how user is able to
18
navigate on the webpage, find
his/her way around, understand
the meaning of elements and
provided functions. Secondly, it
gives the possibility to perform the
test on mock-ups or wireframes,
instead of finished and fully
functional website. This gives
us advantage to troubleshoot
existing gaps at early stages of the
development process, performing
the test continuously to reach
satisfying results.
The main way Gangster test has
been normally performed is by
having a user who answers the
following sequence of questions,
while looking at mock-ups of one
or several website pages:
1) Which website are you on?
2) What are the main sections
found on the website?
3) What subpage are you on?
What options do you have at this
level
4) Where are you in the overall
structure/how you get here?
5) Can you search?
The user evaluates with specific
number (from 0 ‘ the information
is not being presented at all;
to 3 ‘ the information is being
presented precisely) how clearly
the main sections are exposed
and actually help him/her point
out the answer to each of these
questions. Therefore Gangster
test is a tool which gives a grade
to the website’s information
architecture and design choices
from users’ point of view. It’s
helpful for usability evaluation
and improvement of existing
techniques to achieve better final
results.
User test
Despite the gangster test, the user
test actually evaluates the actual
experience for the user. The user
test was an option giving the fact
that it’s not resource demanding,
and having a relatively small
amount of pages in our website,
we can keep the resources low
and the time short.
The main way User testing works,
is having one or more users who
answer a series of questions
regarding the easiest method
used for achieving the task. These
are the tasks given for the user
tests:
1) Find Tyskenhavn’s description
2) Add ‘Light Granite’ to your cart
3) Find Tingfinderen’s location
10 Usability Heuristics
In order to ensure high usability
when making the interface design
of the website we need to adhere
to the 10 rules of thumb (known
as heuristics) of Jacob Nielsen.
‘ Visibility of system status:
The system should always
make the user aware of what
is happening on the website
through meaningful feedback and
within reasonable time.
‘ Match between system and the
real world:
Information should be given in
a natural and logical order, and
match the wording and concepts
that the user knows from the
real world – not system terms.
The information should adhere
19
to conventions for maximum
understandability.
‘ User control and freedom:
In the event that the user presses
something by mistake there
should be a clearly marked ‘exit
route’ that will let them get back
to a previous state without too
much of a hassle.
‘ Consistency and standards:
In order not to confuse the user,
you must use consistency across
the platform so that the user is
never in doubt whether actions,
words or situations are distinct or
similar.
‘ Error prevention:
Ensure that there are a minimum
of errors occurring by checking for
error-prone situations and limiting
them through validation.
Recognition rather than recall
Make sure that information and
actions are visible throughout the
user’s journey so that they do not
have to remember but can simply
see on the screen what they have
done, what their options are,
and that information they need
is always visible or at least easily
retrieved.
‘ Recognition rather than recall:
Make sure that information and
actions are visible throughout the
user’s journey so that they do not
have to remember but can simply
see on the screen what they have
done, what their options are,
and that information they need
is always visible or at least easily
retrieved.
‘ Flexibility and efficiency of use:
Allow the system to be both for
the inexperienced user and for
the experienced user – providing
shortcuts to speed up the process
for the experienced user and
perhaps letting this user tailor the
system so that frequent actions
are easily done.
‘ Aesthetic and minimalist
design:
Only make use of relevant
information. Every time irrelevant
information or information that is
rarely needed appears it competes
with the remaining information
making that less noticeable.
‘ Help users recognize, diagnose,
and recover from errors
Error messages should be
understandable for the user and
informative enough for them to
be able to correct the error by
proposing a solution.
‘ Help and documentation:
‘Even though it is better if the
system can be used without
documentation, it may be
necessary to provide help and
documentation. Any such
information should be easy to
search, focused on the user’s task,
list concrete steps to be carried
out, and not be too large’
Nngroupcom, J.K. (1995). Nielsen
Norman Group. Retrieved 12
December, 2015, from http://www.
nngroup.com/articles/ten-usabilityheuristics/
In-text citation: (Nngroupcom,
1995)
20
Design Brief
The customer and
his basic idea:
Tingfinderen ApS has been found
and run by the CEO – Tobias
Hinchely Pedersen. Our team
used the idea of the business
as main inspiration, the root of
the whole company’s creation.
We wanted to create a product
which is personal and desired
for our client. Product, which
reflects his own history, from the
very beginning. Getting in touch
with the CEO and learning more
about his path was helpful to
establish good goals and further
implement his own vision into our
outcomes.
‘I started Tingfinderen because
I in general like interior design.
I’ve been living in Singapore for 2
years and when I got back home I
started my own company. At start I
was selling wine and then thought
why not try to combine the two
things. Interior and wine.’
The main Tingfinderen’s products
are lamps ‘ valuable pieces of art,
which Tobias has created after
buying old, trashed from the
government lamps.
‘The lamps were selling quickly
and all of a sudden they were the
base of starting a physical store
where the sales of wine also will
be included. A living boutique and
wine bar basically.’
We wanted to stress on that
unique feature of the business
‘ purchasing old items, which
nobody would ever use for
anything and recreating them
as beautiful interior design
pieces. We call this section of our
inspiration briefly: ‘One man’s
trash is another man’s treasure’.
This saying we decided to use as
foundation of visual identity and
actual webpage and turn into
moto of our project.
‘As said above. I like to keep it
green and why thrash beautiful
pieces with a lot of history to it
when they work just fine?’
The target audience
We made our own target
audience analysis, using tools like
Analytics Denmark webpage and
STP process. Our client’s vision
gave us the main guidelines
through his own perspective:
‘My customers are everyone that
has a slight interest in interior,
decorating or modern couples
/ individuals. I only sell the stuff
I think is in. Trying to follow a
quickly developing market’
As a conclusion we can state that
we count on niche marketing
strategy, targeting both individuals
and couples at the age above
20, residing in Denmark ‘
Copenhagen, Aarhus, Odense
regions mainly, with interest in
interior design, decorating, who
care about the environment and
have high income.
21
Style and mood:
‘The style I like is as simple as
possible with a lot of focus on
pictures.’
To be as simple and clear as
possible we should focus on
actual products, real historical
value of the company and its
creation, representing the true
passion of the founder and
reflecting his own feelings when
talking about his business.
Scope and goal of
the project:
‘We will take over the world with
Tyskenhavn & Tingfinderen. (But
crazy) we have great ambitions
and our visions are even bigger.
With the sale of wine at great
prices (not comparable to any
place in Copenhagen) mixed
with the sales of ‘living interior’
we think we stand in pretty cool
grounds. We’ll be opening new
boutique bars in the near future
hopefully. Maybe franchising it at
some point.’
The CEO’s a little bit of a dreamer
when it comes to future plans
and goals. We want to create a
webpage, which communicates
the dreamer’s vision, but at the
same time do not overwhelm
the observer. Everything has
to follow the simplified main
structure and expose clear proofs
of its uniqueness. Our goal is to
complete the CEO’s intention
to ‘take over the world’ having
beautiful flat design which sends
the right messages in order to
attract attention and differentiate
from anything even slightly
related to that type of business in
Denmark.
Design manual
Typography
The choice of typeface has great
impact on the way information
which gets displayed is actually
perceived by the observer.
Therefore essential attention and
knowledge has to be dedicated
to that particular part of the
webpage design.
Type can be playful because of
the freedom it gives to the creator
with numerous possibilities and
ways to build up emotion through
pieces of words positioned on
a page. Type is also powerful,
because it allows us to send the
right message and communicate
that message with the right tone
of voice, so it gets delivered to
the audience exactly the way we
intend to represent our words. In
combination with graphics, type
is even more powerful design
trick, because it completes the
emotion one image sends to
the observer and overcomes
the limitation of having plain
graphic representations. If
applied correctly, typefaces used
in paragraphs’ and headings’
sections can enhance the visual
value a webpage possesses and
even bring its appearance to a
brand new quality level.
22
‘ Body Text
Typeface: Montserrat
Family: Sans Serif
We chose Montserrat typeface as a
main font in paragraphs’ text.
‘ Headlines – Display style:
Typeface: Minimal
Family: Sans Serif
Font weight: regular
For headlines we use Minimal
typeface, which belongs also to
Sans Serif family.
We chose typefaces matching
the website’s minimalist design
style. We followed one of the
main rules when evaluating the
correct typefaces, which states
that they should fit the design of
the elements they’ve been applied
to. In order to cover maximally the
idea of minimalist web design we
went for legible typefaces, with
clear ‘none serifs’ lines and overall
letters’ appearance that allows
us to be creative and express the
messages we tend to send the
user smoothly, achieving beautiful
final effect.
Monsterrat
Ultra Light Abc12 abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 ,.:; $?”%&@#(!)
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 ,.:; $?”%&@#(!)
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 ,.:; $?”%&@#(!)
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 ,.:; $?”%&@#(!)
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 ,.:; $?”%&@#(!)
Monsterrat
Light
Abc12
Monsterrat
Hairline Abc12 abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 ,.:; $?”%&@#(!)
Monsterrat
Regular
Abc12
Monsterrat
Semi-Bold
Abc12
Monsterrat
Black
Abc12
23
Colors
Understanding colors
psychological meaning gives
essential advantage to create
valuable graphical compositions.
Applying this basic knowledge
about colors correctly can build
the whole scene, leading the
observer to their central focus and
adjusting the mood according
to our purposes. In order to
choose pleasing color pallet for
our webpage, we used Color
theory and Colors meaning as
a part of the broad theory to be
more precise and effective in our
decisions. As we create minimalist
web design we don’t need to
build colorful page, but rather
create a flawless combination of
colors with appropriate meanings
to alter the story of Tingfinderen.
We focus on the business idea and
history as it has to inspire, then
push the user towards the need
of exploring more and as a final
result ‘ purchasing the products.
The process of choosing the colors
for Tingfinderen webpage was
complimented by mood boards
all the way through. Above are the
results of matching our own ideas
about the company with colors
implemented into graphics which
correspond to perceptions we
seek to evoke in observers:
‘Turquoise is clarity of thought and communication’
‘Brown is comfort, dependability and friendliness’
24
‘Gray is neutral, refined ‘Turquoise is clarity of thought and communication’ and contemporary’
Color pallet – HEX Codes:
25
We use analogous color harmony
to achieve easing for the eye
combinations, which set peaceful
mood and overall feeling of
comfort. Our color scheme
consists of three colors, which are
positioned close to each other on
the color wheel. They’re natural
and related to each other. As
a part of the color pallet, each
of them has specific function
in order to create pleasing,
well balanced and aesthetic
composition:
‘ Base color: Light tint of gray
(RGB: 229 228 227, CMYK:
9% 7% 7% 0%) ‘ as a basic
background color we use
desaturated gray. The main
purpose of the base color
is to contrast and serve as a
compliment to the rest of the
colors.
Color meaning:
‘Gray is neutral, refined and
contemporary.’
The creation of valuable furniture
for the contemporary home
and taste is one of the business
ideas we see as fundamental
communicator with the user.
‘ Main (dominant) color: Pale
turquoise (RGB: 202 230 229,
CMYK: 20% 1% 10% 0%) ‘ the
dominant color in certain color
pallet has the main task to give
the overall design capabilities of
defining users’ mood. Turquoise
is a vibrant color, which
conjures up cheerful emotion
and positive energy.
Color meaning:
‘Turquoise is clarity of thought and
communication.’
‘ Accent (highlight) color: Teal
(RGB: 30 108 106; CMYK: 86%,
40%, 55%, 19%) ‘ highly –
saturated color with rich and
visually strong value. The main
goal of using our accent color is
to guide the user towards the
most important elements on
the webpage. Second function
of this colors is to compete with
base and main colors of the
pallet.
Color meaning:
‘Green is balancing and reflects
nature.’
One of the unique products’
characteristics we would like
to communicate through the
website is the usage of old
items, which nobody else sees as
something rather than trash and
redesigning them into beautiful
pieces of art. This demonstrates
care about nature and balanced
way of life with the power of
unique sensibility about trashy
objects.
Icons
System icons are graphics
which show actions that can be
performed on a webpage, but
are also able to communicate
products and services values
and characteristics. Therefore we
designed the icon set, matching
company identity colors and
continuing line of visual expression
inherited in the company’s vision.
Icon grid and keylines alignment:
The icon grid we used as a
guideline in positioning graphics.
Following the grid system when
placing individual elements for
each icon’s development, we
26
achieve consistency and equally
engaging the user’s eye final
results on the screen. The main
part of the grid are keylines drawn
as containers for each icon. We
use four keylines shapes to follow
pattern in the design process:
‘ Square
‘ Circle
‘ Vertical rectangle
‘ Horizontal Rectangle
System icons family:
27
Colors:
We use two colors in the icon’s
design. Both of them are from our
color scheme as we stick to the
company identity ‘ one fresh and
one neutral base color, applied to
material background and material
foreground.
Using teal as background and
light gray color as opposed to it
foreground to form the actual
icons shapes, we create color
harmony. The icons’ lines are crisp
and sharply contrasted to the
surrounding color.
Versions:
The icons are immediately
communicating their purposes
through minimal and clear design,
which is user-friendly, readable
and represents the essential idea:
‘ Phone
‘ Approve
‘ Close
‘ Percentage
‘ Delivery
‘ Search
‘ DOT
‘ Address
‘ Shopping cart
‘ Money
All icons are uniform for the
whole user interface, used mainly
to add emphasis and call to a
specific action. They are designed
by one layer positioned at the
background’s center. We aim at
symmetry in shapes and clarity of
the overall look. Therefore we use
‘clearance area’ around the actual
icon element to give breathing
space for the geometric shape
and make it instantly legible when
positioned on the webpage.
Logo
Following the rest of design
decisions, the logo itself is
designed using the flat design
principle. Since the original
logo focused on the letter ‘F’
we decided to keep the same
focus and create a so called
‘letter mark’ type of logo. We
28
also thought about the reasons
behind a letter mark logo and
decided that creating a logo
in which to include the full
name of the company would
not work because of 2 reasons.
Tingfinderen is an international
company and having the name
in danish may appear hard to
pronounce by the non-danish
speakers. The second reason is
the fact that the name is a bit too
long for a logo, especially for flat
design.
The typeface used for the letter
F is called ‘Minimal’ which is
the same typeface used for the
display text in the website so
in this way we can keep the
consistency and stability. There
is a small line that goes through
the letter and it’s separating it.
Using the Gestalt law of closure,
the viewer is tempted to believe
that there are in fact two letters, F
and T.
Moving on, you can see an
armchair above the horizontal
line, so you get the feeling of a
room. Again, important for the
company which sells mainly
pieces of interior design. Hanging
from the end of the letter F, there
is a chandelier which very much
resembles the lamps Tingfinderen
is selling.
Also, the whole logo may look like
a section from a house with two
floors, where upstairs you have a
relaxation room in which you can
find an armchair and a chandelier.
This immediately relates to the
products that the company is
selling.
We use black color for our logo
and therefore design it as a
standing-out element when
positioned on any bright colored
background. We use color
meaning when applied to logo
design in order to fulfill our desires
for main visual identity – graphical
representation of the company.
29
Minimalistic web
design
We chose to follow the principles
of a minimalist web design, which
mainly focuses on actual content
rather than overcrowded page
which splits the viewer’s attention
into too many highlighted
sections at the same time,
creating unnecessary confusion
which one is the most important
piece of information.
The main rule of minimalist
designs is that certain pattern
of design principles and correct
white space usage should be
implemented into the webpage
design from the moment the
wireframes are sketched. The main
goal is to organize the content in
a way that with less elements (the
most important ones) and good
knowledge about graphic design,
more effective results can be
accomplished. Therefore our team
created all preliminary sketching
materials according to that basic
idea, getting rid of unnecessary
pieces of information and graphics
which would overflow the screen.
One of the best advantages of
our chosen procedure is the
opportunity to ease the senses
and create somewhat calming
atmosphere. The results of the
initial planning stage consists
of wireframes and mock ups,
represented bellow:
Wireframes ‘ Landing page
30
31
Final Mock-ups ‘ landing page
32
Some of the trends in minimalist
web design we consider as
beneficial for the purpose of
achieving our final goal to create
beautiful website are:
‘ Widely used black and white
colors
‘ Special typography placement
as main tool of communication
and grabbing attention easily,
even when there’s nothing else
exposed which strands out
‘ Valuable content which
is strong enough to evoke
enjoyment in the viewer’s
perceptions by qualitative,
simple, yet attractive details
Presentation Design
‘Good visual hierarchy isn’t about
wild and crazy graphics or the
newest photoshop filters, it’s
about organizing information in a
way that’s usable, accessible, and
logical to the everyday user.’
Brandon Jones
Youtubecom, F.M. (2012). YouTube.
Retrieved 12 December, 2015,
from https://www.youtube.com/
watch?v=1XyuZoNCnw4
In-text citation: (Youtubecom,
2012)
Developing the webpage was a
complex process, where we took
into consideration described
in the theories section usability
and design principles, tools
of organizing the structure
thoughtfully, keeping the chosen
minimalist design as simple and
clean as possible, at the same
time – oriented towards the user
we already analyzed. The main
goals were two: build a webpage
which leads the user towards
making a purchase; tell the
company’s story through effective
combination of graphics and
text, taking into account target
audience characteristics.
We aimed at eye-catching
website, which effectively
represents individual elements
as a well-designed composition.
On the home section we divide
the screen into three equal
parts which we use as contents’
containers. Therefore the content
we include in three columnsstructure.
On the web shop we
want to showcase more products
and therefore the layout there is
organized in 4-columns using the
grid system, which are reserved for
displaying products’ images.
Using contrast and asymmetrical
balance we immediately guide
the visitor’s glance to the
company’s visual identification. We
want the user to remember the
company and therefore the logo
takes considerately big amount of
space at the top right section of
the screen, right above the menu
items. Both logo and menu share
the same light gray background
color (completing one column
section of the layout), as opposed
to black elements in contrast,
fulfilling the demand of Gestalt
principle for clear differentiation
between object and its surround.
On the landing page, the other
side of the screen (taking two
columns sections of the layout),
we use white space to separate
two graphics which clearly
represent what the products
essentially are, and expose two
33
main elements aligned in boxes:
a story-telling quotation in black,
positioned on light turquoise
background, which briefly but
memorably communicates the
business values, and a button in
darker teal color and light label,
which provides access to the web
page. Therefore we successfully
exposed company’s vision, or
what this webpage is about and
set definite focus on the online
shop as the most important
section the user should be
pushed towards visiting.
Via crisp and clear webpage
design we want to communicate
and immediately provoke
interest in the visitors towards
products and qualities. Therefore
we implement the use of white
space in creating illusion of
having geometrical shapes, which
are ‘framing’ a set of graphics
aligned together with small
amounts of text as a pleasing
and harmoniously organized
composition.
In every website the landing page
is the most important throughout
all the other subpages. If a user
gets somehow attracted and
impressed by the information they
find on the first page, this can be
a clear indication of them visiting
again, and actually purchasing
products through connected
online store.
34
Navigation Design
It must be as simple as possible
to navigate a webpage. Only then
the user will feel comfortable
exploring new sections without
any concern they might get lost
or leave the webpage confused
if they cannot find their way fast
and effectively. As an addition,
accessibility rules should be
followed when building the
navigation for different device
screens.
The main type of navigation
design we used is ‘Main
navigation’ which is also called
global or primary navigation.
We build a vertical menu item
which is statically exposed at each
section, taking over the left – sided
column of the screen.
The subpages should link with
what is written on the menu
items’ labels, because users don’t
expect to end up at a place,
unrelated to the main navigation
links.
Responsive Deisgn
We integrate the responsive design
as an important part of possible
mobile marketing strategy. As
the latest researches show, 67%
of searches on google search
engine start on one device, but
progress to second and more types
of devices as a result of initially
provoked interest. Our webpage
content dynamically adopts its
layout in response to the change
of used device ‘ therefore we meet
the need of different accessibility
features, according to screen size
and resolution, providing improved
user experience and higher
adaption rate.
Navigation design is one important
consideration when designing for
desktop, tablet and mobile devices.
On mobile devices we trigger the
menu item and visualize it as a
burger menu. The sections available
for exploring by users get expanded
in a vertical sequence as a part of
menu box, after tabbing the burger
icon. This is appropriate solution for
any type of touch screen display
as burger icon is widely used and
easily recognizable.
The contents structure also differs
depending on the available screen
space and from menu section to
another. The elements positioned
together in composition should be
legible, fully accessible and userfriendly.
Users should be freely
browsing, scrolling, interacting
with the webpage and reading
text.
We use bootstrap 12-columns grid
system to organize consistent
page layout and make sure proper
spacing between elements
has been achieved for better
readability.
Bootstrap provides four classes
for four different screen sizes:
xs, sm, md and lg. Using these
classes, the column grid system
changes according to the screen
size and therefore accommodate
appropriately structured page
content.
35
Social Media
Strategy
Social media strategy refers to a
marketing plan used in the online
environment to raise awareness
of the company, the brand, the
concept and products. It is a
direct gateway to the target
audience, who can interact with
the brand through platforms like
Facebook, Instagram, Twitter,
Tumblr etc.
A study conducted in September
2014 showed that 74% of online
adults use social networking sites
and that 71% of online adults
have a Facebook account. (http://
http://www.pewinternet.org/fact-sheets/
social-networking-fact-sheet/).
That means that 97.3% of online
adults choose Facebook as their
preferred social media channel.
The purpose of a social media
strategy is to reach as many
people as possible, therefore the
main focus is on a good Facebook
marketing campaign.
By signing up on Facebook,
the company becomes a selfstanding
entity, a persona, in the
online environment. This makes
it easy for the target audience
to feel comfortable to interact
and communicate with the
company, just as they would do
with any person from their friends
list. Tingfinderen already has a
Facebook Page with over than
800 likes which is a good start.
However, the page is marked
as ‘Website’, when it should
be marked as ‘Local Business’.
Danes are very passionate and
proud of Danish design, therefore
marketing Tingfinderen products
as local would definitely have
a greater impact on the target
audience. In the future, if the
company expands to a global
level, the category ‘Product/Brand’
will be more appropriate. Also,
the current page has a message
call to action and a response time
of 1 hour which is very good. The
current cover photo, while it does
contain the logo, is misleading,
pointing towards personalized
t-shirts and not the company’s
products.
There are several Facebook
features that Tingfinderen can use
as marketing tools; four of them
are free and one is not.
‘ The Profile Photo
The Profile Photo needs to
reflect the company’s identity,
as it, along with the display
name, will be a business card
everywhere on Facebook. Most
often, successful companies
use their logos as profile picture
(Apple Inc, Facebook, Pandora,
Halifax, S”strene Grene etc.). The
logo must be positioned correctly
inside the frame (not altered,
cut or distorted in any way), as
instructed in the Design manual.
‘ The Cover Photo
It is a great space for a broader
message, call to action, or
advertisement. The cover photo
completes the F-pattern begun
by the profile picture, therefore
getting a lot of attention as well.
It is very important that the cover
photo has the same look and feel
as the profile photo, for continuity
36
reasons and to strengthen the
brand identity.
The cover photo and profile
photo can be used for seasonal
promotional campaigns, for
example for Christmas, Easter,
Black Friday or special offers for
the company. In this case it is also
extremely important that the two
photos are consistent (look & feelwise)
and that the brand’s identity
is properly represented.
‘ Posts
Regularly posting on the
company’s Facebook Page is
essential when trying to form a
community around the brand’s
Facebook page. Scheduled posts
that are relevant for the buyer
are a great way of planning
ahead and keeping the social
media management effort to a
minimum.
Below is an example of improved
company’s profile and cover
photos, plus posts’ suggestions:
New project in progres: Lamps
tinggnderen.dk
For the ones of you who didn’t nd out, we are launching a
new projects which focuses on refurbishing lamps.
Tinggnderen’s new project focuses entirely on lamps. A recent announcement
made by the CEO, Tobias Hinchely Pedersen, says that their new focus is on
refurbishing old street lamps and reselling them as pieces of interior design.
Bes working stone in Caucasian mountains
news.yahoo.com
Michael John, the world’s leading expert when it comes to prime materials, has stated that
the stone with the highest quaility ca be found in the Caucasian mountains. He has
counducted a study to nd out which are the best places to provide with prime materials.
It is found that the best stone to work with lays in the Caucasian mountains
37
‘ Events
Events are a great way of staying
in touch with your audience. They
can refer to actual events that
followers can attend physically
(open house, exhibition etc.) or
virtually (online store discount
day). It’s important to make these
events public so that invitees
can invite their friends and the
company gets as much publicity
as possible.
As an example above we designed
a Christmas poster, which purpose
is to attract new facebook
followers. We aim at getting more
likes on Tingfinderen facebook
page, proposing a little Christmas
game. People who share photos
of their favorite products can then
win the possibility to attend the
grand opening party event about
Tingfinderen and Tyskenhavn
merge. Another option for those
who prefer Christmas discounts
is to attend the three days of
Christmas huge discount on the
Tingfinderen’s web shop. In order
to get more customers’ emails,
we also would like our facebook
followers to subscribe for our new
2016 year’s newsletter and receive
weekly news about everything
around the merged companies’
achievements throughout the
year.
38
Database
Documentation
Non-Functional
Requirements
1) ‘Security
‘ Login requirements’: A login
is not needed to buy an item
since it can discourage new
customers, and is not what
we find as normal practise on
webshops.
2) ‘Performance
‘ Response times – application
loading, screen open and
refresh times, etc’: quick
loading, no more than 3 sec.
waiting time
3) ‘Capacity
‘ Throughput ‘ how many
transactions per hour does
the system need to be able to
handle?’:2000
‘ ‘Storage ‘ how much data does
the system need to be able to
store?’:
150-200 products and 20.000
users
4) ‘Availability
‘ Hours of operation ‘ when is it
available? Consider weekends,
holidays, maintenance times,
etc’: available around the clock,
maintenance shouldn’t take
more than an hour at a time
‘ ‘Locations of operation ‘ where
should it be available from,
what are the connection
requirements?’:
available from popular browsers:
Firefox, Chrome, Safari, Explorer,
Oracle, taking slightly older
versions into consideration but not
really old versions.
available from popular browsers:
Firefox, Chrome, Safari, Explorer,
Oracle, taking slightly older
versions into consideration but not
really old versions.
‘ ‘Mean Time To Recovery ‘ if
broken, how much time is
available to get the system
back up again?’: 1 day
5) ‘Compatibility
‘ Compatibility with shared
applications ‘ What other
systems does it need to talk to?:
it needs to talk to a payment
system and perhaps shipping
system.
‘ Compatibility on different
operating systems ‘ What does
it have to be able to run on?’:
MAC OS X, Windows XP, 7, vista,
10
‘ ‘Compatibility on different
platforms ‘ What are the
hardware platforms it needs
to work on?’: computer, ipad,
tablet and phone (android or
apple)
6) Maintainability
‘ Conformance to design
standards ‘ What design
standards must be adhered to
or exclusions created?
‘ Make navigating through
different sections easily
accessible with clear mark on
the most important levels of
presented information
‘ Design touch targets for mobile
usage with minimum size
of 48dp x 48dp and space
between separate elements on
mobile devices at least 8 dp
‘ Add alternative text
descriptions (alt attribute
39
element in html5) to all images
used on the webpage
‘ Be consistent in all placeholder
texts, different labels on the
webpage and terminology
used
‘ Customize each anchor text
with the meaning of links’
actual results, avoid cliches like
‘Click here’
‘ Ensure text is readable,
adjusting contrast, background,
text size and used typefaces
according to importance and
levels of hierarchy in text block
displayed on the webpage
‘ For elements with high
importance use shapes or other
type of articulation, together
with colors, in order to satisfy
needs of colorblind users
‘ Adhere to the principles of
design, creating a balanced
composition and hierarchical
structure on the webpage, that
leads the user eye through
the most important pieces of
information firstly
‘ Use contrast and alignment
to organize different levels of
information
‘ Apply the rule of thirds in every
graphical element and the
webpage layout itself
‘ Use Golden section ratio to
design visually appealing
graphical structures
‘ Apply the principles of Color
and Gestalt theories to create
harmonized composition of
elements, which eases the
eye and communicates clear
messages to the targeted
audience
7) Usability
‘ Look and feel standards –
screen element density, layout
and flow, colours, UI metaphors,
keyboard shortcuts: it must
adhere to the 10 heuristics of
usability by Jakob Nielsen
there are no keyboard shortcuts
colours match identity and are
screen friendly
‘ Internationalization /
localization requirements ‘
languages, spellings, keyboards,
paper sizes, etc: the shop
provides delivaries only in
Denmark at the moment, so
language is only Danish.
reference:
Mike Griffiths, 2009,
retrived on dec 2, 2015: http://
leadinganswers.typepad.com/
leading_answers/2009/03/
nonfunctional-requirementsminimal-
checklist.html#more
Functional
Requirements
Use Case Models consist of usecases
and are used to define
functional requirements and
interactions between the actor
and the system. The actor can be
both the admin, the customer or
another machine that interacts
with the system – for example
when linking to a payment
system.
40
USE CASE 1
Name: VIEW product details
Identifier: UC01
Description: The customer
needs to be able to view product
description, price, image and info
if the product is currently sold out.
Preconditions:
The system is open
Frequency:
This will happen very often since
the whole idea of the website is
that customers view the products
and get persuaded to buy.
Basic Course:
1) The use-case begins when
users are on the website
2) The user clicks on the Store
menu item
3) User clicks on a certain
product from the store to view
more details
4) Product details are getting
displayed
5) The use-case ends with the last
step being accomplished
Post conditions:
The user can add the chosen
product to their cart
Actors:
The User
USE CASE 2
Name: VIEW cart
Identifier: UC02
Description: The user can go to
their cart and view all the products
that have been included in the
cart with the intention of buying.
Here the total amount of the
order will be displayed and the
user can choose to delete an item
from the list, clear the whole cart
or go on to perform the payment.
Preconditions: The system is open
and the user has already added
something to the cart (it’s not
empty)
Frequency: A frequent action
that will take place every time a
customer reviews orders.
Basic Course:
1) The use-case begins when the
user has added something to the
cart
2) The user clicks to see the
content of the cart
3) An overview appears with items
the user has selected and their
quantities, plus the total cost of
the order. The user can then go
forward and place the order by
paying.
Post conditions:
The user can go to payment and
place the order, delete an item,
clear the cart, or the user can
browse more to add additional
products into the cart.
If the user goes on to payment, an
order is created in the database
with the initial status of ‘pending’.
Actors:
The user.
reference:
Sparx Systems 2004
UML TUTORIALS – THE USE CASE
MODEL
41
Use case model-User
VIEW product details ADD product to cart
VIEW cart
REDUCE number of items
CLEAR the whole cart
PLACE order go to payment system
USER
42
Use case model-Admin
ADD new product
EDIT product details
DELETE product
ADD new colour DELETE colour
DELETE order
UPDATE customer info
CHANGE address
CHANGE name
ADMIN
43
Normal Forms
To ensure database quality we
have checked and made sure to
put the database through the
normal forms.
The normal form technique
is used to organise data in
the database in a logical and
systematic way so that we don’t
encounter data redundancy (eg.
repeated data) and problems
with updating the tables. By using
this technique we normalise the
database and make it easier to
work with it and minimise data
loss.
First normal form (1NF) states that
there can’t be more that one
entry per field and that each row
has an unique identifier (called
primary key). The first normal form
actually gives us multiple rows
with repeated data (what we don’t
want) but each row is unique.
To make sure we don’t have
repeated data, we move on to
second normal form (2NF). Second
normal form can only be reached
after a first normal form has been
reached and when any data in a
column is totally dependant on
the primary key. If the primary key
is a concatenation of two then
the data in the column must be
totally dependant on both and
not just one part of the key.
The third normal form (3NF) is
achieved by firstly reaching second
normal form and then separating
data, that is not identified solely
by the primary key. By doing this
we reduce duplicate data and
thereby the database will be
smaller, which will make it work
faster.
ER Modeling
A customer cannot be registered
in the system without placing
an order. Customers write the
address that they want the
product shipped to and if it is not
their own address with available
name on the door, then they write
in the comments of the order
what name can be found at the
door.
The zip code and city can apply
to multiple addresses and all zip
codes for Denmark are already in
the system, so the user can only
choose a zip code from Denmark,
since we assume shipping will
only happen in Denmark (at least
as a start).
A customer can place many
orders but one specific order
with corresponding unique order
number can only belong to one
customer. Each order contains
different products and orders can
contain a number of the same
products while also including
other products (eg. ordering two
lamps and one chair).
Each product can also be in
several orders (depending of the
number in stock).
When a product is out of stock
(column ‘p_number_in_stock’ = 0)
then it will change to ‘sold out’ on
the website and it is not possible
to add it to the cart.
Products can exist without being
in an order. The products table
contains a colour column to make
it possible for the user to filter
products by colour preferences.
UML: Information Engineering
Notation.
44
address
ad_id INT(11)
ad_street_name VARCHAR(45)
z_zip_fk INT(4)
Indexes
customer
c_id INT(11)
c_email VARCHAR(45)
c_firstname VARCHAR(45)
c_lastname VARCHAR(45)
c_tel INT(11)
ad_id_fk INT(11)
Indexes
order
order_id INT(11)
order_date DATE
order_amount DOUBLE
order_status ENUM(…)
order_cust_comments TEXT
c_id_fk INT(11)
Indexes
order_has_products
Order_id_fk INT(11)
p_id_fk INT(11)
op_total_quantity INT(11)
Indexes
products
p_id INT(11)
p_name VARCHAR(45)
p_description VARCHAR(45)
p_price DOUBLE
p_image VARCHAR(255)
p_colour ENUM(…)
p_place_in_stock VARCHAR(5)
p_number_in_stock INT(11)
Indexes
zip
z_zip INT(4)
z_city VARCHAR(45)
Indexes
45
Table of attributes
Entity/Relation Attributes Value Notes Data type
customer c_id 1 – x Unique no. – autoincrement n
c_email All char. Max. 50 char. – email is login name, unique an
c_firstname All char. Max. 50 char. an
c_lastname All char. Max. 50 char. an
c_tel 0-9 8 digits – danish phonenumber – not required n
ad_id_fk int foreign key n
address ad_id 1 – x unique no. – autoincrement n
ad_street_name All char. Max. 50 char. an
z_zip_fk 1 – x Foreign key n
zip z_zip 1000 ‘ 9999 primary key n
z_city a ‘ ” Max. 30 char. an
order order_id 1 – x Unique no. – autoincrement n
order_date DD/MM/YY DATE
order_total_amount Currency sum of price of products chosen Currency
order_status
order_cust_comments all char. TEXT(500) an
c_id_fk 1 – x Foreign key n
Product p_id 1 – x Unique no. – autoincrement n
p_name All char. Max. 50 char. an
p_price Currency DOUBLE Currency
p_description All char. TEXT an
p_image VARCHAR(255)
p_colour enum ENUM(‘black’, ‘white’, ‘granite’, ‘copper’, ‘gold’, ‘metallic’)
p_place_in_stock 1 – x where to find the product in the stock room n
p_number_in_stock 0 – x n
order_has_products order_id_fk 1 – x Foreign key n
p_id_fk 1 – x Foreign key n
op_total_quantity 1-x sum of how many of the different products were chosen n
ENUM(‘pending’, ‘shipped’, ‘cancelled’)
46
CRUD Matrix
use-cases / tables: customer products orders order_has_products zip address
The User
VIEW product details R
ADD product to cart R C C
VIEW cart R R R
-DELETE item from cart D D
-VIEW total amount of order R R
-PLACE order – go to payment system C U C
The Admin
ADD new product C
DELETE product D
UPDATE product information & price U
ADD new colour C
DELETE colour D
CHANGE customer address U U
CHANGE customer name U
ADD new zip code C
DELETE order D D
CHANGE order status U
47
Test cases
48
Future
Improvements
Ideal ER Diagram:
customer
c_id INT
c_email VARCHAR(45)
c_firstname VARCHAR(45)
c_lastname VARCHAR(45)
c_tel INT
c_password VARCHAR(45)
Indexes
products
p_id INT
p_name VARCHAR(45)
p_description TEXT(500)
p_price DOUBLE
p_image VARCHAR(255)
p_colour ENUM(…)
p_place_in_stock VARCHAR(5)
p_number_in_stock INT
cat_id_fk INT
Indexes
orders
order_id INT
order_date DATE
order_amount DOUBLE
order_status ENUM(…)
order_cust_comments TEXT(500)
c_id_fk INT
Indexes
order_has_products
Order_id_fk INT
p_id_fk INT
op_total_quantity INT
Indexes
address
ad_id INT
ad_street_name VARCH’
ad_street_num VARCHA’
z_id_fk INT
Indexes
zip
z_id INT
z_zip INT(4)
z_city VARCHAR(45)
Indexes
category
cat_id INT
cat_name VARCHAR(45)
Indexes
address_type
at_id INT
at_type INT
Indexes
customer_has_Address
c_id_fk INT
ad_id_fk INT
at_id_fk INT
Indexes
49
PAYMENT:
Our current solution is simply a
dummy because we know that in
real life, when you are handling
credit card information, you are
not allowed to store this sensitive
information in your database – you
can only store a token that refers
the transaction session which is
killed upon completion.
The token contains no sensitive
information by itself.
PayPal would be our future
solution.
Further more, in the future we
would like to add the following
futures:
‘ Poster
‘ Flyer
‘ Video
‘ Search function
50
Conclusion and
reflection
As a conclusion on the project
we would like to briefly answer
the questions we stated at the
problem definition stage of our
project’s documentation.
1) How to improve the company’s
marketing strategies and attract
more customers and facebook
followers, implementing niche
marketing techniques in regards
to target group analysis?
We made a use of learnt
techniques about defining the real
target audience for the company’s
products, and then making
design decisions accordingly. We
were able to take advantage of
niche marketing for Tingfinderen
products and improve the existing
communication channels through
a few major steps:
– creating new visual identity,
grabbing attention on the
company’s history and
representing the whole
Tingfinderen vision through one
simple, yet elegantly styled logo
– entirely redesigning facebook
page for the taste of detected
target group ‘ implementing new
logo design as social media profile
identification of the company;
presenting new facebook post’
template and virtual events mockups
(Christmas poster) which
follow the basic rules of successful
social media strategic plan
– entirely redesigning the website
which adheres to the principles of
minimalistic design in navigation,
presentation and architecture
design, matching visual look and
feel of what the niche market seek
from an online platform
– exceeding the levels of
functionality with a connected
database for the online store and
orienting more customers into
actually visiting that section of
the webpage via clear focus on
products, continuing the clear
design line
2) How to use design principles
and web development to build
a website which showcases the
above mentioned strategical
guides?
In order to give the webpage all
the important features which will
define it as an outstanding online
platform and fulfill the target
audience needs for interaction,
we used developmental strategies
of subjects covered as a part of
interaction development subject
of our studies and followed set of
important guides of Design and
Visualization sector. We strictly
focused our efforts to come up
with completely improved version
of the already existing webpage,
maximizing the satisfaction for our
team and the business’ founder as
a client basis.
– the webpage structure and
design, the implemented
individual graphical elements, are
organized according to the most
important for pleasingly ordered
designed outcomes principles and
laws
– the database provides level of
functionality which fully covers the
needs of the project’s scope
Our team used SCRUM
project development method
and therefore allowed crossfunctionality
in the tasks’
51
separation and group members’
roles. We had the possibility to
continuously improve after each
sprint and fix problems, detected
as a result of Burn down charts’
monitoring. We were planning,
estimating time and working
on every task as a team. Only
after evaluating how effective
our previous sprint was, we were
proceeding to the next iteration.
In order to deliver satisfying final
results and detect the level of
progress after the finish of our
third semester in Multimedia
Design and Communication
program, we used all techniques
and methods covered at school
as a strong foundation of our
practical skills. The best practice
when designing is to prove your
decisions with existing evidences
as references to theoretical
knowledge.
Our team enjoyed working on that
project and believe in the values
of each outcome and the final
product delivered.
References
10 Heuristics for User Interface
Design: Article by Jakob Nielsen
http://www.nngroup.com/articles/
ten-usability-heuristics/
retrieved on 01-12-15 at 00:31
Customers Addresses and
Payments Subject Area Data
Model
http://www.databaseanswers.
org/data_models/subject_area_
customers_addresses_and_
payment_methods/index.htm
retrieved on 05-12-15 at 23:14
Best Project Management
Software Tools , MS Access
Development, Developers
Turbut, Neville (2005)The PROJECT
PERFECT White Paper Collection:
Project Quality Planning
http://www.projectperfect.com.au
retrieved on 03-12-15 at 12:18
Griffiths, Mike (2009), Non-
Functional Requirements –
Minimal Checklist
http://leadinganswers.typepad.
com/leading_answers/2009/03/
nonfunctional-requirementsminimal-
checklist.html#more
retrived on 02-12-15 at 15:53
Sparx Systems 2004
UML TUTORIALS – THE USE CASE
MODEL
http://www.sparxsystems.com/
downloads/whitepapers/The_Use_
Case_Model.pdf
retrieved on 03-12-15 at 16:33
1NF, 2NF, 3NF and BCNF in
Database Normalization | DBMS
Tutorial | Studytonight
http://www.studytonight.com/
dbms/database-normalization.php
retrieved on 15-12-2015 at 10:45
Minimalist Web Design: When Less
is More
http://www.webdesignerdepot.
com/2009/12/minimalist-webdesign-
when-less-is-more/
retrieved on 02-12-2015 at 15:45
Website Colors
http://www.empower-yourselfwith-
color-psychology.com/
website-colors.html
52
retrieved on 02-12-2015 at 20:52
Google Fonts – Montserrat
https://www.google.com/fonts/
specimen/Montserrat#charset
retrieved on 04-12-2015 at 13:32
Units and measurements – Layout
– Google design guidelines
https://www.google.com/design/
spec/layout/units-measurements.
html#
retrieved on 07-12-2015 at 13:10
Google design guidelines
https://mehiqbal.wordpress.com/
learning/communication-andpresentation/
usability-gangstertest-
user-test/
retrieved on 09-12-2015 at 17:06
Meaning and Uses of Colors
in Logo Design http://blog.
logodesignguru.com/meaningand-
uses-of-colors-in-logo-design/
Retrieved on 13-12-2015 at 08:03
Design Principles for Developers
LINK
Retrieved on 16-12-2015 at 11:14
Gestalt Laws and Design
http://www.slideshare.net/
chelsc/gestalt-laws-and-designpresentation
retrieved on 12-12-2015 at 10:47
Principles of Graphic Design
https://www.youtube.com/
watch?v=LKOq3Dhcqig
retrieved 01-12-2015 at 09:43
Graphic Design Tutorial: Simple
strategy for applying colour
https://www.youtube.com/
watch?v=0lKgCAa73kU
retrieved on 04-12-2015 at 19:33
Gray in Business
http://www.empower-yourselfwith-
color-psychology.com/grayin-
business.html
retrieved on 04-12-2015 at 19:51
Burndown Chart Overview
https://www.youtube.com/
watch?v=PRuV5rASIF4
retrieved on 06-12-2015 at 16:10
5 Benefits of Responsive Web
Design
https://www.youtube.com/
watch?v=jNzmWxPHLVo
retrieved on 16-12-2015 at 08:03
Scrum Methodology
http://scrummethodology.com/
retrieved on 26-11-2015 at 16:20
Market segmentation
http://pure.au.dk/portal/files/11462/
BA.pdf
retrieved on 30-11-2015 at 18:41
The 5 Basic Principles Of Design –
Maddison Designs
http://maddisondesigns.
com/2009/03/the-5-basicprinciples-
of-design/
Publication: 2009-03-27
retrieved on 03-12-2015 at 15:24
Color Harmonies
http://www.tigercolor.com/colorlab/
color-theory/color-harmonies.
htm
retrieved on 04-12-2015 at 21:28
Basic Color Theory
http://www.colormatters.com/
color-and-design/basic-colortheory
retrieved on 05-12-2015 at 12:20
53
Icons – Style – Google design
guidelines
https://www.google.com/design/
spec/style/icons.html#iconsproduct-
icons
retrieved on 07-12-2015 at 11:49
Typography – Style – Google design
guidelines
https://www.google.com/
design/spec/style/typography.
html#typography-othertypographic-
guidelines
retrieved on 07-12-2015 at 14:37
Color – Style – Google design
guidelines
https://www.google.com/design/
spec/style/color.html#color-colorpalette
retrieved on 07-12-2015 at 14:50
Kalbach, James (2008 ):
Designing Web Navigation
Published by O’Reilly Media, Inc
retrieved on 14-12-2015 at 15:13
Brad L. Rawlins (2006): Prioritizing
Stakeholders for Public Relations
Published by Institute for Public
Relations
retrieved on 04-12-2015 at 10:18
Appendix
SCRUM methodology:
54
55
56
Tools:
1) Logo and icons design: Adobe
Illustrator
2) Target group analysis: STP
process; Statistics Denmark https://
http://www.dst.dk/en
3) Website sketching: paper-based
sketching; Adobe Photoshop
4) Website development: Brackets;
Bootstrap; JQuery; html5; CSS3;
JavaScript
5) ER modelling: Work Bench
6) Database development: PHP 5
language
7) Usability: Gangster+User test
8) Report layout and cover page:
Adobe InDesign
9) Graphics; facebook mockups:
Adobe Photoshop