Be Beautiful: A Case Study of BliVakker Mobile
-
Upload
merlin-rebrovic -
Category
Design
-
view
1.934 -
download
1
description
Transcript of Be Beautiful: A Case Study of BliVakker Mobile
![Page 1: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/1.jpg)
Be Beautiful
![Page 2: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/2.jpg)
A talk about a project done right
On timeWithin budget
No stressAccomplished business goals
Better for end users
![Page 3: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/3.jpg)
A fairy tale? Let's see.
![Page 4: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/4.jpg)
BliVakker
Five MinutesWe provide mobile solutions
We need a mobile solution
![Page 5: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/5.jpg)
In-flight fun facts about Norway
![Page 6: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/6.jpg)
Home of the Vikings flickr mararie
![Page 7: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/7.jpg)
Frozen pizza is a national dish flickr nettsu
![Page 8: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/8.jpg)
1 lake per 10 Norwegians flickr denial_land
![Page 9: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/9.jpg)
The battle of Hoth was filmed in Norway photo Christian Ranke
![Page 10: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/10.jpg)
BliVakker
● The biggest femalecosmetics web shopin Norway
● 100.000.000 NOKof yearly revenue
● 350.000 registered users
flickr wolfgangfoto(no. bli vakker = en. be beautiful)
![Page 11: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/11.jpg)
Webshop traffic
![Page 12: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/12.jpg)
Phase 1 – Design and Problem Solving
![Page 13: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/13.jpg)
![Page 14: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/14.jpg)
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
![Page 15: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/15.jpg)
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
![Page 16: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/16.jpg)
![Page 17: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/17.jpg)
Very fast to produce and manipulate
![Page 18: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/18.jpg)
Get everyone involved
![Page 19: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/19.jpg)
Iterations
● Sketching is still the fastest way to get yourideas out from your head in front of others
● Working in two hour iterations, often changing directions
![Page 20: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/20.jpg)
Some things had to be completely reworked for mobile
![Page 21: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/21.jpg)
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
![Page 22: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/22.jpg)
![Page 23: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/23.jpg)
![Page 24: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/24.jpg)
![Page 25: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/25.jpg)
Visual documentation
● With both wireframes and the prototype, the functional specification was less than tenpages long
![Page 26: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/26.jpg)
Phase 2 – Visual Design and Coding
![Page 27: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/27.jpg)
![Page 28: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/28.jpg)
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
![Page 29: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/29.jpg)
![Page 30: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/30.jpg)
![Page 31: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/31.jpg)
![Page 32: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/32.jpg)
![Page 33: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/33.jpg)
![Page 34: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/34.jpg)
Front-end Coding
● Custom HTML and CSS, no frameworks● Mostly vanilla JavaScript and some jQuery
– Conform to their back-end, speed ofdevelopment was important
● CSS3 animations where available
![Page 35: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/35.jpg)
Back-end Coding
● Done by BliVakker team● A good decision – let each party do what
they do best
![Page 36: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/36.jpg)
Available at blivakker.no
![Page 37: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/37.jpg)
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
![Page 38: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/38.jpg)
Takeaways
![Page 39: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/39.jpg)
1/3Keep everyone in the loop
![Page 40: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/40.jpg)
2/3Solve a business and user problem
before a technical one
![Page 41: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/41.jpg)
3/3Decide what to build
before building it
![Page 42: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/42.jpg)
Thank you and stay beautiful
![Page 43: Be Beautiful: A Case Study of BliVakker Mobile](https://reader033.fdocuments.us/reader033/viewer/2022052903/5578b98dd8b42a85538b4592/html5/thumbnails/43.jpg)
Contact
Merlin Rebrović
@merlinrebrovic
merlin.rebrovic.net
Five Minutes
@petminuta
www.fiveminutes.eu