Diploma project for my Higher Diploma in Human-Computer Interaction and User experience - 2021/2022

A website and a mobile app for a new supermarket chain in Ireland

Synopsis of the project

• I created a website for a new supermarket chain in Ireland and also a mobile app. It is based on an idea I had about importing French biscuits to Ireland but not for some specialist shop or grocery store, but for a new large supermarket chain for Ireland.

• The new large supermarket chain would have the whole range of French biscuits that can be found in supermarkets in France just like in Ireland they have the whole or a substantial range of British biscuits right now along with Irish biscuits. The supermarket website and mobile app would also need to be easy to use, clear and require few clicks from the user to find what they are looking for.

• I carried out a comprehensive research into the large supermarket industry globally and for Ireland by doing a competitive benchmarking analysis for the websites and mobile apps of the 3 large supermarket chains that I found in Ireland; Tesco, Supervalu and Dunnes stores.

Project presentation and demonstration of the prototypes

• I completed 2 user surveys to identify desires, behaviours while shopping for food online (whether they use a desktop website or mobile app, what is their favourite supermarket chain in Ireland based on the usability of their website and of their mobile app etc..), needs and asked the users if they were interested in the product.

• Out of 57 respondents:

• 54,4% said they would like to see French biscuits in the supermarket chains.

• 45,6% said they would go to the supermarket that has the French biscuits for their shopping.

• Out of 27 respondents:

• 55,6% found the Tesco website the easiest to use in comparison with Supervalu and Dunnes stores websites.

• I gathered all the information obtained during the research and tried to find commonalities between the users stories, experiences, statistics and created a user story map/affinity diagram and one customer journey map for both the desktop website and the mobile app.

• In this case , the journey steps that the user would take to find the French biscuits were the same for both.

• I then made sketches and wireframes based on the research and used each step of the customer journey map to create one wireframe and then proceeded to create mockups of the desktop pages and mobile app pages.

• As the mockups are high-fidelity , they can be used for a high-fidelity prototype so I used them to create a high-fidelity prototype for the desktop website and the mobile app.

• I also incorporated a design innovation (for both the desktop website and the mobile app) that cannot be found on other supermarket websites and rarely on any other shopping websites and websites that have products/services to sell , which is is to have a pop-up window whenever the user wants to have more information about a product.

• For this project, when the user is on the results page where they see a list of products , they can see a bit of information about the product such as the title and then an hyperlink ‘Read more’. Upon clicking that hyperlink , a pop-up window opens up with the full description of the product.

• The user can then close it and continue browsing through the results page without having to be redirected to a new page each time, it gains time for the user as it allows them to browse faster through the products to find out more about them without having to go back and forth between the pages and subsequently leaving the website or mobile app to find another website/mobile app that can deliver the information they need faster.

• The final aim was to create a high-fidelity prototype for both the desktop website and the mobile app.

• My project was to go through one cycle of the UX design process which took me between 4 to 5 months.

• The process is then repeated indefinitely every 3 months for example with different research methods that lead to new wireframes and prototypes that are handed to the developers so they can release a new version of a website and/or of a mobile app.

• Below are the full details of the project along with the prototype links but here they are again:

High-fidelity prototype for the desktop website :

https://xd.adobe.com/view/e0a6a00d-34a5-4eb0-82fd-4bb3d53e5196-b5f5/

High-fidelity prototype for the mobile app:

https://xd.adobe.com/view/2e4ec1eb-0150-4697-a754-553744a53570-7b1d/

A website and a mobile app for a new supermarket chain in Ireland - Project full details

UX design Research and Process explanation

I feel everyone likes biscuits but customer surveys would be an ideal way to find out what the customers in Ireland want by simply asking them if they would like to have more biscuits in their supermarkets and if they would like to have the whole range of mainstream French biscuits brand alongside the mainstream British/Irish biscuits. I could show some photos of these biscuits , I have already selected quite a few from Carrefour.fr , which is a large supermarket chain in France and also has a presence in many other countries. However for the project I will try to aim for 20 maybe 50 people if I can to fill out the survey. In reality hundreds or thousands of surveys would be better but I feel if 20 or 50 persons want the same things, it could be possible that hundreds and thousands would want the same things. Of course it is just a probability, we can only know after doing the survey and doing it with more and more people may get different results. Generally it can give an average of what people want. I cannot see people saying no but again surveys can mean nothing as in UX we learn that whatever the customers say is irrelevant and we need to watch what they do instead. They could say they all want French biscuits but never buy them once they are available. However UX is a process that can be done several times and forever , so if it doesn’t work the biscuits could be removed and more research can be done again on the customers' needs and adapt the offer to their needs. 

