An Innovative Reflection Based on Critically Applying UX Design Principles

Abstract

Over the past few years, the internet and omni-channel domains have created a new economy that is growing rapidly and shifting the way in which businesses operate due to the influence of technological advancements and innovations. Now customers are embracing technology more than ever, user experience is becoming a crucial factor of the customer journey and remaining competitive in any industry is becoming increasingly difficult due to this. These changes have forced many businesses to rethink their presence, whether this is physically or digitally. In order to gain an understanding of how this should be approached, this paper focuses on demonstrating a critical understanding of innovation theories and concepts, which are utilised to enhance value for business. As well as this, web-based technologies and User Experience (UX) principles will be outlined and applied in order to create an online presence for a prototype supermarket, which will be then be reflected upon against PESTLE factors. From this, an innovative strategy will be formulated and evaluated for a new technology-based product/venture.

1. Introduction

It has been highlighted that innovation is the process in which organisations develop ideas into new and or improved products, user experiences, services, or processes [1]. Innovation in any organisation is imperative as not only do they need it, but customers demand it [2]. Without innovation, organisations in any sector can gain a competitive advantage over each other easily and limit market growth. This can be seen in various examples, such as Nokia, which was once the brand most associated with mobile phones but ended up being merged out of existence in the mobile phone business [3]. Additionally, the internet has created this new functioning economy, and its rapid growth has changed how business works. Therefore, in this study, to look into the above, a prototype supermarket has been adopted to reflect this.

In order to demonstrate and put into practice this need, the concept of a ‘prototype’ supermarket has been adopted. This supermarket is a growing chain which intends to expand their trading portfolio into the online domain. The goal of the supermarket is to enhance the convenience, user experience (UX) and overall efficiency of purchasing products. The success of the prototype supermarket relies on the level of access, usability, and overall design to enable a swift customer experience. In short, the prototype supermarket needs to design and develop a unique online domain, which can maximise user and customer experience through improved human–computer interaction (HCI). In order to do this, this paper will map out, research and apply current web-based technologies and also Jesse James Garrett’s UX design principles to create a functioning and innovative front-end website.

The majority of today’s market has an online presence, and with the enstrengthened global pandemic, footfall within bricks and mortar stores has plummeted across England [4]. Thus, it highlights that it is imperative for supermarkets to take action now and innovate to maximise their customer base and customer experience, to aid them in not losing their footing in the market. One of the most common methods of looking at innovation is via the Innovation Matrix [5], as there are many different types of innovations.

There are a plethora of different types of innovation. The most common is radical innovation [6]. Radical innovation is known to be the more complex and risky type of innovation and has often been denoted as the ‘blue ocean strategy’, due to its intentions of creating a new market [7]. A key example of radical innovation is Salesforce, a company that pushed forward a massive innovation. Not only did its CRM system bring about a new platform, it also brought about a new business model. When radical innovation is successfully achieved, the results are high. This is generally due to the high level of risk and resistance that comes with it [8].

Due to the nature of radical innovation and the threats it poses, many organisations are known to lean more toward incremental innovation [6], which allows changes to be introduced slowly over time, and whilst at first, the impact is not great, over time it shows a tremendous difference [9]. A key example of incremental innovation can be seen in Gillette, which began manufacturing products with one blade, then two blades, and continued to innovate—allowing the company to not only grow but also remain competitive. Incremental innovation allows a low-risk adoption process, which is less likely to fail over time [6,9]. This is incredibly crucial to new market entrants in terms of remaining competitive and keeping low costs.

Devised by Christenson in the late 1990s, disruptive innovation refers to the entry of new competitors and business models, eventually leading to the disruption and often the demise of established players [10]. Disruptive innovation can be seen in one of the most recent successful examples, Netflix. Netflix had no ‘online’ competitors yet did have a significant number of bricks and mortar competitors, such as Blockbuster. Netflix created its own new business model by disrupting and expanding its operations online by streaming content that could be watched anywhere at any time. This form of innovation, and Netflix in particular, has been referred to as ‘Creative Disruption’, as it overthrew disc and rental industries in its making [11]. Defined by Joseph Schumpeter, this type of innovation has been defined as the decaying of long-standing practices, products, or services that have been disrupted by a more innovative one [12]. While this type of innovation theory may destroy old practices, it does benefit the organisation in the long run.

In order to demonstrate how the most applicable type of innovation can be implemented, the ‘prototype’ supermarket has been utilised. In terms of the prototype supermarket, with the shift online, this may impact its retail stores and cause job loss. However, new jobs and roles will arise due to the processes in which selling online poses. When it comes to the prototype supermarket innovating, it is apparent that the most beneficial type of innovation to invest in would be incremental innovation. As the market is already extremely saturated, it can take slow steps in order to keep up with the competition and hold its market position.

