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 users
(no. bli vakker = en. be beautiful)
flickr wolfgangfoto

Webshop traffic

Phase 1 – Design and Problem Solving

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

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

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 hour iterations, often changing
directions

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 device really help
you get the feel of the application

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 guidelines (iOS, Android, WP)
Make everything work from 3.5" to 5.5" screens

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

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
–
●
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

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