Mid Sweden University

This report describes the independent work of creating a web-based price calculator for a company. The company helps its customers with value-based pricing. The company's customers customers are private individuals (B2C). The company has identified that there is a need to be able to visually explain and illustrate to their customers how margins can increase, by setting the right price and making calculations. A price calculator can facilitate this, which then has a appropriate User Experience (UX) for the intended purpose and is adapted to its users. The overall aim of the project is to develop a price calculation tool that can use different inputs and variables from an existing database, for example via an API. The price calculator performs calculations and visualizes how big a difference a new price can increase the margin. Design and basis for applications have been developed using, among other things, Figma. In a first step, a prototype has been developed from the ground, but for the style must remain consistent with the company's, there has been an opportunity via Figma to use the company's brand book to create a more uniform design. In the preliminary work with the prototype, a target group analysis has also been carried out, and some persona have been developed. Theories around web usability, UI and UX have been used in the development of the prototype. Based on the prototype, the application has been developed and coded with the program Visual Studio Code (VSC), as well as with the help of the programming languages; HTML, CSS, JavaScript, JSX, the React library and the Ant Design library. Prototype and the finished application have been test-run to see the functionality and if they are user-friendly.

Den här rapporten beskriver det självständiga arbetet med att skapa en webbaserad priskalkylator åt ett företag. Företaget hjälper sina kunder med värdebaserad prissättning. Företagets kunder vänder sig i sin tur till privatpersoner (B2C). Företaget har identifierat att det kan finnas ett behov för deras kunder att visuellt kunna förklara och illustrera hur marginalerna kan ökas, genom att sätta rätt pris och att göra beräkningar. En priskalkylator kan då komma att underlätta detta, vilken har genomtänkt och lämplig User Experience (UX) för avsett ändamål och är anpassad utefter dess användare. Projektets övergripande syfte är att utveckla ett priskalkyleringsverktyg som kan använda olika inputs och variabler från en befintlig databas, exempelvis via ett Api. Priskalkylatorn genomför beräkningar och visualiserar hur stor skillnad ett nytt pris kan komma att öka marginalen. Design och grund för applikationen har utvecklats med hjälp av bland annat Figma. I ett första steg så har en prototyp arbetats fram från grunden, men för att stilen ska hålla sig enhetlig med företagets, så har det funnits möjlighet via Figma att nyttja företagets brand book (varumärkesbok) för att skapa en mer enhetlig design. I förarbetet med prototypen så har även en målgruppsanalys genomförts, samt några persona tagits fram. Teorier kring webbanvändbarhet, UI och UX har nyttjats vid framtagandet av prototypen. Utifrån prototypen så har applikationen utvecklats och kodats med programmet Visual Studio Code (VSC), samt med hjälp utav programmeringsspråken; HTML, CSS, JavaScript, JSX, biblioteket React och biblioteket Ant Design. Prototypen och den färdiga applikationen har testkörts för att se om den uppfyller funktionalitet och är tillräckligt användarvänlig.