Using rapid high fidelity prototyping to help the VELUX A/S team improve customer experience of web shops


Project type
User experience, Usability, Prototyping

Photo: Velux A/S

We helped VELUX A/S through a fast process of ideation and concept exploration on the main user flows in some VELUX A/S webshops. We designed some high fidelity prototypes to explore key layouts, user interactions, and user experience. True to the VELUX A/S visual identity, fitted, tested and easy to implement for the backend team.

Some fresh air for the current system

In the fall of 2016, Granyon had a couple of intensive sessions with VELUX A/S to help develop UX strategies for two e-commerce platforms. First, we worked with ideation with the help of pen and paper, a couple of meetings and a workshop to discover the optimal design for great user experience. This phase was all about laying out the foundation for the interaction design, micro interactions, overall layout, and design. Then we worked three weeks intensively on high fidelity prototypes, designed, so they appeared completely finished, for better user feedback, and a smoother transition from concept and design to actual backend development in Sitecore™.

„It has really been a great way of working. I wish all the other agencies would work this way“

High fidelity prototyping in no time

The ideation phase was very precise and effective due to a strong team from VELUX A/S, and the most rapid prototyping tool out there; the hand and a pen. It simply helped us discuss, explore, and ideate on several solutions to the big and small UX decisions that had to be made. It brought the team on board and helped everyone realize the pros and cons of all decisions, big and small.

The quickest of all prototypes is the pen and the paper. The combination of the two is amazing to get thoughts down, get people talking and reveal hidden agendas, wishes, possibilities. Do this carefully, and the design + prototyping process is a lot smoother.

From these sketches and notes, we were able to move directly into high fidelity prototyping, true to the corporate design of VELUX A/S, but improving where possible. Our prototypes are always responsive and can be seen in any browser, which made it easy for team members in VELUX A/S to follow along, prepare for meetings and finally use it to move into production in record time. 

There were no fall backs and no hidden surprises. Just a smooth, effective process to reach conclusions and move on.

You can use rapid prototyping too

With this approach, it becomes effective and inexpensive to improve existing solutions. With the precision of a surgeon, we are able to identify where improvements can be made, how they could be made, and we are able to test this with the audience in a design, that behaves exactly as it should before it is even built.

This can help improve core user flows on digital solutions. How do we make people read more? How can we convert more users into signing up for newsletters? How can we improve the conversion rates in our webshop? We can ideate, build and test all of this in a matter of weeks. Inexpensive but efficient and easy to adapt to existing structures in the company or with technical partners.
The pretotype process was a featured case at the latest sales conference from Danish Industry. Here Heidi Heibroch Donner from VELUX and Granyon CEO Mikkel Noe Westh presented the method and the great results it has given VELUX see the talk here(in Danish)

“We have been very pleased with your work and think we had a great dialogue underway. Your way of working is really exciting because you quickly got close to something realistic - that is more than a prototype in that sense and also makes it far easier to test. Moreover, you had the courage to challenge us and the guidelines the design is subjected to. We really appreciate that!"

A prototyping process with Granyon could contain:
  1. Initial meeting.
    Meet and greet. We listen to you, take the time to understand and provide immediate advice and feedback on how this could be solved. It is, of course, free of charge and with no strings attached.
  2. Agreement on scope 
    Every challenge is different. We seek to find a good balance and provide a time plan and a fitting budget. We like to think smart, and will likely challenge you on how to best spend your money. We always leave room for you to back out along the way, if you should want to (no, right?).
  3. Initial workshop(s)
    To discover: what is our objective. What is a given? Which design changes should we undertake, if any? What user flows are important  to reach the desired goals.
  4. ideatioN & Concept 
    Based on our knowledge we sketch, discuss and explore various solutions to the problems. This is usually followed by a meeting to discuss pros and cons.
  5. Rapid High-fidelity prototyping
    We usually build 2-3 directions for the interaction design, we test it and fine tune the solutions we agree to move on with.
  6. Handover and implementation
    We hand over the prototype to the development team, either in a meeting with a Q&A session or by a useful guide to the prototype. What you see is what we want, so it is easy for the development team to start building.