Jag kommer i denna uppsats beskriva den designprocess som pågått vid skapandet av en webbaserad informationsplattform från koncept till slutprodukt. Mitt uppdrag har varit att effektivisera en webbyrås nuvarande sätt att hantera och sprida information på, som bestod av en blandning mellan digital och analog information, och skapa en ny webbaserad informationsplattform. Den nya webbaserade informationsplattformen ska kunna samla all information på en plats och skapa ett effektivare informationsutbyte mellan de anställda på företaget. Jag har använt mig av två teoretiska ramverk; Nielsens tio heuristics samt Krugs visuella design hierarki. Jag har arbetat nära beställaren för att kunna skräddarsy webbplatsen till deras behov. Resultatet efter ett omfattande arbete med designmallar och front-end kodning blev grunden för webbyråns webbaserade informationsplattform, utvecklad för att effektivisera spridningen av information på företaget. / In this essay I will describe the design process during the creation of a web-based information platform, from concept to final product. My assignment has been to take a web agency’s current way of managing and distributing information, which consisted of a mix between digital and analog information, and create a new web-based information platform. The new web-based information-platforms purpose is to gather all information in one place for easier exchange of information between employees at the company and make it more efficient. I used two theoretical frameworks as a theoretical base working on the project; Nielsen's ten heuristics and Krugs visual design hierarchy. I have worked closely with the client to customize the platform to their needs. The result after extensive work with design templates and front-end coding became the foundation for the web agency’s web-based platform, developed to distribute information more efficiently within the agency.

Graphical User Interface, which is known as GUI, is a way for a person to communicate and interact with a system through icons or other visual indicators. A well designed and intuitive user interface is critical to the success of a system since it encourages a natural interaction between a user and a system, thus conveying information more clearly and efficiently to the user.The aim of this study is to design and develop a user interface that is used in a financial technology company in their credit risk assessment process. The current user interface contains a visualization of an individual credit assessment flow together with a lot of data that is generated in the process. Some of the data is not properly visualized, which leads to confusion among end users.In order to optimize the user experience, a user-centered design approach was used combined with a heuristic evaluation. A new user interface was designed and implemented and according to the heuristic evaluation result, the usability was greatly improved. The new interface is able to help the company to visualize their credit risk assessment process in a better way and facilitate credit officers to make credit decisions. The result could also provide insights to other companies or organizations in presenting their data more clearly and effectively. / Grafiskt användargränssnitt, som även kallas GUI, är ett sätt för en person att kommunicera och interagera med ett system genom ikoner eller andra visuella indikatorer. Ett väl utformat och intuitivt användargränssnitt är avgörande för framgången för ett system, eftersom det uppmuntrar till en naturlig interaktion mellan en användare och ett system och därmed förmedlar information tydligare och effektivare till användaren.Syftet med denna studie är att designa och utveckla ett användargränssnitt som används i ett finansiellt teknikföretag i deras kreditriskbedömningsprocess. Det nuvarande användargränssnittet innehåller en visualisering av ett individuellt kreditbedömningsflöde tillsammans med mycket data som genereras i processen. En del av data är inte korrekt visualiserade, vilket leder till förvirring bland slutanvändare.För att optimera användarupplevelsen användes en användarcentrerad designmetod i kombination med en heuristisk utvärdering. Ett nytt användargränssnitt designades och implementerades och enligt det heuristiska utvärderingsresultatet förbättrades användbarheten kraftigt. Det nya gränssnittet kan hjälpa företaget att visualisera sin kreditriskbedömningsprocess på ett bättre sätt och underlätta kreditansvariga att fatta kreditbeslut. Resultatet kan också ge andra företag eller organisationer insikter om att presentera sina uppgifter tydligare och mer effektivt.

User interfaces are a crucial point in the usage of products. A user interface is developed to make a product easy to use and understand while also presenting data, feedback and functionality to the user. In this thesis we present and explain the whole development process of a front end project. The Swedish company, Kemizares, was searching for a user interface for their finance module in their upcoming application. In this work we developed the user interface for such a module with regards to Kemizares’ functional requirements as well as the necessity that the user interface of the module could be integrated into the their application which already had an existing user interface. The solution to the problem began with a literature study in which we researched tools and programs we would use to develop the module as well as researching national and international requirements for invoices to identify necessary data to use in the finance module. Afterwards we set up a timeline with deadlines to guide us throughout the development. An agile iterative feedback method was used during the implementation of the module with Kemizares. The finance module was created and with the iterative feedback method we used during development we were able to ensure that Kemizares was satisfied with the product. However, due to limiting factors we were not able to finish the whole module and hence not able to fulfill all the requirements. The conclusion is that the module in its current state is not a viable solution for Kemizares since it was left undone but a good ground to continue from that has taken required financial data, functional requirements, and design compatibility with the rest of the application into consideration. / Användargränssnitt är en viktig punkt i användningen av produkter. Ett användar-gränssnitt är utvecklat för att göra en produkt enkel att använda och förstå samtidigt som den presenterar data, feedback och funktionalitet för användaren. I denna rapport presenterar och förklarar vi hela utvecklingsprocessen för ett frontend-projekt. Det svenska företaget Kemizares letade efter ett användargränssnitt för sin finansmodul i sin kommande applikation. I detta arbete utvecklade vi användargränssnittet för en sådan modul med avseende på Kemizares funktionella krav samt behovet av att modulens användargränssnitt kunde integreras i deras applikation som redan hade ett befintligt användargränssnitt. Lösningen på problemet började med en litteraturstudie där vi undersökte verktyg och program som vi skulle använda för att utveckla modulen samt undersökte nationella och internationella krav på fakturor för att identifiera nödvändiga data att använda i finansmodulen. Därefter satte vi upp en tidslinje med deadlines för att vägleda oss genom hela utvecklingen. En agil iterativ återkopplingsmetod användes under implementeringen av modulen med Kemizares. Finansmodulen skapades och med den iterativa återkopplingsmetoden som vi använde under utvecklingen kunde vi säkerställa att Kemizares var nöjd med produkten. Men på grund av begränsande faktorer kunde vi inte avsluta hela modulen och kunde därför inte uppfylla alla krav. Slutsatsen är att modulen i sitt nuvarande tillstånd inte är en lönsam lösning för Kemizares eftersom den lämnades ofärdig, men en bra grund att fortsätta från som har tagit hänsyn till nödvändiga ekonomiska data, funktionella krav och designkompatibilitet med resten av applikationen.