Usability testing

To watch what the customers do, usability tests are a good option however they can cost a lot. I did that in the past for my professional Diploma in UX design but for a company it is different , as they would hire people or even get a recruitment agency if the company is big enough , to hire candidates willing to sit for one hour and try a website while they are being filmed and the UX researcher would also be present and take notes of the customer reaction, ask them questions. It is hard for a UX designer student to find friends/family willing to be filmed and for one hour asking them questions and to go through a website. I did not want to do that for this project as I couldn’t find anyone for my previous project and had to do it with my sister who is an actress and maybe for that reason she said she didn’t mind being filmed. However she lives in France and her English was not that great regarding technology terms or internet terms such as ‘browsing’, ‘tab’ etc.

I know how to conduct these tests and could do them in reality for a company or hire the people. These tests can be run once the website is up and running , however they would cover the whole website not just the biscuits section but we could ask the person to find the biscuits section and see what they do once the page is open. 

A/B testing

Another test to see what the customers are doing is the A/B testing. For example it could show two different versions of a website , or a function, section on a website or even a page. If we are not sure of the UX/UI of a homepage for example and we want to make sure that the customers register an account with us. The A/B testing would have in this case two different homepages that have a different layout and the ‘registering an account with us’ section/buttons in different places. One homepage version would be shown to half of the customers visiting the website and the other homepage version would be shown to the other half of the customers visiting the website. The customers would not know this but behind the scenes what they do would be recorded in the website stats/analysis. Changes can be made based on results, for example on which version of the homepage more customers registered an account with us. If none , the homepage can be altered again and the A/B testing can be done again and again until the customers register an account.

These tests however are done once the website is built but before the customer user journey map and affinity diagram or user stories are done in order to build the website, the prototype. Technically the website is not being built and the prototype could be used for Usability tests and A/B testings (however it would not be available online so the A/B testing would need to be done while doing the usability test).

Once the website is published , the website stats/analysis will also show what the customers do.

Competitive benchmarkings

The first part of the research is to compare , do an analysis on the largest supermarket chains websites in Ireland which is called competitive benchmarking. It is a deep analysis/review of main/key pages of a website with a UX perspective and also a UI one. What looks good or not and what works well or not , when trying the website. It is generally divided into a pros and cons section and the pros section would have the colour green while the cons section would have the colour red . These colours are being used throughout the analysis to pinpoint /highlight areas of a website. A separate competitive benchmarking is necessary for mobile apps .

It can be really helpful and helps to gather a lot of information about competitor’s websites and allow you to build a better , more effective website that addresses all the issues other competitors are having and emulates the effective parts of the competitor’s websites. 

Surveys

The second part involves surveys on a percentage of people/ users . The users should be targeted ideally so that they know how to use the Internet for example and how to browse a website . As part of a diploma project , it is not really possible to get hundreds or even thousands of surveys completed by relevant users which would be the best . A company would need to hire a third party company to distribute the surveys to relevant users . However 20 surveys could be an ideal number  to start to show a pattern, if for example 18 out of 20 surveys say the same thing , we could assume that if we did 100 surveys, 90 would say the same thing but of course we cannot be sure about it until we actually do it.

The surveys should have a mix of free hand open questions and multiple choice questions, they can be done on free surveys providers such as survey monkey or google form.

Personas

The third part can involve more personas, usability tests and all of these are qualitative research meaning that it is focused on fewer users and go into details of someone’s personality for the personas for example. I have explained the usability tests above , the pros and cons and what they are. However it is not mandatory and depends on what the company wants, there are many ways to do a user research.

User story maps/affinity diagrams

Once the initial research has been done, which is what we discussed above , we need to gather all the information we obtained from the competitive benchmarking, surveys, usability tests, A/B testing, personas etc..and create a user map or also called affinity diagram. This is done by a team of UX Researchers , especially in large companies. They would hire several UX researchers and UX designers or at least a few of them for each part (The research part and the design part). The UX researchers would work collaboratively on this task and write on post-it notes detailed information given by the users or obtained through other means of testing such A/B testing or competitive benchmarking where the UX researcher gave his or her own opinion as a potential user of a website or of a mobile app, this research method is also called a heuristic evaluation.   

The UX researchers would then put up the post-it notes on a wall and would create/name categories and then move the post-it notes around into the relevant categories or the closest fit for the post-it note. It can also be done remotely using the online software Miro which was created as a collaborative tool, diagrams and maps can also be done on it and a white board with post-it notes can be shared among co-workers to work on the grouping progress remotely. 

Customer journey maps