2. Critical Application of Web-Based Technologies and User Experience Design Principles

UX is vital to these web-based technologies, products, and services as it is crucial to create an engaging, efficient, intuitive, and accessible experience for any user, which is often known as user-centred design (UCD) [13].

In UCD, it is important to take the user into account in every stage of development—understanding the user allows for creativity to be grounded and allows for a greater innovation impact [13,14]. This includes navigation, structure, user flows and also taking into account barriers to access, such as accessibility (i.e., visual impairments). The biggest reason user experience takes precedence over other elements of the innovation process is that if a positive experience is not given to users, they will not likely use the product [13]. The UX design process takes into account all possible actions a user is likely to take and understands them, as this whole process actually comes from various different layers of the overall design process, or the 5-planes (Figure 1) as outlined by Jesse James Garret [13].

Plane 1 Strategy: this stage is about understanding the reasons behind the innovation, why does the organisation need it, who is their target audience and what they are planning to do. In this case study, the prototype supermarket strategy is to propel their presence online to remain in line with the competition through omnichannel marketing while delivering an exceptional user experience and service to its customers who need to shop online due to impacting factors, such as convenience, childcare responsibilities, disabilities, or due to COVID-19.

Plane 2 Scope: this stage looks into the features and functions required for this innovation, as these are what determine the website [13]. It is imperative the prototype supermarket consider the functional requirements and content elements of individual pages and how these will be met. As this is going to be a retail website, it is important they provide information and images of products, ensure there is a contact and about page so users can reach out in regard to queries, and it must be accessible so all users can navigate the website [15].

Plane 3 Structure: the purpose of the structure plane is to understand the user journey and how they will get from (A) Shopping to (B) Checking out [13]. This can be evidenced through building a user journey through storyboarding. A storyboard is used as evidence of the process focused on the customer journey of getting from A to B. Interactive design is crucial at this stage as performing and completing tasks is the purpose of the website; therefore, a focus needs to be on the interaction between the user and the website/pages [15]. A storyboard was developed to meet the needs of the structure plane (Figure 2).

Plane 4 Skeleton: this plane is often referred to as the wireframe [13]. This stage is about developing a user interface-based on how the website may look and connect together. It has been discussed that this is the most important step in the process as it allows for wireframes to be developed for individual pages and creates a visual format that represents product, content, navigation, and methods of interaction [13,14]. In order to create a functioning website that is intuitive, accessible, engaging, and efficient to the target market, a low-fidelity wireframe was developed (Figure 3).

Plane 5 Surface: in order to develop a website for this prototype supermarket, the website building and Artificial Intelligence (AI) platform, Wix, was utilised. The purpose of selecting this method was that it offers intuitive, drag and drop site building which can outline the visual aspects of the site. This enables colours, contrasts, typography, and layouts to be mapped out. Some screenshots of the high-fidelity website mock-up are illustrated in Figure 4.

3. User Experience Evaluation

When it came to designing the prototype website, User Experience Evaluation (UXE) was an extremely important factor to take into account. Users will evaluate the interaction and usability design of the website as soon as they can. Therefore, one of the benefits of creating a wireframe, storyboard and prototype website early rather than fully committing to a particular software or design is that it allows a more controlled outcome, which may be influenced by cost, scrutiny, and further (potentially unfixable) issues down the line [16].

There are multiple criteria that need to be applied, and these are: use of colour; labels; feedback; and forms [14,16]. When it comes to the use of colour, consistency in the colour palette was present across the whole website and the different pages. This included actions. These were treated the same across all pages and simplified the navigation process for the users and ensured a smooth user experience of transitioning from start to finish. In terms of labels (or buttons and navigation elements), there were various pages within the website that required the user to ‘add to basket’ or ‘find out more’. These buttons were clearly described through a language users could easily comprehend and understand, and the description of labels across the website were minimised, to ensure consistency and ease of use and navigation. Additionally, feedback on the labels was crucial in allowing the user to understand that clicking this button would take you somewhere. The state of the label changes visually to provide this feedback in regard to user actions. To add to both the element of labels and feedback, the form layout was consistent across all pages, ensuring usability and intuitiveness when being used.

4. The Impact of Future Innovation

It is important to look at what future innovations are imminent and which ones this supermarket could adopt in order to add value. Considering the size of the retailing industry, the impact of future innovations is imminent, and with innovations in Digital Civics, the Internet of Things, AR, VR, it has been said that the Fourth Industrial Revolution has begun [17].

