Designing a Digital Customer Portal for
BDX Företagen AB
- A User-friendly Web Application Interface
Karin Östman
Industrial Design Engineering, master's level 2021
Luleå University of Technology
Department of Social Sciences, Technology and Arts
Designing a Digital
Customer Portal for
BDX Företagen AB
- A User-friendly Web
Application Interface
Karin Östman
2021
Supervisor: JörgenNormark (LTU) Supervisor: Anders Englund (BDX Företagen AB) Reviewer: SantiTaweesamarn Examiner: ÅsaWikberg-Nilsson
CIVILINGENJÖR I TEKNISK DESIGN
Master of Science Thesis in Industrial Design Engineering Designing a digital customer portal for BDX Företagen AB - A user-friendly web application interface
© Karin Östman
Published and distributed by Luleå University of Technology SE-971 87 Luleå, Sweden
Telephone: + 46 (0) 920 49 00 00 Printed in Luleå Sweden by
Luleå University of Technology Reproservice Luleå, 2021
Acknowledgement
First and foremost, I would like to thank BDX for giving me the opportunity to conduct this master thesis project together with them. I would also like to thank my supervisor at BDX Företagen AB Anders Englund for taking the time to advise and support me during the project. I would like to dedicate a special thank you to my project group at BDX Företagen AB for supporting me, discussing ideas and being a large part of the project.
I would also like to thank my supervisor Jörgen Normark, at Luleå University of Technology, for guiding me though this project, giving me useful feedback and answering my questions.
I would like to thank all of you taking part of workshops and user tests.
Without you this project would not have been possible. Your inputs and feedbacks have given me valuable information that have brought this project forward.
Lastly, I would like to thank my family and my partner for always believing in me and supporting me along the way, thank you!
Karin Östman Luleå, Sweden June 2021
Abstract
The complexity in the construction industry with multiple stakeholders involved during a project create a demand for good communication. The information channel between contractor and customer with relevant and updated information is important for success in a project. Manual handling of the information can lead to loss of important information due to the human factor.
This master thesis deals with the development of a prototype for a customer portal for the construction division at BDX Företagen AB. The aim of the project was to create a user-friendly and intuitive customer portal to eliminate administrative burdensome tasks.
The project followed an activity-centered approach with a base in design thinking with the phases planning, inspiration, ideation and prototype & test.
The phases were iterative and consisted of brainstorming, co-design workshop, user testing and prototyping. The focus was to understand the user’s needs in relation to the functions that needed to exist for the system to work optimal. Users were involved during the project from creating a requirement specification to user test of the final prototype. Further to achieve this, relevant theories in user experience, design, gestalt and layout principles were researched in the literature review.
The project resulted in two user-friendly and intuitive prototypes for a customer portal, a mobile and computer version for the different screen size.
The customer portal includes relevant project information, ordering of a new project and changing settings for the user. The interface is associated with BDX and their colours but in a new setting.
Keywords: Industrial design engineering, activity-centered design, user experience, interface design
Sammanfattning
Komplexiteten inom infrastrukturbranschen med flertalet intressenter involverade under ett projekt skapar ett behov för god kommunikation.
Informationsflödet mellan entreprenör och kund, med relevant och uppdaterad information är viktig för att lyckas i ett projekt. Manuell hantering av informationsflödet kan skapa misstag som leder till att viktig information går förlorad på grund av den mänskliga faktorn.
Examensarbetet behandlar utvecklingen av en prototyp för en kundportal åt division entreprenad hos BDX Företagen AB. Syftet med projektet var att skapa en användarvänlig och intuitiv kundportal för att minimera administrativt tunga uppgifter.
Projektet följde aktivitetscentrerad design med bas i design thinking innehållande faserna planering, inspiration, idegenerering och prototyp &
test. Faserna var iterativa och bestod av metoder som brainstorming, co- designworkshop, användartester och skapandet av prototyper. Fokus låg på att förstå användarens behov i förhållande till de funktioner som var tvungen att existera för optimal funktion av systemet. Användarna var involverade under hela projektet från skapande av en behovsspecifikation till användartestet av den slutliga prototypen. För att uppnå detta användes relevanta teorier inom användarupplevelse, design, gestalt och layout principer i litteraturundersökningen.
Projektet resulterade i två användarvänliga och intuitiva prototyper för en kundportal skapade för dator och mobils skärmstorlek. Kundportalen består av relevant projektspecifik information, beställning av ett nytt projekt samt ändring av användarinställningar. Gränssnittet är associerat med BDX och deras färger
Nyckelord: Teknisk design, aktivitetscentrerad design, användarupplevelse, gränssnittsdesign
1. Introduction 2
1.1 Background 2
1.2 Stakeholders 3
1.3 Objectives and aims 3
1.4 Project scope 3
1.5 Thesis outline 4
2. Context 6
2.1 General construction process 6
2.2 Customer portal 7
2.3 Current state 7
2.3.1 Next Web Application 7 2.3.2 Italic Customer portal 8
2.4 Benchmarking 9
2.4.1 Similar Systems 9
2.4.2 Inspiration 10
3. Theoretical framework 14
3.1 Industrial Design Engineering 14 3.1.1 Human-Centered Design 14 3.1.2 Activity-centered design 14
3.1.3 Design thinking 15
3.2 Designing a digital interface 15
3.2.1 User experience 16
3.2.2 Layout 17
3.2.3 Design principles 19 3.2.4 Gestalt principles 20
3.2.5 Colour 21
4. Method and implementation 23
4.1 Design Process 23
4.2 Project planning 23
4.3 Literature review 24
4.4 Inspiration 24
4.4.1 Requirements specification
workshop 24
4.4.2 Site architecture map 25
4.4.3 Mood board 26
4.5 Ideation 26
4.5.1 Idea generation 26
4.5.2 Co-design workshops 27
4.5.3 Colour palette 28
4.6 Concept development 28
4.6.1 The first concept 28
4.6.2 User test 28
4.6.3 Detail design 29
4.7 Method discussion 29
5. Results 32
5.1 Result of inspiration 32 5.1.1 Requirement Specification 32 5.1.2 Site architecture map 33
5.1.3 Mood board 33
5.2 Result of ideation 34
5.2.1 Idea generation 34
5.2.2 Co-design workshops 35
5.2.3 Colour palette 36
5.3 Result of concept development 36
5.3.1 The first concept 36
5.3.2 User test 36
5.4 Final result 38
5.4.1 Mobile web application 38
5.4.2 Web application 40
5.4.3 Feedback to the user 41 5.4.4 Modularity in the system 41
6. Discussion 44
6.1 Positioning the result 44
6.2 Relevance 44
6.3 Reflection 45
6.4 Conclusion 46
6.4.1 Project objectives and aims 46 6.4.2 Research questions 46 6.5 Recommendations for future work 47
References 48
Contents
List of appendix
Appendix A - Gantt chart 51
Appendix B - Workshop Miro 52
Appendix C - Mood board 56
Appendix D - Useberry 57
Appendix E - Final design 61
List of figures
Figure 1: The interface of Next web application with the four sections highlighted.
Figure 2: Next colours
Figure 3: Italics customer portal as a web application Figure 4: BDX home page
Figure 5: The Swedish Government Railways, SJs, homepage Figure 6: ND, Norbottens Destilleris homepage
Figure 7: EsonPac homepage
Figure 8: Phases of design thinking based on IDEO (2015).
Figure 9: Ten usability heuristics to avoid usability problems.
Figure 10: Scanning pattern for a large screen Figure 11: Scanning pattern for a small screen
Figure 12: Vertical alignment for a smaller appearance based on McKay Figure 13: Alignment of labels and text
Figure 14: Proximity Figure 15: Similarity Figure 16: Continuity Figure 17: Closure
Figure 18: Illustration of the design process Figure 19: Workshop methods
Figure 20: Process for generating ideas Figure 21: Sketches on paper
Figure 22: Requirement specification Figure 23: Site architecture map Figure 24: Mood board
Figure 25: Six concepts created in Adobe XD
Figure 26: Three remaining concepts for web application Figure 27: The menu options for a mobile web application Figure 28: Colour palette
Figure 29: Heatmap for changing password
Figure 30: Heatmap of selection of amount of work Figure 31: Heatmap of task 2 and 3
Figure 32: Mobile web applications log in and homepage.
Figure 33: Page for mobile workorder Figure 34: New mobile order
Figure 35: Web application log in page and homepage Figure 36: Page for workorder
Figure 37: Message for errors
1
1. Introduction
Information management is an important and large part of the complexity in the construction industry, with projects spanning over months or several years with subprojects in the hundreds or even thousands. The information channel to the customer with relevant and updated information is important for success. Manual administration can bring a high workload and lead to information loss due to the human factor.
This project covers the process of developing a prototype of a digital interface for a customer portal in the infrastructure industry. It is a master thesis project in Industrial Design Engineering at Luleå University of Technology. The duration of the project was January to June 2021 together with BDX Företagen AB in Luleå.
1.1 Background
BDX is a local contracting company in the north of Sweden, founded in 2003 after a merging of a few smaller companies. BDX provides a large range of services and products in infrastructure. The contracting division provides competence in railway, road, and groundwork.
The construction division at BDX are managing large projects spanning over several years to smaller projects over just a few weeks, which results in thousands of orders a year. A project management system keeps track of every order, and the individual worker reports their time and cost directly to the specific project order, for financial reports and invoice documentation.
A few years ago, the construction division transitioned into a new project management system, Next, providing new functionalities for better project control. The division are managing multiple type of contracts, and the contract with most administrative work is a framework agreement. A framework agreement, in relation to a regular contract, is according to Konkurrensverket (2015) an agreement with predefined terms under a limited time, without knowing the amount of work that will be ordered during the contract period.
One flaw of Next is the ability for a customer of BDX to order a new project directly in the system, crucial in a framework agreement. BDXs old project management system, Italic, had this function and are still used today for some customers to make orders, instead of using email. The orders are then manually added into Next, and this becomes administrative demanding.
The master thesis project focus on developing a prototype of a user-friendly customer portal, integrated in the current project management system Next.
3
1.2 Stakeholders
The primary stakeholder of this master thesis is the construction division at BDX, who initiated the project, and who will receive a digital prototype for a new customer portal. The prototype will become a basis for system development of the new portal and might result in more satisfied customers and minimize administrative work at BDX. Secondary stakeholders are BDX’s customers that will be the users of the customer portal. The portal should give relevant information and be user-friendly. Another important stakeholder is Next, the provider of the current project management system that will be involved in the project and the result.
1.3 Objectives and aims
The aim of the project was to develop a prototype of a customer portal for the contracting division at BDX Företagen AB. The interface should be user- friendly and intuitive to make it easy for the users to find project information and order new projects. The system should be modular to be able to expand in the future.
To achieve the aim, the objectives for the project was to understand the users and the context by investigating existing solutions and user’s needs.
Generating ideas with creative methods and create prototypes to conduct user test to validate the result.
For this project two research questions were defined, and the research was focused on:
1. How can a digital interface of a customer portal be designed to achieve a user-friendly and intuitive interface for overview and order of projects?
2. How can a digital interface be designed of a customer portal to be modular for both the user and developer, with the ability to expand in the future?
1.4 Project scope
This master thesis project in Industrial Design Engineering at Luleå University of Technology, was performed within a 20-week full-time work.
The project resulted in an interactive digital prototype but will not include coding and implementation due to time limitations.
The project had an activity-centered design approach due to the focus on functions in relations to the users need. Different users have been involved during the project in workshops, interviews, and user testing. Due to the Covid-19 pandemic most work has been conducted with digital means.
1.5 Thesis outline
The thesis consists of seven chapters. The first chapter presents an introduction and background to the project together with objectives and aims.
The second chapter presents the context of the project giving an understanding of the situation today and a benchmark for inspiration. The third chapter presents the theoretical framework relevant for this project including theories about industrial design engineering, user experience and visual design. The fourth chapter present the process and methods used during the project. The fifth chapter presents the results of the methods and the final design of the prototype. The sixth chapter presents the discussion of the project and answers to the research questions from chapter one. The seventh chapter contains references used during the project.
2
2. Context
Contextual research is about exploring and understanding the surrounding environment, relations and other connections of today’s solutions though gathering relevant information (Wikberg Nilsson et al, 2015). The following chapter presents the identified context of the project with a description of a construction process, definition of a customer portal with an analysis of the current and previous project management system presented along with a benchmark.
2.1 General construction process
The construction industry is project based and projects are often obtained through public procurement (Bröchner & Kadefors, 2009). The construction process starts with a quotation request and the contractor provides a description of how the project will be performed (Hansson et al., 2017). In Sweden there are two different types of contracts, a performance contract or a total contract, and the main difference between them is responsibilities for design (Bröchner & Kadefors, 2009). The project moves on to planning followed by implementation and finishing of the project.
Construction projects are complex by nature with multiple stakeholders involved during a project and can lead to misunderstandings (Söderberg, 2011). Further, projects can have deviating or unpredictable events and additional work must be done outside the original contract at an additional cost (Eriksson & Hane, 2014). In Sweden the term for additional work is called ÄTA (Ändringar Tillägg och Anvågående arbete).
To describe the complexity of the construction process we will use Söderbergs (2011) example where he compares a construction process to buying a new car. A designer would model the interior and exterior of the car and a construction engineer would calculate load bearing beams, axles, and the engine. An electrician constructs the electrical system. This will be summarised in a quotation and sent out to suitable companies. The car body will be ordered from Saab, the engine from Renault, the electrical system from Siemens and the list continues. Imagine the coordination problems and uncertainties a customer would face.
To further describe deviating on unpredictable events, imagine the seats did not fit into the car body and additional work had to be done to make them fit.
A solution could be to order new seats, but this would also add an extra cost and both solutions is outside the original contract.
7
2.2 Customer portal
BDX defines a customer portal as a link between contractor and customer in a digital user-friendly system. The customer should be assigned information and be able to order a new project. The customer portal will help to ease and eliminate administrative tasks.
A customer portal is a communication system of project specific information, for example status on the project, journal entries and economy updates.
Ordering new projects in a system can eliminate misunderstandings that can lead to legal issues. A customer portal should be useful for both the customer and the contractor.
2.3 Current state
The complex nature of the contractor process demands an advanced system.
A project management system keeps track of documentation driven by legal requirements and specified conditions in the contracts.
To develop an understanding of BDXs project management system and their need for a customer portal an analysis was conducted. The basis of the analysis was to understand what functionalities the customers needed of a system and what limitations existed.
The following section presents the findings of the analysis.
2.3.1 Next Web Application
Entering Next web application, you are presented with a large amount of information from start. I have divided the system into four different section, see figure 1. The first section presents buttons with administrative functions for both user and customer management. The second section presents a menu with a stair hierarchy displaying BDX business areas and their different projects. The third section presents the navigation of functions and the fourth section present the specific project information depending on the function chosen from the third section. Depending on the user’s level of access different functions can be displayed.
Figure 1: The interface of Next web application with the four sections highlighted.
1
2
3
4
The system has a flexibility with functions to work for a lot of different type of projects. Most of the information is presented in large spread sheets, similar to Excel, with column of categories and rows of information. To minimize the amount of information filtration can be applied by the user themselves or as level of access to what the user can see. Inviting a customer into Next is possible but is not the most user-friendly option.
Next uses white, three shades of grey and two shades or orange to highlight different sections, see figure 2. These colours are brand specific and are used thoughtout all their platforms. Colour is also used to present the status of a project with 10 different colours, see figure 1 in section two at the bottom. The colours can be specified for each user and for BDX, yellow is for ongoing project, green is for ordered project and black is for finished project.
Figure 2: Next colours
The mobile web application of Next present short project information, journal entries and time reporting. The mobile version was not part of the analysis.
2.3.2 Italic Customer portal
Italic developed a customer portal during 2013 to handle the thousands of orders a year a framework agreement produce. The system had two parts, one for BDX and one for the customer. The customers functions were to create orders of new workorder and monitor the workorders during the whole contract time. The main reason for changing system was a large new contract and Italic would need to develop a more advanced system. The development cost was a large factor in changing system.
The customer portals start page had project information, messages, and an overview of economics, see figure 3. The customer had a specific login for each contract and through a menu on top the customer could navigate between subproject, reports, and settings. The portal has a grey scale and green as an accent colour, in line with BDX graphical profile. The system is outdated graphically but the functions is still appreciated by BDX and some customers. The system has functions as project overview, create new projects, projects on map and generate reports.
9
Figure 3: Italics customer portal as a web application
The system has no connection to Next and administrative personal at BDX must manually enter the information from Italic into Next. This is still a better solution than have the customer writing an email, which is one option.
2.4 Benchmarking
Benchmarking was made with two different aspects, to understand how other system work and to gather visual inspiration from completely different applications.
2.4.1 Similar Systems
There is little information open on similar systems and the benchmarking was made on systems BDX have access to. A tailor-made system is created for the user’s specific needs but development and maintaining systems are expensive and need to be in relation to the cost of using other systems on the market.
TracsFlow is a system used by BDX in the division of machine and transport for managing transportation. The traffic manager can create an order in a web application and with the system being in real-time the driver receive the order in their mobile application and can accept and start the transport at once. TracsFlow have a customer web and BDX decides what information is shown for the customer. If for example the price is wrong, the driver can write in directly what he was promised and BDX can change the price before an invoice are created. TracsFlow, as a customer portal, provides the basic function to the user type and is designed to only give the functionalities necessary for the different users.
Trafikverket, the Swedish transport administrative, have different web applications and programs depending on the task. Chaos is a system for uploading and downloading construction documents, as drawings. The system is easy to use with only the functions necessary, a menu on top and a file explorer similar to computers. To use the system an education is reacquired to have authorization to deliver construction documentation.
Trafikverket have similar systems for different applications but are at the moment developing a new system, GUS, that will reduce the number of systems in use today.
2.4.2 Inspiration
Finding inspiration from different websites with a different purpose can give important insights on the design. An analysis was conducted on inspiring home pages on websites with the aspects of usability and aesthetics with focus on navigation.
BDXs own home page, see figure 4, have a dark menu on top with BDXs logo in the left corner and drop-down menus on each title in a light colour for extra contrast. Navigating through the menus is confusing by the choice of title and content, for example the title “Hållbarhet” (sustainability) have a subtitle for sponsoring, not related to sustainability.
There is a large main image representing what I think is quality and safety with the large text Builders of the future. The large images bring my attention to the top menu, and there is no indication that provides the possibility to scroll down. Through the whole website large images or illustration is presented for a modern look.
Figure 4: BDX home page
SJ, the Swedish Government Railways, have an aesthetically pleasing webpage with a light grey menu on top, see figure 5. Hoovering over the titles in the menu presents a submenu in a lighter colour with more subtitles. This type of menu provides a large amount of information in an overview and navigating is easy.
The focus on the website is booking a trip with the title of where you want to travel and the two boxes to write the two destinations. The image is blurred to provide more focus to the text and the height indicates there is more on the page and the user is encouraged to scroll down. A green circle on the bottom right corner with a question mark provides a help guide.
11 The website is user-friendly and presents a large amount of information on a
structured way. Icons to help the user to easy find the right information for example traffic information where the user might be stressed.
Figure 5: The Swedish Government Railways, SJs, homepage
ND, Norbottens Destilleris homepage have a menu on top with a clean and minimalistic aesthetic, see figure 6. On the left side there is a ribbon with illustrations inspired from the nature. A movie clip is playing in the background of sceneries from north of Sweden with oceans and mountains which I believe is their inspiration for their products. A small arrow is presenting flashing at the middle of the bottom on the page to encourage the user to scroll down.
The website is minimalistic and plays on the user’s senses which gave me a feeling of the product being sustainable and having a high quality. With the small amount of information presented on the website and the crucial information easy to find I think it is user-friendly. A disadvantage with a too minimalistic menu is some information is harder to find, for ND it is their drink recipes that are located under the specific product, and recipe could have had an own menu.
Figure 6: ND, Norbottens Destilleris homepage
Eson Pac have a modern and minimalistic website with white, grey and a pink as colour, see figure 7. Sterile and clean are two words I would describe the company with based on their homepage. The slide show catches attention
and an arrow under the images invites the user to scroll down for more information. When you scroll down the page is text heavy with a lot of information presented at once.
The menu is discreet with a small light grey colour. Hovering over the text a drop-down menu is presented with multiple choices of titles. Each title is a section on each page and scrolling down brings the user at the same location.
Specific information on the website was hard to locate and mostly found by accident.
Figure 7: EsonPac homepage
3
3. Theoretical framework
In the following chapter, relevant theories for the project will be presented.
Different sources have been used to provide theories that are established.
3.1 Industrial Design Engineering
Design is a natural part of the human life and most of the things around us are designed (Wikberg Nilsson et al., 2015). The strength of design is that there is no single definition, and the term varies from person to person (Buchanan, 2001), but what is important is that design should be meaningful and make sense to someone (Krippendorff, 1989). All interactions between humans and their surroundings are designed (Wikberg Nilsson et al., 2015), and the products should serve and guide humans to their purpose (Buchanan, 2001). The term design can describe the aesthetics of a product but at the same time it is a process, of research and applying research to solve a problem (Wikberg Nilsson et al., 2015; Friedman, 2000).
The research field of industrial design engineering can be described as a combination of industrial design and engineering design. An industrial design engineer needs therefore to have a high technical ability and understand the user simultaneously (Smets & Overbeeke, 1994). Industrial design can be described as a process of creation and invention, but separated from production (Heskett, 1980). Engineering design can be described as creation of the inside of a product with skills of mechanical, electrical or software development (Ulrich & Eppinger, 2012).
3.1.1 Human-Centered Design
The core principle of human-centered design is to adapt after the humans needs and make sure the design complement and strengthen the human’s abilities (Wikberg Nilsson et al., 2015). Involving the person interacting with a product, called user, during the whole project is important for understanding them, their needs and prerequisites, and their environment.
The process should be iterative, include different perspectives and address the whole user experience (ISO, 2010).
Human-centered design is a creative approach to solving design problems together with communities to understand their needs and create solutions to their problems. Designers that have adopted a human-centered mindset will empathize with the users and iterate solutions to find the best result (IDEO, 2015).
3.1.2 Activity-centered design
Developing products with the understanding of activities to be performed is the essence of activity-centered design with a deep understanding of technology, tools, and the reason behind activities. The users are still an
15 important part of activity-centered design (Norman, 2005).
Design problems are often complex which bring a challenge for the designer.
Complexity can in some ways be a requirement for innovation, but the measurement of success can only be found in real use and over time (Stolterman, 2008). Designing for the user today might be wrong tomorrow and a focus on the individual user or users might improve things for them but at a cost of making it worse for others. It is important to listen to the users but sometimes to satisfy them it is better to ignore them (Norman, 2005).
3.1.3 Design thinking
Design thinking can be a state of mind, a strategy or even a method but is missing one single definition. For IDEO (n.d.) it is solving problems creatively.
Brown (2008) describes the core of design thinking as human-centered, and innovation is based on understanding the user’s opinion and wishes of the product.
The design process is a system of three main phases, inspiration, ideation, and implementation, see figure 8. These phases are about understanding the user and applying that knowledge when creating concepts. Lessons learned from every step and mistake is important to evolve concepts during each iteration (IDEO, 2015). Design thinking helps to identify human behavior to convert into customer benefits and business value. A design thinking process can feel chaotic and differs from linear milestone-based process, but over the life of a project the process make sense and achieve results (Brown, 2008).
Figure 8: Phases of design thinking based on IDEO (2015).
3.2 Designing a digital interface
In the following chapter, information about user experience and web usability are presented to bring relevant theories forward to be able to design a user- friendly customer portal for the web.
Inspiration
Ideation
Implementation
3.2.1 User experience
The definition of user experience or UX varies. Kraft (2012) defines UX as the feeling the user gets when using a product. Norman and Nielsen (n.d.) expends the definition to include all aspects of the user’s interaction. Beyond the product they include the interaction with the company and services they provide to the user. Further Hassenzahl and Tractinsky (2006) defines UX as technology that fulfills more than the basic needs of the users and need to take in account the context the user will interact with the product.
The user experience is subjective and depending on different parameters as previous experiences and situations the product is used in. The experience and values of a product can change over time depending on how it satisfies the user’s needs in the specific situation (Hassenzahl, 2003). Being first with technology is no longer enough, the products need to be designed for a great user experience to succeed (Kraft, 2012).
According to Ritter and Winterbottom (2017) the main focus of user experience is usability. Two other key elements in UX are user interface and information architecture (Rosenzweig, 2015). Nilsen (2012) defined usability as how easy and pleasant features are to use in a system but can also be methods for improving the ease of use during a design process. Further Nielsen presents five quality components for good usability:
• Learnability, how easy the user can accomplish basic task the first time they encounter the design.
• Efficiency, when the user has learned the design and how quickly they can perform the task.
• Memorability, when a user return to the design after a period of not using the design, how easy can they remember how to interact.
• Errors, how many errors do users make, how severe are these errors and how easy can they recover from the errors.
• Satisfaction, how pleasant the design is to use.
User interface, UI, is the primary component the user interacts with in a system (Pitale & Bhumgara, 2019). UI can be described as the connection point between user and the system or as a graphical layer between user and technology (Rosenzweig, 2015). Pitale and Bhumgara (2019) presents three principles for UI designers to follow. First determine the user’s skill level, the success is understanding the different way the user can solve a problem, secondly to identify and understand the task and thirdly to choose an strategy of how the user will interact with the system. Further Nilsen (2020) states ten usability heuristics and by pursuing them major usability problems are said to
17
Figure 9: Ten usability heuristics to avoid usability problems.
Information architecture, IA, can be described as the organization of information within the system, which includes labels and menu structure (Rosenzweig, 2015). Within a website IA includes content, organizing web pages and designing the navigation system. The focus lies in problems, especially in complex systems with large amount of information and with good IA the quality of a website can improve, and the user find the information they are looking for (Brunetti & García, 2014). A well-designed product will motivate the user, increase the ease of use and accessibility (Watzman, 2003). As Buchanan (2001) describes a product experience most work to be useful.
3.2.2 Layout
The foundation in visual communication is layout because it guides the user through the material (Murchie & Diomede, 2020). A website can be seen as a cognitive landscape and a minimalist approach with only a few elements and categories will draw in the user more effectively (Rosen & Purinton, 2004).
10 Usability heuristics
1 Visibility of the systems status
You are
here! Give feedback in a reasonable
amount of time and the user understand how to move forward.
2 Match between the system and the real world
Use phrases and the language the user understands. Information should appear logical.
3 User control and freedom
Give a way back when the user make a mistake
4 Consistency and standards
Use industry standards and maintain consistency over the
interface STOP
5 Error prevention
Eliminate the errors a user can make, and provide information before they commit an action
6 Recognition rather than recall
Elements, actions and options should be visible. The user should not have to remember information between different parts of the interface
7 Flexibility and efficiency of use
Tailor frequent actions by the user and provide shortcuts to speed up interactions
8 Aesthetic and minimalistic design
Show only relevant information. The user could otherwise miss important information
10 Help and documentation
Minimize the explanation of the system, documentation can help to guide the user and should be placed where the need it
9 Help users recognize, diagnose, and recover from errors
Error messages should indicate the problem and
suggest a solution Gäller ej
According to McKay (2013) the user, in western cultures, read information from left to right, top to bottom, and can skip over information they do not find relevant. Further McKay continues with the users often scan over a page from the upper left corner to the lower right, and this can lead to the user missing information in the lower left corner, called weak fallow area, see figure 10. With a smaller screen the user follows a different pattern, from the upper left corner and going straight down, see figure 11. Most of the users follows these patterns but with elements to attract attention the pattern can change (McKay, 2013).
Figure 10: Scanning pattern for a large screen
Figure 11: Scanning pattern for a small screen
According to McKay (2013) alignment can make a page look coordinated and used though the entire system can make the product have a consistent appearance. Further by reducing the vertical alignments, a layout can appear smaller, see figure 12.
Main question Main question
Instruction Instruction
Option label Option label
Option 1 Option 1
Option 2 Option 2
Option 3 Option 3
Primary optical area
Weak fallow area Terminal area
Strong fallow area
19 Using alignment for labels can show the relationship between labels and text.
For a mobile screen, top alignment is the best choice when the user will be entering in information. Writing text can zoom in on the screen and the label will be lost. For a larger screen both top alignment and left side alignment work (McKay, 2013).
According to McKay (2013) when presenting information in two columns a right aligned label and left aligned text gives a clutter free appearance and making it look like one column, see figure X. McKay (2013) continues left aligned label and text take up a lager vertical space and can give a clutter appearance, but work well when the variation of length of the label and text is small, see figure 13.
Figure 13: Alignment of labels and text
3.2.3 Design principles
According to Lidwell et al. (2010) design principles provide an understanding of the intuitive, important in design for a high-quality product. Following are a few important design principles connected to this master thesis.
Confirmation is a design principle according to Lidwell et al. (2010) to minimize unintended actions the user could perform by requiring verification.
When a task is irreversible confirmation is important to add an extra step, the user have to go through to eliminate unwanted errors.
Constraint is another design principle to eliminate errors and according to Lidwell et al. (2010) constraint limit the action a user can perform in a system and this can be done by physical or physiological constraints. Physical constraints limit the ability for the user to accidental create errors and physiological constraints improves the design and make it more intuitive.
According to Lidwell et al. (2010) a complex system should be designed for both beginners and experts. Concealing expert functions can help the beginner and providing shortcuts will eliminate time for expert users.
A problem that can occur when designing for the beginner is the design principal flexibility-usability trade-off and Lidwell et al. (2010) describe the principle as when the flexibility of a system increases the usability will decrease. With a larger flexibility in a design the more compromises on the individual elements might happened and the usability can decrease.
3.2.4 Gestalt principles
Osvalder and Ulfvengren (2015) present four gestalt principles used in all type of design and they are proximity, similarity, continuity, and closure. They are used to understand a human’s perception of elements and to minimize the complexity in design.
Osvalder and Ulfvengren (2015) describe proximity as elements related to each other should be placed together, see figure 14. Further Lidwell et al.
(2010) describe that proximity reduces the complexity of design and the relationship between elements should be taken in account for layout design.
Figure 14: Proximity
Osvalder and Ulfvengren (2015) describe similarity as elements with similar meaning or function should be placed together, see figure 15. Lidwell et al.
(2010) suggest colour, size, and shape to group elements. Further the authors suggest similarity in shape have the weakest grouping effect and should be used with colour and size, use only a few colours and simple shapes for best effect.
Figure 15: Similarity
Osvalder and Ulfvengren (2015) describe continuity as the principle that people connect elements together that are perceived to follow a line, and the line is then followed, see figure 16. Further Lidwell et al. (2010) describes elements that move in the same direction are perceived to move together.
Figure 16: Continuity
Osvalder and Ulfvengren (2015) describe closure as the principle that people tend to seek a meaning into what they see and fill in pieces of what is missing,
21 simpler shapes as geometric forms that are located together, and closure is a
way of reducing complexity in design.
Figure 17: Closure
3.2.5 Colour
According to Lidwell et al. (2010) colour is a great tool in design to attract attention, group elements and to enhance aesthetics. Further colour can make design more interesting when the use of color is done correctly. According to Murchie and Diomede (2020) humans associate colour with symbols and sign, but the specific meaning can vary between cultures. According to Osvalder and Ulfvengren (2015) in the western world red symbolizes ‘stop and danger’, green as ‘okey and go on’ and blue as ‘cold and calm’. Lidwett et al. (2010) states there is no evidence of colour affecting emotions and that different cultures have different meaning to colours. On the other hand, Murchie and Diomede (2020) suggest colour can trigger emotions and that colour can be associated to holidays or companies. According to Lidwell et al. (2010) it is important to understand the meaning of colour and colour combinations of the future users.
Creating hierarchies of data with colour can bring attention to elements but using too many colours makes nothing stand out (Murchie & Diomede, 2020).
Lidwell et al. (2010) suggest using colour conservatively with up to five colours depending on the complexity of the design. Further it is important not to only use colour to separate information because of visual impaired persons.
Osvalder and Ulfvengren (2015) describes that with a defective colour vision some colours are harder to distinguish that other and the most common colours are green and red. McKay (2013) continues that colour should be used to reinforce other elements, but the elements should also communicate their purpose independently of colour.
4
23
4. Method and implementation
In the following chapter, a description of the design process will be presented along with the methods used during the project and their relevance to the project.
4.1 Design Process
A design process is a way of conducting and structuring your work during a project (Wikberg Nilsson et al., 2015). For this master thesis an iterative design process was conducted with the four phases: planning, inspiration, ideation, and Prototype & test. The design process was based on the values of design thinking with inspiration from both IDEO (2015) and Wikberg Nilssons et al.
(2015), see figure 18.
This master thesis was about creating a user-friendly prototype for a customer portal and the focus was a combination of the user and the functions. An activity-centered design approach bring the user’s needs forward in relation to the functions of the system. The users were involved during the whole project in a co-design process and their suggestions were considered and evaluated before adapting the product.
Figure 18: Illustration of the design process
4.2 Project planning
The first step of the master thesis was to structure the project and understand the mission. Because of the free nature of the project a good plan was necessary to ensure the resources was used in the best way. Different factors can change a plan over time and to stay on track, milestones were placed to help the project to continue to move forward.
A Gantt chart were created to structure the project visual, see appendix A The submission dates were marked on the top of the chart and milestones for the different phases were placed. The Gantt chart were used to set weekly goals.
Planning Inspiration Prototype
& test Ideation
4.3 Literature review
A literature review was conducted to explore relevant areas connected to the project for a better understanding. Following an iterative design process, the literature review was an ongoing part during the project. According to Milton and Rodgers (2013) a literature study consists of defining research questions, data collection, data evaluation, analysis and interpretation and a literature review presentation. These five steps serve as a guide to help the project reach decisions made by supporting material for an extra credibility.
Scopus, Google Scholar and LTU article database were the main research platforms, and as a complement relevant material from design courses were analysed. The evaluation of the data was conducted along with the data collection with a critical approach to the findings. The main purpose of the project was to create a user-friendly digital interface for a customer portal and an immersion in designing a digital interface with focus on user experience, layout, colour, design principles and gestalt principles.
Key words used: Usability, User Experience, User Interface, Information architecture, layout, navigation, design principles, modularity
4.4 Inspiration
For a successful product, it is key to understand the context of a product and empathize with the user (Wikberg Nilsson et al., 2015). The following chapter describes the methods used during the inspiration phase to generate a requirement specification, a site architecture map, and a mood board.
4.4.1 Requirements specification workshop
To understand the needs and specific requirements of a customer portal a workshop was conducted with 11 participants from BDX. All the partitioners had previous experience with Next and a few of them had worked with Italic, and their roles at BDX varied from production manager to administrator.
The workshop was conducted digital using Microsoft Teams for communication and Miro as a digital whiteboard. The concept of a digital workshop was new to the participants and the first part of the workshop was dedicated to learning to navigate on Miro. The workshop was divided into three different segments, see figure 19.
Figure 19: Workshop methods Brainstorm
What is a customer portal?
Functions in a customer portal
Weight
Signification of
the cluster $100 test
Clustering
Clustering of functions
25 The first segment contained two brainstorming sessions. The first session was
to warm-up and get aquatinted with Miro and the participants individually brainstormed based on the question ‘What is a customer portal?’. The second brainstorming session was conducted in three smaller, groups using Microsoft Teams group room. The topic was ‘functions in a customer portal’ and the participated was encourages to discuss the topic and write down every idea on digital post-it notes. To make sure every group understand the task I visited each room so they could ask questions.
The second segment contained a categorization of the functions generated in the previous brainstorming session. Together with the whole group the digital post-it notes were moved into different clusters and titles was given to each cluster. According to Gray et al. (2010) a cluster are a way of grouping ideas into a spread-out pile where every idea is visible.
The third section contained weighting the signification of each cluster, first together in two smaller groups and then individual. In the first weighting method each cluster title was placed on a scale of ‘Crucial – Necessary – Wishful – Unnecessary’. The groups were encouraged to discuss their decisions. The final method was the $100 Test and according to Gray et al.
(2010) the participants must prioritize and assign value to what is most important to them. The participants were given $100 divided into four $25 bills and encouraged to spend the money on what they valued as most substantial.
After the workshop, a requirement specification was created with important insights from the workshop together with previous information given from BDX.
4.4.2 Site architecture map
From the result of the requirement specification a site architecture map was created. According to Bolchini and Neddo (2011) a site architecture map is a way of organizing and structuring a large number of interactions and objects in an interface visually. The method is a way of structuring complicated system, a critical function for an optimal user experience according to the authors.
The site architecture map was created to understand each connection in the customer portal. Together with an expert in programming and data questions at BDX, the site architecture map was developed by discussing the different functions from the requirement specification along with the functionalities located in Next. A digital mind map was used for the process.
The site architecture map was validated with a few different people at BDX to make sure every important function was present.
4.4.3 Mood board
A mood board is according to Wikberg Nilsson et al. (2015) a method to present a visual representation of a feeling the future product should give.
Further Gray et al. (2010) explains a mood board can be used during the development process as a reference or inspiration using images, colour or anything that can communicate the feeling you want to express.
Inspiring visual representation of images, illustrations and videos on digital interfaces and specific functions were collected in a folder on the platform Pinterest. A mood board were created from the Pinterest folder with the inspiration of the words minimalistic, simple, and understandable.
4.5 Ideation
A creative process can be chaotic and non-structured when searching for new solutions. Creative methods help to guide though the chaos (Wikberg Nilsson et al, 2015). The following chapter describes the methods used during the ideation phase to generate concepts.
The ideation process was inspired by Gray et al. (2010) process in three acts, open, explore and close, see figure 20. Opening divergent to generating ideas, emergent exploring ideation and combining them before closing convergent and narrowing down the ideas to a conclusion.
Figure 20: Process for generating ideas
4.5.1 Idea generation
According to Wikberg Nilsson et al. (2015), braindrawing is a method like brainstorming but the main different is sketching instead of writing. Due to Covid-19 and current restrictions most of the idea generation was performed individually.
The idea generation started with sketching on paper to explore different layout options with focus on the menu. Boxes were drawn to represent where different elements could be placed, see figure 21. Sketching on paper was a fast way to explore different ideas but limiting to rearranged elements.
Emergent Convergent
Divergent
27 The ideation continued using Adobe XD, a tool to create interactive digital
prototypes, with alternatives for the menu and based on inspiration from the benchmark and mood board, six concepts were generated. To evaluate the concepts and gather insight a small user test was conducted with a few people at BDX where they could give their take on the concepts.
The braindrawing continued with developing concepts for a mobile web application. Based on the three previous concepts and inspiration from the mood board, menu placement and an order pages were created. Three smaller user tests were conducted to evaluate the menu option and icon usage on the mobile version. During the test the users gave their opinion on the different solutions and which one they preferred.
4.5.2 Co-design workshops
The idea generation gave a lot of ideas but also left many questions of how the system should work and which functions is most important. The solution was to conduct a co-design workshop together with two participants from BDX.
According to Burkett (2012) co-design is to collaborate with the people that will use the product. Co-design should start with open questions and allow the user to express how the design should be. Further Burkett describe that co- design means ‘collaborative design’.
The workshop started with a description of what a customer portal could be followed by the task of designing a page for the mobile web application of ordering a new project. To ease into the task, functions necessary to order a project were written down and then placed in a rectangular shape to represent a screen.
The following two questions were asked during the workshop:
• If you were a customer and wanted to place an order for a new project, which information would you have to give to BDX?
• In which order would you like to place the information?
If there were any function from the requirement specification missing, I asked if the function was necessary and if so, where the function should be placed.
When the participant was satisfied, I continued to show my version of a concept for the mobile web application to discuss the difference.
The first workshop was conducted digital with a business developer at BDX.
She has a long experience in the construction industry and was also familiar with both Italic and the master thesis project. Adobe XD was used as a platform to illustrate the placement of the functions and as I shared my screen she could describe where she wanted each element placed.
The second workshop was conducted in person with a construction engineer.
She is a civil engineer with a few years experience from the construction industry and was not familiar to the project. Sketching on paper was an easy method for her to show where she wanted each element and in which order.
4.5.3 Colour palette
A challange during the ideation phase where if the customer portal should be designed after BDX or Next or an own graphical profile. A colour palette was created with inspiration from both BDX and Next during a brainstorming session for the final prototype and the colours were selected to easy be modified depending on the company’s colours.
4.6 Concept development
Prototypes are used to explore the design and to find alternative solutions (Wikberg Nilsson et al., 2015). The following chapter describes the process of the development and testing of a digital interactive prototype for a customer portal.
4.6.1 The first concept
The co-design workshop gave important insights to continue to develop the customer portal. The development continued with the mobile web application with focus on project information and ordering of a new project.
A interactive prototypes were created, a mobile interface in Adobe XD. The prototypes were created with a fair number of details and error messages to ensure a realistic experience for user testing.
4.6.2 User test
A user test was conducted to collect data on how the users interacted with the system and understand the user experience. The user test was conducted with seven participants using the system Useberry. Three of the participants had not interacted with any similar system before and two of them outside BDX.
The other five participates had various experienced of the project.
The platform Useberry connects directly to Adobe XD and only some modifications of the original Adobe XD file had to be made. The mobile version of the prototype was the object for user test.
Before the test started the user got information about the project and how the test would work. There was no time limitation of the test, and the user got a link to a website where they were guided though the test.
The user test was divided into three sections and each section had a few tasks.
At any time, they could end the test and if they got stuck, they could move forward to the next task. The following task was conducted by the users:
29
• Log in and change password
• Order a new project
▪ Select the amount of a specific article
▪ Change the contact person to Sven
▪ Select dates
▪ Order the project
• Go to a specific project and read the journal
During the test, heat map, user flow between different pages, and the overall time each task took was collected. The result could be seen for each individual test and as a collection. To further understand the result each participant was asked if they got stuck anywhere, if they had any problems and what they thought of the system.
4.6.3 Detail design
The result from the user test was evaluated and applied to the final design.
The site architecture map was evaluated together with the requirement specification and was the foundation to the final design.
The final prototypes were created in Adobe XD using the previous prototypes as a guide. More details were added, and main functions was clickable to show how to interact with the prototypes. The mobile application was the main prototype, and the web application had less functions.
The functions in the prototype were decided based on the workflow of ordering a new product, starting in the mobile version and finishing in the web version.
4.7 Method discussion
In the following section the methods used during the project are evaluated.
The section also includes reflections on insights and learnings from the process.
During the inspiration phase the requirement specification was based on a digital workshop together with BDX. Handling 11 participants digital and getting them to discuss was a challenge. Dividing them into smaller groups gave great discussions and was a key element in a relevant result. The workshop also gave the base for the project and with the various experience from the participants of the industry different point of views were seen.
The site architecture map was a good method to organize and understand where each component would be placed. The map went through a few iterations and continued to evolve during the project. The combination of me giving important input on usability and aesthetics together with the programmer giving valuable insights to limitations of systems. It would have
been interesting to perform a usability test on Italic and Next to learn insights of how the user interacts with the system today to compare results.
Covid-19 had a big effect on the project and mainly on the ideation phase.
Most of the work was done by myself and if I would redo the phase I would have invited other people to give move feedback on the prototypes. Most of the ideation was made directly in Adobe XD, which gave a realistic prototype from the beginning but in retrospect I should have focused less on details from start. Working on details was time consuming.
During the concept development and user test, Useberry was a great system to collect data remotely, but the free version of the system had a few limitations. Only 10 answers could be collected a month and the function component in Adobe XD to create different scenarios on the same artboard did not work. The solution was to create new artboards for each part of a function, but this solution limited what the user could perform during the test and how real the prototype was experienced.
5
5. Results
The following chapter presents the outcomes from the methods described in the previous chapter. The chapter are divided into the phases inspiration, ideation, prototype & test, and final result.
5.1 Result of inspiration
The following chapter presents the results from the inspiration phase. The result of requirement specification, site architecture map and mood board are presented.
5.1.1 Requirement Specification
The result from the workshop involving a requirement specification is presented in figure 22, and in Appendix B the detailed result of the workshop is presented. The functions are divided into two categories, the crucial functions the customer portal need to have to function, and a wishlist of functions that are necessary but not crucial.
Figure 22: Requirement specification
The authorization control can work in two ways, first for BDX to regulate which functions the customer can access depending on the contract. Secondly the customer will have a master user with administrative access over their own user to add new users and control their own user’s level of authorization. The most important information about a project is the status, location, dates, contact, documents, photos, project name and number. With the large amount of workorders, filtering option is important. The journal is a part of each subproject and the customer should be able to read and download it as a PDF. Ordering a new project should include the most important project
The crucial functions
Authorization control
Language Swedish and English Project information
Project ordering User-friendly
Wishlist
Cost calculation for each project order Messages between customer & contractor Reports (financial reports)
Customer portal for subcontractors
33 5.1.2 Site architecture map
The result of the architecture map is presented in figure 23. The starting point of the map are the log in page and downwards are the different pages and under them functions placed on each page. The login page is the first stop where only registered user can enter. The web applications main pages are a homepage, project, ordering, messages, report, and settings.
Figure 23: Site architecture map
5.1.3 Mood board
The result of the mood board is presented in figure 24 and Appendix C. The mood board contains inspiration of application, functions, and visual appearance of how the final customer portal can be designed.
Figure 24: Mood board
Log in
Start page
My projects
Overview
Journal
Filtering
Map Dates
Filter
Users Status
Text information
Project information Project name/number
Images Weather Download Documents Map
Invoice mark
New Projects
Ordering Dates Project name Documents
Invoice information Map
Price
Messages
Chart
New
Type (invoice, inspection..)
Type (invoice, inspection..) Requires approval
Requires approval Description
Description
Date (Received, Last date)
Date (Last date) Document
Document
Report
Filter
Remaining Cost History
Settings
User
Language Budget Authorization
Create new Change password Username/Password
Recent activities Forgot password
Minimalistic Simple Understandable
5.2 Result of ideation
The following chapter presents the results from the ideation phase. The result of the idea generation, co-design workshop and colour palette are presented.
5.2.1 Idea generation
The result of the idea generation is represented in two different sections. The first section involved digital representations of the sketches on paper focusing on navigation. Six concepts were created using Adobe XD, see figure 25.
Figure 25: Six concepts created in Adobe XD
A small user test gave input about menu placement and that they preferred the following three concepts, see figure 26. The concept on the left hade a menu similar to a file system and that reminded them of a simpler version of next. The middle concept was appreciated by the use of icons and the concept on the right reminded them of BDX own homepage.
35 Two mobile concepts were created based on the previous three concepts, see
figure 27. During the user test the participates preferred
Figure 27: The menu options for a mobile web application
The participates preferred the menu on the bottom rather on top but, because of the screen size of a smart phone makes it hard to reach to the top. But if it is a web application the browsers menu, placed on the bottom, could interfere with the web application ones and therefore they preferred a menu on top.
The participates preferred the menu on the left instead of the right because it was more familiar. If the menu was on the right a participate got the feeling of an online store and the shopping basket.
5.2.2 Co-design workshops
The first digital co-design workshop gave good insight to the information needed to be added to the customer portal. The following functions for the order page and order is a suggestion from the session:
• Project name, for example street name and type of work
• The amount of material and work, for example if a road is ordered, the amount of asphalt needed should be possible to add for a list
• A text field to describe the project, for example to contact neighbors before start
• Dates
• Placement on a map
• Up to four Fields, for example invoice information
• Files and images
• Status, the ability for the customer to select if BDX can see an upcoming project before they ordered it
• Tags, for financial reports on specific categories, for example electrical, groundwork
• Save to later and order
The second co-design workshop was a great addition to the first one. The workshop resulted in a similar result, and following the functions and order of