The fourth part of the research is to create a customer journey map from the post-it notes that we gathered into categories. The categories can be the journey steps for the map, the steps that a customer follows while browsing a website. Many post-it notes would have the same information, some more important and some less. The same information should be summed up into one information. Once the customer journey map is done, we can do a user flow map to find out the more common path a user would follow when browsing through a website. However that part can be skipped if we don’t have much data or user surveys for example as the most common path would be obvious from the user story map where the post it notes are being gathered into categories. Large companies with large research data could also find a few common flows that customers follow when browsing a website and could do separate prototypes and wireframes based on these most comme flows. Smaller companies and depending on the services they offer may have only one most common flow their customers follow. 

UI Sketches

Once the most common flow a user follows when browsing a website has been established , the UX designer will work on UI sketches before starting on the wireframes that are based on the UI sketches ( showing emplacements of text, tabs, bars, buttons, images on a webpage). The UI sketches would be the steps that the customer follows therefore the pages they are browsing through. These sketches can be skipped but they give a good idea of how a page would look like. The sketches can be simple with less detailed information than the wireframes. 

Wireframes

Each UI sketch will be turned into one wireframe , that is a digital version of the UI sketch. It can also be simple or be more detailed visually but what’s more important is that they contain detailed information of what the buttons, interaction, tabs etc along with detail of what fields should ask for. A field could be in a ‘register an account’ form, so the wireframe should explain to the developers that they want a password for example that has a minimum of 6 characters, one capital letter and one sign, not a letter and give examples of accepted signs . UI information such as font size, font type and whether the fonts should be bold etc and colours of fonts and backgrounds , tabs, buttons should be given as an hex number which is the number the developers would use when coding. Adobe XD and Figma softwares provide these numbers for the colours. 

Prototypes

Once the wireframes have been done , the prototype can be started. The prototype can be either a low-fidelity prototype, a medium-fidelity prototype and a high-fidelity prototype. A low-fidelity prototype is probably the most cost-effective one but doesn’t provide much detail on how the final website should look like. It is basic and can be done using black and white for example and showing the basic interactions from the user flow. Smaller companies that have a limited budget and time could want to opt for that one. A medium-fidelity prototype is somewhere in between a low-fidelity prototype and a high-fidelity prototype. It is not that expensive and doesn’t have too many details or not enough details. However it is more expensive than the low-fidelity prototype and more time-consuming. A high-fidelity prototype looks exactly like the final version of a website, it is really expensive and more time-consuming. However it is the best option if a company can afford it.  For this project I will do a high-fidelity prototype for both the website and the mobile app. 

Logo

Firstly I created a logo for the supermarket and wanted something simple. I tried a few iterations in Adobe XD using different fonts and came up with the following logo. I wanted the logo to have an Irish name and the colours of Ireland since the supermarket would be in Ireland and Irish . The fonts I chose in the end (circled in red in the image below) are clear, simple, cheap and indicate a large supermarket.

Competitive Benchmarkings

I started with a competitive benchmarking that allowed me to review and compare the 3 largest supermarket chains websites and mobile apps in Ireland. I came up with several similarities, necessary and unnecessary features. The report I made is quite comprehensive and contains an analysis of the key pages of each website and mobile app (view examples below) . I found that the tesco website and its mobile app was the best both for the UI and the UX. It was convenient, easy and fast to use. I didn’t find many irrelevant ads or content and was able to find the products and the information easily. The tesco website seemed less appealing than its mobile app however. I preferred the mobile app UI and used it as an inspiration for my supermarket mobile app.

Surveys

I did two online surveys using Google forms to find out about the customer needs and behaviours. One survey was centred about the product that I wanted to propose in a new large supermarket chain in Ireland that was a whole range of French biscuits on top or the Irish and British biscuits range.

The second survey was centred around website and mobile app usage but both surveys had questions about online shopping to find out whether this is something that users do. The second survey had an open question about it where users could describe an experience they had while shopping online even though I had asked if the users shopped online for their groceries in the first survey. I wanted to see if the actions match the words , so the second question was the action.

For the first survey I managed to get 57 responses more than the average I had planned (20 to 50 responses ). 

I was surprised that even though the majority of shoppers declined to use my supermarket for their regular groceries shopping, if there were a whole range of new French biscuits , 45.6% of respondents would go to my supermarket which is quite an important number and almost half of the people. Maybe if there were more respondents such as 200 or even more, the result could shift. So I feel the 45.6% is not necessarily a reflection of the minority but it could be the majority of people.

It did confirm my initial research and the comment from that French economist who works in the consumer field. He said to bring people to your new supermarket , you would need to have the lowest prices but also a product that the customers cannot find elsewhere. 

I didn’t ask about the lowest prices in the surveys as the focus was the new product.