4.1. Digital Civics: Integrated Community Experience

In the past few years, a significant number of political innovations, such as a Human–Computer Interaction methodology (e.g., digital civics), have emerged, increasing citizen participation and promoting both new forms of governance and engagement [18]. Digital civics is a combination of digital technologies and citizen-driven design, which is “an emerging cross-disciplinary area of research that seeks to understand the role that digital technologies can play in supporting relational models of service provision, organisation, and citizen empowerment” [19].

Due to the impact of COVID-19, commuting to stores has not only posed a risk to public health but due to an increase in delivery, impacts the environment in terms of energy consumption. A future innovation that would disrupt the whole industry sustainably would be community-driven support through digital civics. Community participation is crucial in the response to COVID-19 and in the UK [20], 1 million people volunteered to help in response to the pandemic, as well as mutual aid groups popping up to help one another with simple tasks such as childcare, community care, and most importantly buying groceries. This could be further expanded through incremental innovation, which sees the community support each other when purchasing goods. For example, creating a platform where a neighbourhood could communicate, update, and potentially shop for other citizens in the neighbourhood who may not be able to do so themselves due to childcare commitments or disabilities.

Citizen participation would be essential in this integrated community experience. However, this could be linked to a Social Credit System so that citizens can reap a reward for their good deeds. China’s social credit system is a topic that is of interest at the moment, as it generates a system that ranks and rates entities [21]. This would be an innovative idea the supermarket could take forward as a retailer by assessing the trustworthiness of its customers and neighbourhoods with a goal of rewarding generosity and good behaviour. This is an innovation not only beneficial during the COVID time but also beneficial to the environment by minimising carbon emissions and the use of transportation.

4.2. Diversified User Experience through Mobile Technology

Like most retailers, the impact of customer purchase intention is highly influenced by customer feedback [22]. In many recent studies on e-Satisfaction, it was noted that communicating with other customers is an innovative strategy that organisations should adopt in order to increase customer satisfaction, for example, by creating a communication platform within the website [23]. This social media platform could be linked to their own account to allow current customers to engage with potential customers. The UK has been recorded as the third-largest internet user in Europe [24]. Internet users are growing significantly and while the prototype supermarket expanded online, ensuring their mobile developments keep up is crucial.

This future innovation is currently being implemented in China and has already been evidenced by the likes of Alibaba. In a recent retailing study, it was evidenced by the public that there was a strong desire for online communication when shopping online [25]. Referring back to the example of future innovations, with the current climate of COVID-19, a communicative platform for customers is something that needs to be addressed widely in order to deliver that communication the general public has lost due to the pandemic. This innovation would add massive value to the organisation, and while word of mouth can go a long way, this is very limited due to global restrictions.

5. Innovation Strategy Development

An innovation strategy helps organisations decide which innovation is the best match to the organisational objectives and, therefore, delivers value and a competitive edge [26]. The prototype supermarket needed to formulate an innovation strategy to grow their influence in the market further, increase their profits and customer depth through both product and service innovation. In order to do this, a SWOT analysis was developed against their current environment and the potential of expanding or not expanding (

Table 1. SWOT Analysis of the prototype supermarket.

Strengths	Weaknesses	Opportunities	Threats
- Small, yet agile organisation - Already established - Innovative - Flexibility - Physical presence - Essential goods supplier	- Financial risk - Low customer base - Lack of delivery times due to COVID - Marketplace saturation - Lack of assets - Skills and staff - Technology - Newly established	- Expanding to other areas - Profit - User friendly website - Delivering products during COVID time - Better user experience - Gain presence - Gain customers	- COVID-19 - Competitors - Loss of customers - Loss of profit - Legal liability - Market entry (online) - Cost - GDPR, Data protection

).

It became apparent that during COVID-19, the supermarket faced the issue that its delivery schedule was fully booked—this is the same situation as other supermarkets. On its website, the prototype supermarket had an existing schedule page and store locator; this is an element of the website which can be innovated further through digital civics, and a strategic service design could be creating community-driven support for existing and potential customers.

In order to capture this situation from multiple views and various perspectives, a ‘Rich Picture’ was noted as one of the most advantageous methods to do this [26]. This allowed for key differences to be highlighted, which act as an inspiration to an innovation or strategy [27,28]. It was apparent that the greatest threat to the organisation was related to the fact the market was extremely saturated, and competitors already have everything in place to rival. The supermarket’s key stakeholder is its consumers; without them, it would plummet. Therefore, a rich picture was outlined to address why and how the prototype supermarket was going to set itself apart (Figure 5). From this, it was evident there needed to be a focus on how it delivered its service to its customers and what would set it apart. A lot of customers are now stuck at home due to the pandemic and have responsibilities, such as work or disabilities.

