The document summarizes a mobile website project for a Norwegian cosmetics company called BliVakker. It discusses researching user needs, designing wireframes through iterative testing, implementing the visual design and front-end coding, and the back-end coding being handled by BliVakker's team. Key takeaways included keeping everyone informed throughout the process, solving the business and user problems before technical ones, and deciding what to build before starting to code. The final product was launched at blivakker.no.
9. The battle of Hoth was filmed in Norway
photo Christian Ranke
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
14. 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
15. 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
19. 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
21. 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
28. 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
29.
30.
31.
32.
33.
34. 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
37. 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