Sweden produced 215 kilotons of electronic waste in 2016. One way to reduce this amount is to repair electronic devices when they fail instead of replacing them. The company Mavenoid has a troubleshooting service in the form a web application to help troubleshoot machines like for example consumer electronics. The company desired a tool to visualize data about the usage of the troubleshooting models in their web app. The prospect was that the users who build the troubleshooting models would be able to analyse how their models are being used and how well they work with the tool. To implement the tool, a method with three phases was used. An initial preparation phase with requirements elicitation via a domain analysis and set-up of the development environment, a development phase with iterative development and requirements management with weekly meetings and an analysis phase with evaluation of the tool according to the requirements and the status of a pull request. The product met eight out of ten requirements and was of a sufficiently high quality that it could be integrated into the company’s system. The use of the library C3 resulted in a 21% increase of the web application’s build size. / Sverige producerade 2016 215 kiloton elektronikavfall. Ett sätt att minska denna mängd är att reparera elektronik när den fallerar istället för att byta ut den. Företaget Mavenoid erbjuder en tjänst i form av en React webapplikation för att underlätta felsökning av maskiner som t.ex. hemelektronik. Företaget eftersökte ett verktyg för att visualisera data om användningen av felsökningsmodellerna i sin webbapplikation. Förhoppningen var att de användare som bygger modellerna via det nya verktyget skulle kunna analysera hur deras modeller används och väl de fungerar. För att utveckla verktyget användes en metod med tre faser. En inledande förberedelsefas med kravinsamling via en domänundersökning och uppbyggnad av utvecklingsmiljö, en utvecklingsfas med iterativ utveckling och kravhantering med veckomöten och en analysfas med utvärdering av verktyget efter kraven och status på en pull-request. Produkten uppfyllde åtta utav tio av de insamlade kraven och var av tillräckligt hög kvalitet att integreras i företagets system. Användningen av biblioteket C3 medförde att webapplikationens transaktionsstorlek ökade med ca 21%

User Interface Design is the center concept of this thesis. It was used throughout this thesis in order to remedy the design issue of a product called Loredge. Loredge was a digital document reader that contained a Library page with a very simple design. The ultimate goal was to create design suggestions that provides users with a lot of convenience in navigating items for Loredge’s Library page. The solution was proposed by introducing the design process and the concept of Human-Centered Design, which were the essentials in compliance with Loredge users’ desires. The end results demonstrated some interesting facts about users that researchers did not think about at the beginning, which was very helpful to recognize what users want the most for themselves. Despite some predictable answers, the outcome indeed gave the problem a potential solution. The solution was to introduce categories/groups to users and design for menus and buttons that helps user filter out the items they want to navigate. This was implemented to digital mock-ups using a wireframing tool called Axure. The mock-ups could be found within this degree project. / Användargränssnitt är centrumkonceptet för denna avhandling. Det användes under hela denna avhandling för att avhjälpa designproblemet av en produkt som heter Loredge. Loredge var en digital dokumentläsare som innehöll en bibliotekssida med en mycket enkel design. Det ultimata målet var att skapa designförslag som ger användarna mycket bekvämlighet i navigeringsdokument för Loredges bibliotekssida. Lösningen föreslogs genom att introducera designprocessen och konceptet Human-Centered Design, vilka var nödvändiga i enlighet med Loredge-användarnas önskemål. Slutresultatet visade några intressanta fakta om användare som forskare inte tänkte på i början, vilket var till stor hjälp för att känna igen vad användarna vill ha mest för sig själva. Trots vissa förutsägbara svar gav utfallet verkligen problemet en potentiell lösning. Lösningen var att introducera kategorier / grupper till användare och design för menyer och knappar som hjälper användaren att filtrera ut de dokument som de vill navigera. Detta implementerades för digital mock-ups med hjälp av ett wireframing verktyg som heter Axure. Mock-ups kunde hittas inom detta examensarbete.