From the rich picture, a root definition was developed. In order to define a root definition, it needs to be based on What (X); How (Y); and Why (Z). This is a crucial step in Soft System Methodologies (SSM) [29]. The root definition is a core element of SSM. It is a statement that defines and describes, or names, a system in a structured way [29]. As demonstrated in Figure 5, a root definition highlights alternative perspectives of the system and, while outlining what it needs to achieve, also outlines what it is not supposed to achieve.

When looking at future innovations, it is apparent there has been a significant shift to online shopping. Customers are purchasing groceries online more than ever, and during COVID-19, this has caused a limitation in the delivery schedule and capacity of many supermarkets. Therefore, the transformation which the prototype supermarket needed to implement was creating a diversified user experience through mobile technology, which created new technological innovations in the geographical/map offerings on the website and the potential of neighbourhood and community-driven support, where citizens within communities can help one another with obtaining food during the global pandemic. The root definition for the prototype supermarket is outlined in Figure 6.

The prototype supermarket needed to incrementally innovate now they had moved online and designed a website that delivered the online presence consumers are looking for. By developing a community-driven service support platform through UCD, geographical services, and schedule design, customers will be able to interact with each other in a safe manner during the pandemic and help each other obtain essentials even though some may be limited due to personal and life impacts.

6. Discussion

Overall, the contribution of this paper is to provide insights into the understanding of the current types of innovation, application of web-based technology, UX design, and look at its impact on a company. Therefore, this paper demonstrated the process by which individuals and companies can approach understanding and adopting innovation, improving their customer experience, and developing future strategy, by outlining (1) the different types and how to apply them; (2) critically apply web-based technology and UX design principles to create a functioning front-end website; and (3) understand and evaluate the impact of future innovation and how to manage this against strategy. There are two key areas that are important to discuss against why critically applying UX design principles is important, and they are presented in the following two sections.

6.1. Application of Web-Based Technology and User Experience Design

When building the prototype supermarket website, the application of UCD was crucial. When designing, we needed to ensure that our website was accessible for all users without barriers to access and on various different platforms. One of the core focuses when developing the website was accessibility—this is crucial when any website is being developed, but even more crucial now we are experiencing a global pandemic that is encouraging higher requirements for social inclusion. It has been argued that making a website accessible to all users allows for not just organisations to benefit but also individuals and society [13]. This has been demonstrated in various ways on the prototype website through utilising accessibility elements, such as Heading Tags, to enable screen reader users the ease of navigation and Alt Text, which gives images descriptions.

One of the biggest focuses in the UCD process was looking at visual descriptions. When shopping for groceries, we like to look at what we are buying. Generally, those who are blind use their sense of touch to know what they are buying. However, this is something that has not yet developed virtually [30].

Wix was utilised in this process. It is worth mentioning that for non-technological people, such as the staff at various supermarkets, finding an option that enabled them to jump into eCommerce rather quickly was an integral part of their innovation plan, as the pandemic was quickly diminishing their profit due to the lack of footfall. There are many benefits to Wix, and these are that it is an easy-to-use editor, the system is intuitive, accessibility is built into the system, and the drag and drop functions make editing pages or updating content fairly easy. However, a future innovation and suggestion to stakeholders would be to potentially develop their own bespoke website created with HTML and JavaScript, but for now, as a newly established marketplace for the prototype supermarket, utilising Wix will allow for them to quickly grab a spot in the market and gain a presence and profit.

6.2. The Consequences of Technological Innovations and Its Impact on PESTLE Factors

