outokumpu responsiivinen verkkosivut_e_communication_ux_summit
TRANSCRIPT
![Page 1: Outokumpu responsiivinen verkkosivut_e_communication_ux_summit](https://reader035.vdocuments.pub/reader035/viewer/2022081506/55b3cd1ebb61eb723c8b4693/html5/thumbnails/1.jpg)
1
April 14, 2023
Case Outokumpu.com
Responsiivisen verkkopalvelun suunnittelu ja toteutus SharePoint 2013
![Page 2: Outokumpu responsiivinen verkkosivut_e_communication_ux_summit](https://reader035.vdocuments.pub/reader035/viewer/2022081506/55b3cd1ebb61eb723c8b4693/html5/thumbnails/2.jpg)
2
Outokumpu
Outokumpu is the leader in advanced materials with the strongest technical expertise and widest range of products across all our customer segments.
![Page 3: Outokumpu responsiivinen verkkosivut_e_communication_ux_summit](https://reader035.vdocuments.pub/reader035/viewer/2022081506/55b3cd1ebb61eb723c8b4693/html5/thumbnails/3.jpg)
33
April 14, 2023
Alkutilanne sivuston uudistukselle
Etukäteen päätetty:• Haluttiin jakaa maailmanlaajuisesti uusi
brändi, kokemus sekä visio ja missio
• Tehdä enenmmän liiketoimintaan keskittynyt verkkosivusto
• Julkaistaan toukokuun lopussa (aikaa 4kk)
Analytiikasta:• Mobiilipäätelaitteiden käyttö kasvanut ja
edelleen kasvussa
• Käyttäjäkokemuksen kehittäminen ja tehokkaammat sivustot
Alusta:• Joko Sharepoint 2010 tai 2013
![Page 4: Outokumpu responsiivinen verkkosivut_e_communication_ux_summit](https://reader035.vdocuments.pub/reader035/viewer/2022081506/55b3cd1ebb61eb723c8b4693/html5/thumbnails/4.jpg)
44
April 14, 2023
Suunnittelu ja kehitys agiilisti
• Intensiiviset konseptointi- sekä kehityssprintit
• Suunnittelusprinttien aikana priorisoitiin 200 erilaista tarvetta eri näkökulmista (User story).
• 400 teknistä User Storya toteutettiin itse sivustolle
• Käyttäjänäkökulma tuotiin analytiikan sekä aiempien tutkimusten avulla.
![Page 5: Outokumpu responsiivinen verkkosivut_e_communication_ux_summit](https://reader035.vdocuments.pub/reader035/viewer/2022081506/55b3cd1ebb61eb723c8b4693/html5/thumbnails/5.jpg)
5
Responsiivisen sivun sisältö
April 14, 2023
5
![Page 6: Outokumpu responsiivinen verkkosivut_e_communication_ux_summit](https://reader035.vdocuments.pub/reader035/viewer/2022081506/55b3cd1ebb61eb723c8b4693/html5/thumbnails/6.jpg)
6
04/14/2023
Jokaisella sivulla on oma rooli, tyyli ja tavoiteEngagers Routers Informers Convincers
Front pageSection page
Section pageSearch pagesVideo pagesDownload pagesMap pages
Article pagesBasic info pagesNews pages
Prod pagesService pagesReference pagesContact page
Make the first impression count.
Show them the way.
Be unique. Because you can.
Open the door. Close the deal.
![Page 7: Outokumpu responsiivinen verkkosivut_e_communication_ux_summit](https://reader035.vdocuments.pub/reader035/viewer/2022081506/55b3cd1ebb61eb723c8b4693/html5/thumbnails/7.jpg)
7
Responsiivisen sivun alkuvalmistelu
April 14, 2023
7
![Page 8: Outokumpu responsiivinen verkkosivut_e_communication_ux_summit](https://reader035.vdocuments.pub/reader035/viewer/2022081506/55b3cd1ebb61eb723c8b4693/html5/thumbnails/8.jpg)
8
April 14, 2023
8
Ensin griditMain content area Side bar
1
4
3
2
1
4
2
3
5
5
![Page 9: Outokumpu responsiivinen verkkosivut_e_communication_ux_summit](https://reader035.vdocuments.pub/reader035/viewer/2022081506/55b3cd1ebb61eb723c8b4693/html5/thumbnails/9.jpg)
9
Desktop:
Min-width 960px. Fixed grid, 960px wide. Margins
and highlight boxes are fixed width.
Tablet:
Min-width: 768px AND max-width: 959px. Fluid grid,
width 95%, margins and highlight boxes scale
proportionally.
Mobile:
Max-width: 767px. One column grid, width 87,5%.
Highlight boxes are scaled to the width of the grid.
Section start page, desktop Section start page, tablet Section start page, mobile
Min-width 960pxMin-width: 768px
AND max-width:
959px
Max-
width:
767px
Sitten breakpointit
![Page 10: Outokumpu responsiivinen verkkosivut_e_communication_ux_summit](https://reader035.vdocuments.pub/reader035/viewer/2022081506/55b3cd1ebb61eb723c8b4693/html5/thumbnails/10.jpg)
10
Responsiivisen sivun suunnittelu
April 14, 2023
10
![Page 11: Outokumpu responsiivinen verkkosivut_e_communication_ux_summit](https://reader035.vdocuments.pub/reader035/viewer/2022081506/55b3cd1ebb61eb723c8b4693/html5/thumbnails/11.jpg)
11
April 14, 2023
11
Kerättiin User storyt
BusinessAs a Prospective Employee I want to to find contacts to HR so that for information in regards to job search applications
TechnicalAs a user I want to see highlighted content at hero area at top of page linked to separate content page to learn more about highlighted subject
![Page 12: Outokumpu responsiivinen verkkosivut_e_communication_ux_summit](https://reader035.vdocuments.pub/reader035/viewer/2022081506/55b3cd1ebb61eb723c8b4693/html5/thumbnails/12.jpg)
1212
April 14, 2023
Luotiin runko yhteisissä sketsaus-sessiossa
![Page 13: Outokumpu responsiivinen verkkosivut_e_communication_ux_summit](https://reader035.vdocuments.pub/reader035/viewer/2022081506/55b3cd1ebb61eb723c8b4693/html5/thumbnails/13.jpg)
1313
April 14, 2023
...tehtiin klikattava prototyyppi ja visuaalinen suunnittelu puuttuvien komponenttien osalta
![Page 14: Outokumpu responsiivinen verkkosivut_e_communication_ux_summit](https://reader035.vdocuments.pub/reader035/viewer/2022081506/55b3cd1ebb61eb723c8b4693/html5/thumbnails/14.jpg)
14
Responsiivisen sivun toteutus
April 14, 2023
14
![Page 15: Outokumpu responsiivinen verkkosivut_e_communication_ux_summit](https://reader035.vdocuments.pub/reader035/viewer/2022081506/55b3cd1ebb61eb723c8b4693/html5/thumbnails/15.jpg)
15
Tuloksena monikäyttöiset komponentit
Highlight Box
Highlight Box with an image
Highlight Box inside content area, 1-column version
Highlight Box inside content area, 2-column version
![Page 16: Outokumpu responsiivinen verkkosivut_e_communication_ux_summit](https://reader035.vdocuments.pub/reader035/viewer/2022081506/55b3cd1ebb61eb723c8b4693/html5/thumbnails/16.jpg)
16
… joita voidaan käyttää eri paikoissa
![Page 17: Outokumpu responsiivinen verkkosivut_e_communication_ux_summit](https://reader035.vdocuments.pub/reader035/viewer/2022081506/55b3cd1ebb61eb723c8b4693/html5/thumbnails/17.jpg)
17
Lopputulos
April 14, 2023
17
![Page 18: Outokumpu responsiivinen verkkosivut_e_communication_ux_summit](https://reader035.vdocuments.pub/reader035/viewer/2022081506/55b3cd1ebb61eb723c8b4693/html5/thumbnails/18.jpg)
18
Miten agiili responsiivinen toteutus meni?
• Mobile firstiä pyrittiin pitämään mahdollisimman paljon mukana.
• Tärkeää, että tekijät olivat mahdollisimman paljon paikan päällä
• Klikkailtava prototyyppi auttoi huomattavasti kommunikoinnissa ja sitouttamisessa.
• Visual guideline rakentui projektin aikana sitä mukaan kuin tarpeet saatiin organisaatiosta.
• Useita muutoksia ja tarpeita pysytyttiin ottamaan mukaan sekä huomioon projektin edetessä.
![Page 19: Outokumpu responsiivinen verkkosivut_e_communication_ux_summit](https://reader035.vdocuments.pub/reader035/viewer/2022081506/55b3cd1ebb61eb723c8b4693/html5/thumbnails/19.jpg)
19
SharePoint ja responsiivisuus
• Toimittajan tärkeä tietää responsiivisten web partien rajoitukset ja mahdollisuudet
• Kuvien käsittely oli erittäin positiivinen yllätys
• Sivupohjat kannattaa suunnitella mahdollisimman yksinkertaisiksi ja modulaarisiksi (Drag & drop)
• Metatietopohjainen rakenne parempi vaihtoehto kun luodaan responsiiviset sivut
![Page 20: Outokumpu responsiivinen verkkosivut_e_communication_ux_summit](https://reader035.vdocuments.pub/reader035/viewer/2022081506/55b3cd1ebb61eb723c8b4693/html5/thumbnails/20.jpg)
20
04/14/2023
"I've missed more than 9000 shots in my career. I've lost almost 300 games. 26 times, I've been trusted to take the game winning shot and missed. I've failed over and over and over again in my life. And that is why I succeed."
- Michael Jordan