I also found out that most people 80.7 % of the 57 respondents do not shop for groceries online which is interesting. However the supermarket chains still have websites and mobile apps.

For the second survey , I managed to get 27 responses and asked questions about their behaviours whether they use a mobile app or websites . They seemed to use websites over mobile apps in the majority but both are being used. I asked the users to have a look at the supermarket websites and choose which one they feel would be easier to use and the majority chose Tesco, 55.6% of the 27 respondents. 

It is quite an important number considering the two other supermarkets were chosen by 25.9% and 18.5% of the rest of the respondents.

That finding confirmed my previous analysis from the competitive benchmarking that the Tesco website was the best.

User story map/Affinity diagram

I then used all the data from the online surveys responses and the competitive benchmarking to create a user story map/affinity diagram.

I tried to gather them under common categories to understand the goals, behaviours , issues and even interests of the users. I used Miro with virtual post-it notes to organise the data, unfortunately the software doesn’t offer the download as JPEG or PDF for free anymore so I was only able to take screenshots.

Customer journey map

After gathering all the data , I created a customer journey map for a user scenario, the user scenario was to shop for biscuits especially the French biscuits (The French biscuits would be the first biscuits to show up in the search results of biscuits page) which was the most common path that the users would follow when using my supermarket website or app from the survey results and based on the product offer.

The customer journey map detailed the steps /actions that the user would take/make on both the website and the mobile app including their goals , context , behaviours and pain points/issues with an overall scale using smileys to rate the experience of each step/action as either positive or negative.

I based this customer journey map on a customer journey map model that I followed for a project during my professional diploma in UX design. I made that map in Figma.

UI Sketches

I proceeded with some UI sketches for each step/action for each website and the mobile app. I did one screen per action/step. At first I wanted to do them on paper but I came across an erasable white board in a shop ( incidentally that I used in France at school when I was young, ‘une ardoise velleda’ was exactly what the teachers asked the parents to buy) . I thought it would be easier and faster for corrections and since nothing is set in stone regarding sketches or wireframes,  we could use any medium.

I had a fairly good idea of how the pages for the website and the mobile app should look like and what features should be there but stil would make a few corrections as I created them. I also added some basic information.

Wireframes

 After that I used the UI sketches for my wireframes , to make medium fidelity wireframes . I took photos of the UI sketches and uploaded them to Adobe XD in order to make the medium fidelity wireframes, I added more details and also made some changes such as adding buttons I had forgotten. 

Further down the line I made a pop up window available for the description of the product so that the customer doesn’t leave the results page and can quickly find more details about the products. My diploma project supervisor asked me to come up with a design innovation that was not used by any of the supermarkets websites and mobile apps, so I thought about it for a while and then realised none of the supermarkets had a pop up window for the product’s descriptions, their descriptions would open in a new page which could hinder the use experience as they generally want to browse through products fast.

I modified the wireframes several times to reflect all of these changes.

Mobile app wireframes

After that I did another iteration of the wireframes for the mobile app UI as I thought the sketches looked a bit messy and used Balsamiq for them ( I discovered that software in the UX/UI module after I had done my prototype for the website so thought I would do the sketches again before starting on the mobile app prototype.

Desktop website prototype

Based on the mobile app and the desktop website wireframes , I started to proceed with building the prototypes. 

I started to build first the prototype for the desktop website , I searched the internet for some images for the supermarket aisles along with black and white icons and colourful icons from the website flaticon.com to use for the menu tab.

I had a good idea already from the wireframes where to place the components and text , however I did have to make a few changes along the way such as with the layout of the homepage for example so that it fits the desktop frame. The pages I made are high-fidelity and can be called and used as a mockup of the website key pages that reflects a path ( in the above customer journey map ) the customer will follow when using the website.

I made these mockups on Adobe XD along with the prototype , I added arrows on each page to show the clickable parts. 

The final prototype for the desktop website can be viewed at this following link :

https://xd.adobe.com/view/e0a6a00d-34a5-4eb0-82fd-4bb3d53e5196-b5f5/

Mobile app prototype

For the mobile app prototype, I also used Adobe XD and created a high-fidelity prototype and mockups at first just like with the desktop website.

Using Balsamiq to do a second set of wireframes helped me visualise the layout and build the pages more accurately without having to make a few changes. When I did the prototype for the website , I had not discovered Balsamiq yet so couldn’t do another iteration of wireframes but I did them in my mind and then made the necessary adjustments along the way.

The final prototype for the mobile app can be viewed at the following link:

https://xd.adobe.com/view/2e4ec1eb-0150-4697-a754-553744a53570-7b1d/

High-Fidelity wireframes for mobile app