Be Beautiful

A talk about a project done right

On timeWithin budget

No stressAccomplished business goals

Better for end users

A fairy tale? Let's see.

BliVakker

Five MinutesWe provide mobile solutions

We need a mobile solution

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 femalecosmetics web shopin Norway

● 100.000.000 NOKof yearly revenue

● 350.000 registered users

flickr wolfgangfoto(no. bli vakker = en. be beautiful)

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 yourideas 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 tenpages 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 ofdevelopment 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/3Keep everyone in the loop

2/3Solve a business and user problem

before a technical one

3/3Decide what to build

before building it

Thank you and stay beautiful

Contact

Merlin Rebrović

@merlinrebrovic

merlin.rebrovic.net

Five Minutes

@petminuta

www.fiveminutes.eu