There is a plethora of consequences of technological innovations, and these impact various political, economic, environmental, and even legal factors. When new innovations emerge, it is crucial to understand the current factors which may implicate the technological achievements of it [31]. In terms of the prototype supermarket, this is in regard to the website. The development of UCD contributes massively to the improvement, success, and overall reach of an innovation, such as a website, and it is crucial to clarify which barriers may negatively impact the supermarket and what recommendations can be made in order to overcome them [13]. Below, a PESTLE analysis has been conducted against the supermarket in order to understand what factors may influence the success of their website (

Table 2. PESTLE analysis of the prototype supermarket.

Factors	Impact on the Supermarket	Recommendations
P—Political	- Tax - VAT - National Min. Wage - Corporate Tax - Import/Export Law	Business operations may be impacted significantly by factors such as Brexit. Strategically planning for future political impacts is a recommendation to consider
E—Economic	- Job loss due to Brexit - Devaluation of GBP - Inflation - Exchange rates	Exchange rated are crucial for produce and goods at an supermarket. With international connections and suppliers, supermarkets need to reassess their standing due to the COVID and Brexit impacts. A recommendation is to look at locally sourcing and producing their own products or allow for partnerships and negotiate deals
S—Social	- Cultural barriers - Demographic changes - Accessibility	Demographic is ever growing and changing in the UK. Supermarkets need to look at benefiting from this varied culture and amending their stock portfolio to incorporate product like world food, some are already doing this. Additionally, ensuring all customers who may have barriers to access are looked after in terms of developing a conscientious website.
T—Technological	- Accessibility - Security issues - Cyber security - Artificial Intelligence - Internet of Things - Automation	Technological advancements are crucial in today’s omnichannel world and for supermarkets, some recommendations were made earlier in this paper in regards to digital civics for example. However, areas such as automation are crucial—utilising the use of AI or the IoT to incorporate elements such as chat bots on websites can help customers while also retaining them.
L—Legal	- Consumer contracts - Regulations 2013 - Consumer Law - Copyright Law - Health & Safety Act - Import/Export Law	No recommendations apart from ensuring legal factors are abided by. The store must have a company policy and ensure guidelines are in place.
E—Environment	- Logistics - Climate Change - Environmental policies - Packaging - Shipping - Trading	While growing online, sometimes having a bigger store would be beneficial. Or having stores far and between. With larger stores, including onsite delivery/warehousing team, means logistics can be minimised which is a massive benefit for the organisation and environment, take Next PLC as a key example. Alternatively, the supermarket could recruit an external team to deliver their goods, wiping out their home delivery system all together with a result of minimizing their overall environmental impact by encouraging click and collect.

).

Evidently, when it comes to a website, the biggest influence which will enable the supermarket to secure and future proof their business is by focusing on UCD and ensuring all customers are catered for and can provide feedback on improvements. The key factors the supermarket needs to take into account are factors such as accessibility and demographics—Approximately 10 million UK citizens are 65 or older, which is more than 15% of the UK’s population [32]. This number is estimated to climb to 14 million. This is going to cause a shift in how many elderly customers the supermarket will need to cater for, specifically online, in terms of accessibility.

7. Conclusions, Recommendations and Future Work

In this paper, the authors outlined the different types of innovation available and most suitable to a company, alongside demonstrating how this would apply against the concept of a prototype supermarket. As well as this, UX design principles and strategy development were discussed alongside applying them towards a prototype supermarket.

It was demonstrated that the website in this paper focused heavily on UCD and took into account accessibility throughout the process. However, this did not end there. In regard to the prototype supermarket (and of course, any supermarket or start-up, in fact), being an innovative company with a strategic vision and plan to gain a competitive advantage against its competitors, such as Tesco, is crucial. Therefore, some future recommendations need to be addressed. For example, implementing virtual chatbots on a supermarket website is an absolute must. It has been evidenced that when clients face issues, the chatbot can help find a solution. This simple addition will enhance the user experience and improve customer purchase intentions [33,34].

First, looking at the key impacts which future innovation may have, it was found that digital civics, specifically in terms of digital technology and citizen-driven design, is a key emerging cross-disciplinary area of research that seeks out how to support service provision, organisation and citizen empowerment [19]. Utilising digital civics through citizen participation can enhance the impact of future technology, and it would be extremely beneficial to organisations to utilise it going forward, especially considering the UK has been recorded as the third-largest internet user [24]. Mobile phone internet users are growing significantly and while supermarkets may have developed online websites, ensuring their mobile developments keep up is extremely important and developing a user experience on mobile is a much-needed key development. This includes the likes of Chatbots and AI. This future innovation is currently being implemented in many organisations, and, therefore, websites are becoming autonomous and require minimal staff to man the frontline.

Finally, being digital and omnichannel is crucial for all organisations trading in today’s competitive market. When it comes to a website, there are many frameworks and tools available to develop this. In this paper, Wix was utilised, and whilst platforms such as Wix do have their benefits, it does have its drawbacks in that the website becomes extremely slow when various products are added to a range. A laggy and unresponsive website is one of the biggest put-offs for customers. Therefore, it may be suggested and recommended that going forward, supermarkets slowly and incrementally plan to move their store to a company-made HTML and CSS where in-house experts could design the website by hand.

To conclude, this paper opened up some key, informative and applicable methods of developing a website in the current digital age while addressing what type of innovation should be utilised alongside a strategy. To do this, up-to-date UX design and UCD methods to maximise and improve the usability, accessibility, and success of a website were utilised.