from customer need to umbraco setup
DESCRIPTION
Building a homepage is not about coding, it's about letting your customer’s business meet their customers’ needs (okay it's also about coding). This includes defining the purpose, meeting the users, going from needs to function, doing the framing and the design of the UX, and finally how to set up the Umbraco backend to support the needed data output in a way that is easy to use for the editors.TRANSCRIPT
![Page 1: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/1.jpg)
From customer need to Umbraco setup
![Page 2: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/2.jpg)
Hello!We are René and Anders from Skybrud.dk
![Page 3: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/3.jpg)
Photo from Flickr by Gabriel Chmielewski/Mays Communications
People don't want a drilling machine, they want a hole in the wall
,,Philip Kotler, marketing guru
![Page 4: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/4.jpg)
We help people define, design and develop holes (nothing naughty about that).
This is what we will talk about today.
![Page 5: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/5.jpg)
Con
tact
Init
ial r
equi
rem
ent s
peci
ficat
ion
Fina
ncia
l est
imat
e
Ten
der
Con
trac
t
Pre project fase
![Page 6: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/6.jpg)
Project fase
Wor
ksho
p/br
iefin
g
IA/W
iref
ram
ing/
UX
Des
ign,
rev
ison
and
fina
l acc
ept
Prot
otyp
ing
Prog
ram
min
g
Educ
atio
n
Dat
a en
try
Tec
hnic
al te
sts
Laun
ch
Req
uire
men
t spe
cific
atio
n/sp
ecifi
cati
on o
f bac
klog
![Page 7: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/7.jpg)
Hos
ting
Supp
ort
New
jobs
Vis
ion
sem
inar
Red
esig
n
Post project fase
![Page 8: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/8.jpg)
• Breaking the project down makes it easier to grasp
• They only have to put their attention to one thing at a time
• They can allocate the right people at the right time in the project
The process is good for our customers because:
![Page 9: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/9.jpg)
• Breaking the project down makes it easier to grasp
• We avoid mixing pears and bananas → makes it easier to define the problem if iteration is needed
• It is easier to code something that is well-defined – and we also avoid coding stuff that ends up being useless or not being used at all
The process is good for us because:
![Page 10: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/10.jpg)
Defining the “hole” begins with questions
• Why – the main purpose
• Who – the users
• What – content, services
• How – concept, system platform, technical setup
• Where – context, devices
• How much – goals
![Page 11: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/11.jpg)
Why
![Page 12: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/12.jpg)
“We want a website!” → “Why do you want a website?”
![Page 13: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/13.jpg)
BusinessPotential
Solution
PossibilitiesHow
Why
![Page 14: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/14.jpg)
How do we find the WHY and the potential?
Inside out – looking at the business from both a management and employee perspective
• Top down → getting “the why” of the solution connected with the overlying business goals
• Buttom up → getting an idea of what kind of resources we have to walk the walk
![Page 15: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/15.jpg)
• Looking at the company's vision with “digital eyes”
• Breaking down their strategy/strategies (sometimes we also help writing them)
• Workshops
• Interviews with employees and sometimes other stakeholders
• Looking at what similar firms in the business are doing
We do this by …
![Page 16: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/16.jpg)
Who
![Page 17: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/17.jpg)
The more you know about the customers, the better you can serve them.
The better you serve them, the more money you make.
![Page 18: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/18.jpg)
CustomersNeeds
Solution
PossibilitiesHow
What
![Page 19: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/19.jpg)
Finding the needs
• Outside in – looking at the business and services through the lens of the users.
![Page 20: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/20.jpg)
Statistics
Quantitative knowledge, overall level (can also be at a very specific level if needed)
Output:
• Knowledge about the users and their behavior
• Provides us with an overview of the content and functionality to pursue and the content to be removed or downgraded
![Page 21: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/21.jpg)
Heatmaps
Quantitative knowledge, overall level
Output:
• Knowledge about the users’ behaviour
• Provides us with an overview of the content and functionality that makes sense to pursue and what content is to be removed or downgraded
![Page 22: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/22.jpg)
Ask the users
For example a questionnaire on the website.
Both quantitative and qualitative knowledge at an overall level.
Output:
• Knowledge about the users
• What works now and what can we do better
• Inputs to functionality and content
![Page 23: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/23.jpg)
Photo from www.scout.org
Talk with the users
For example focus group interviews / workshops.
Qualitative knowledge on a deep level.
Output:
• Knowledge about the users
• Inputs to functionality and content
• Testing ideas and concepts
![Page 24: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/24.jpg)
WHY (potential)+ WHO (needs)
= HOW and WHAT (the solution)
Business Potential
Solution
CustomersNeeds
![Page 25: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/25.jpg)
=
→
Breaking it downfrom why + who
how + what (and back again)
![Page 26: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/26.jpg)
Main purpose
Underlying purposeUnderlying purpose Underlying purpose
Underlying purpose Underlying purpose
Solution/featureSolution/feature
Solution/feature
Solution/feature
Solution/featureSolution/feature
How
![Page 27: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/27.jpg)
Main purpose
Underlying purposeUnderlying purpose Underlying purpose
Underlying purpose Underlying purpose
Solution/featureSolution/feature
Solution/feature
Solution/feature
Solution/featureSolution/feature
Why
![Page 28: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/28.jpg)
Main purpose
Underlying purposeUnderlying purpose Underlying purpose
Underlying purpose Underlying purpose
Solution/featureSolution/feature
Solution/feature
Solution/feature
Solution/featureSolution/feature
Why
The “so-ein-ding-muss-ich-auch-haben”-killer
![Page 29: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/29.jpg)
And in the real world
We are doing this in Gliffy.
– sorry folks, but only in danish
![Page 30: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/30.jpg)
Zooming in
Create an efficient, attractive and "daring" website that ensures value both for Slagelse municipality and the users
➡ Slagelse.dk must increase the possibility of effective self-management among the users (citizens and businesses) in their interaction with the municipality.
➡ Ensure that all necessary and relevant information is available to the users (citizens and businesses)
➡ Increase the quality of the content
➡ Feedback from the users
➡ Rating + comments on pages
![Page 31: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/31.jpg)
→
Transforming the knowledge in the diagram into a product backlog
Description of page layouts including knowledge about data/content, functionality and most wanted action.
We are doing this in Basecamp.
![Page 32: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/32.jpg)
![Page 33: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/33.jpg)
Also descriptions of each function
![Page 34: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/34.jpg)
![Page 35: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/35.jpg)
From product backlog to design of the creative potential
Bring in the gimps!
![Page 36: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/36.jpg)
The gimps
– this is a team discipline
![Page 37: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/37.jpg)
Paper and pencil
– the fastest way to work with ideas
![Page 38: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/38.jpg)
Reusing ideas by making them fit the customer
![Page 39: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/39.jpg)
![Page 40: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/40.jpg)
… but Slagelse wanted something a bit different.
![Page 41: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/41.jpg)
They also wanted it to be a visible element on the page.
![Page 42: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/42.jpg)
Paper and pencil
– also the fastest way to show and communicate these ideas
= handmade wireframes shown in the browser
Right now we are using Moqups for this.
![Page 43: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/43.jpg)
Flesh and blood
– design of the final user interface
We still believe that the best design is created in Photoshop
– but must always be tweaked, presented and approved in a browser.
![Page 44: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/44.jpg)
And a solution for mobile must always be experienced on a mobile
![Page 45: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/45.jpg)
Translating to “programmer-lingo”
![Page 46: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/46.jpg)
Making it user-friendly for the editors= setting the backend up with the customer
• It’s easy to create backoffice “on the run” with the customer
• Involving the customer
• Getting a lot of clarification done very quickly (no iterations)
• Customers feel ownership
![Page 47: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/47.jpg)
The “you need” toolbox1 brain Multiple gimp brains
Gliffy
Basecamp
Paper and pencil
Photoshop and a browser
Google Docs
Umbraco
![Page 48: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/48.jpg)
Umbraco is good at making beautiful holes
– and then you also get an excellent drilling machine
![Page 49: From customer need to Umbraco setup](https://reader033.vdocuments.net/reader033/viewer/2022051412/549b697bb479591a098b476b/html5/thumbnails/49.jpg)
Umbraco rocks – so let’s drill away!
Anders Bruun / [email protected]
René Pjengaard / [email protected] / @pjengaard