Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Be Beautiful
A talk about a project done right

On time
Within budget
No stress
Accomplished business goals
Better for end users
A fairy tale? Let's see.
BliVakker
We need a mobile solution

Five Minutes
We provide mobile solutions
In-flight fun facts about Norway
Home of the Vikings

flickr mararie
Frozen pizza is a national dish

flickr nettsu
1 lake per 10 Norwegians

flickr denial_land
The battle of Hoth was filmed in Norway

photo Christian Ranke
BliVakker
●

●

●

The biggest female
cosmetics web shop
in Norway
100.000.000 NOK
of yearly revenue
350.000 registered us...
Webshop traffic
Phase 1 – Design and Problem Solving
Research
●

●

●

●

Current web analytics
Usability testing of competitors' mobile websites
(remote testing)
Discussions ...
Direction
●

●

After weighing between a native app, a hybrid and
a web solution – we've chosen the web
Benefits:
–

Speed...
Very fast to produce and manipulate
Get everyone involved
Iterations
●

●

Sketching is still the fastest way to get your
ideas out from your head in front of others
Working in two...
Some things had to be completely reworked for mobile
Going digital
●

●

Stable ideas get converted to digital wireframes
showing the flow
Clickable prototypes on a mobile dev...
Visual documentation
●

With both wireframes and the prototype, the
functional specification was less than ten
pages long
Phase 2 – Visual Design and Coding
Visual Design Challenges
●

●

●

Modernize existing design
Use common patterns, but don't follow specific
platform guidel...
Front-end Coding
●

Custom HTML and CSS, no frameworks

●

Mostly vanilla JavaScript and some jQuery
–

●

Conform to thei...
Back-end Coding
●

●

Done by BliVakker team
A good decision – let each party do what
they do best
Available at blivakker.no
What could be improved
●

Big project and long time to market mean you
have to wait a lot to see the real feedback
–

●

S...
Takeaways
1/3
Keep everyone in the loop
2/3
Solve a business and user problem
before a technical one
3/3
Decide what to build
before building it
Thank you and stay beautiful
Contact
Merlin Rebrović

Five Minutes

@merlinrebrovic

@petminuta

merlin.rebrovic.net

www.fiveminutes.eu
Be Beautiful: A Case Study of BliVakker Mobile
Be Beautiful: A Case Study of BliVakker Mobile
Be Beautiful: A Case Study of BliVakker Mobile
Be Beautiful: A Case Study of BliVakker Mobile
Be Beautiful: A Case Study of BliVakker Mobile
Be Beautiful: A Case Study of BliVakker Mobile
Be Beautiful: A Case Study of BliVakker Mobile
Be Beautiful: A Case Study of BliVakker Mobile
Be Beautiful: A Case Study of BliVakker Mobile
Be Beautiful: A Case Study of BliVakker Mobile
Be Beautiful: A Case Study of BliVakker Mobile
Prochain SlideShare
Chargement dans…5
×

Be Beautiful: A Case Study of BliVakker Mobile

3 270 vues

Publié le

A talk I gave on WebCamp Zagreb 2013 and Advanced Technology Days 2013 about BliVakker Mobile project. It outlines the design and development process we used from first contact to pushing it to production. More info at http://merlin.rebrovic.net/blog/webcamp-zagreb-2013-talk

Publié dans : Design, Technologie, Business
  • Soyez le premier à commenter

Be Beautiful: A Case Study of BliVakker Mobile

  1. 1. Be Beautiful
  2. 2. A talk about a project done right On time Within budget No stress Accomplished business goals Better for end users
  3. 3. A fairy tale? Let's see.
  4. 4. BliVakker We need a mobile solution Five Minutes We provide mobile solutions
  5. 5. In-flight fun facts about Norway
  6. 6. Home of the Vikings flickr mararie
  7. 7. Frozen pizza is a national dish flickr nettsu
  8. 8. 1 lake per 10 Norwegians flickr denial_land
  9. 9. The battle of Hoth was filmed in Norway photo Christian Ranke
  10. 10. BliVakker ● ● ● The biggest female cosmetics web shop in Norway 100.000.000 NOK of yearly revenue 350.000 registered users (no. bli vakker = en. be beautiful) flickr wolfgangfoto
  11. 11. Webshop traffic
  12. 12. Phase 1 – Design and Problem Solving
  13. 13. Research ● ● ● ● Current web analytics Usability testing of competitors' mobile websites (remote testing) Discussions with marketing, sales, customer support (direct contact with users) Customer journey map
  14. 14. Direction ● ● After weighing between a native app, a hybrid and a web solution – we've chosen the web Benefits: – Speed of development across three major platforms – Easy linking to products, great for SEO and email marketing – Easy and fast to upgrade and extend
  15. 15. Very fast to produce and manipulate
  16. 16. Get everyone involved
  17. 17. Iterations ● ● Sketching is still the fastest way to get your ideas out from your head in front of others Working in two hour iterations, often changing directions
  18. 18. Some things had to be completely reworked for mobile
  19. 19. Going digital ● ● Stable ideas get converted to digital wireframes showing the flow Clickable prototypes on a mobile device really help you get the feel of the application
  20. 20. Visual documentation ● With both wireframes and the prototype, the functional specification was less than ten pages long
  21. 21. Phase 2 – Visual Design and Coding
  22. 22. Visual Design Challenges ● ● ● Modernize existing design Use common patterns, but don't follow specific platform guidelines (iOS, Android, WP) Make everything work from 3.5" to 5.5" screens
  23. 23. Front-end Coding ● Custom HTML and CSS, no frameworks ● Mostly vanilla JavaScript and some jQuery – ● Conform to their back-end, speed of development was important CSS3 animations where available
  24. 24. Back-end Coding ● ● Done by BliVakker team A good decision – let each party do what they do best
  25. 25. Available at blivakker.no
  26. 26. What could be improved ● Big project and long time to market mean you have to wait a lot to see the real feedback – ● Solution: Smaller scope and publish in milestones Final implementation has some minor differences compared to the initial design – Solution: Design team should be present on all phases
  27. 27. Takeaways
  28. 28. 1/3 Keep everyone in the loop
  29. 29. 2/3 Solve a business and user problem before a technical one
  30. 30. 3/3 Decide what to build before building it
  31. 31. Thank you and stay beautiful
  32. 32. Contact Merlin Rebrović Five Minutes @merlinrebrovic @petminuta merlin.rebrovic.net www.fiveminutes.eu

×