Spangsberg Chokolade is a big flødebolle-brand in Denmark - a unique Danish dessert. Spangsberg Chokolade believes in innovation and quality in their products, which their website needed to communicate as well. To help them achieve this, I re-designed their website as a semester project at the IT-University in Copenhagen.

 User-centerede design


As a project management tool we used SCRUM. By using SCRUM we focused on iterations in the development and gaining a constantly deeper understanding of our design and solution. To keep our process going we used a SCRUM-board to delegate the different assignments in relation to both the product and the product-paper.   



2. Design Research

To get a better understanding of Spangsberg Chokolade and their customers, we visited the factory and had a meeting with the management. We got access to their data from Google Analytic to understand the performance of their website, and we interviewed respondents from the target group to get to know them better, which we created personas from.



Based on the insights from the design research we synthesized all our data by using the SWOT/TOWS model to understand the current situation and which strategic actions that could be beneficial for the organization and brand. The analysis showed that an expansion of the brand, focus on credibility, consistency, storytelling and a webshop as an add-on service would be beneficial. 


4. Choosing a strategy

Persuasive Design is a strategy that focuses on getting the user to change their perception and to make them act in a certain way. By applying this strategy we got to focus on functionality and usability, emotional and visual communication and content creation. We incorporated these aspects in the webdesign by focusing on storytelling, beautiful photography of ingredients and products, and a webshop. 



5. Brand Expansion

We learned from the SWOT/TOWS analysis that Spangsberg Chokolades brand could benefit from more consistency and credibility on their website. And by applying Persuasive Design as strategy, we needed to focus on emotional and visual communication. We, therefore, decided to expand the already existing brand, to provide a basis for a stronger communication of the brand. To exemplify this, we worked with moodboards and style tiles.


6. Wireframing

As a tool to synthesize our insights from the design research and the analysis here off, we created wireframes. We learned from the research that more than half of the visitors accessed the website from either mobile or tablet, which made the mobile-first approach fit our wireframing process well. Based on this knowledge our wireframes took inspiration from one-page websites as they are good for storytelling and easy to navigate on mobile/tablet. To make sure the user experience would be right for the user, we based the information architecture and the functionalities on scenarios and personas.


7. Prototyping

We coded the prototype of the website in HTML5 by using sections and articles, styled i CSS by using %'s  and em as values. To make the website responsive we specified media queries so it would fit to different platforms and screen-sizes.