UX/UI

For the UI/UX we split the group up in two. Rick and Wilco worked on the customer application and me and Christian worked on the staff application. On this page Ill show the end result of the customer application and I will describe more about the staff application where I worked on.

Here I worked further on the Userstory 6: Bartender wants to see overview of tables. Userstory 7: Owner has full control over the app that came out of the research questions before. On this page I will answer these userstories with UX/UI visuals and wireframes & diagrams (C4). I used the methods Task analysis, design specification, survey, usability testing, product review, sketching & prototyping. I started with wireframes to sketch the first designs followed up by the diagram. After that I made a C4 model that we combined all together to a final C4 with level 1 & 2. I also created a usability test plan for the userstories to find out what we will need for the tests. After that I setup useberry for the usertests and created tasks for users to complete. All the results were compared to each other and the conclusion was made that some changes were needed. For full results see below.

  • Learning outcome 1: User interaction (analysis & advice)
  • Learning outcome 2: User interaction (execution & validation)
  • Learning outcome 3: Software design.

Customer application (end result)

This is the end result of the customer application. I’m not going in depth because I did not work on this side of the app. The prototype below explains itself.

Staff application (end result)

This is the end result of the staff application where me and Christian worked on. The application on the staff side is to make sure that there is an overview of the pub. The staff can customize their own floorplan with the same setup as the pub to have a good overview. This way the staff knows if a customer finished the beer recommendation and wants to order a beer. This saves a lot of time that could be used other ways. It is also possible to see if a customer wants to pay, call, or order another beer. This way the staff can focus more on what they are doing instead of walking around without knowing if someone needs something. It is also possible to see the most ordered beers to get a better idea of what is sold the best. I worked on the login, dashboard page & manage tables pages. I also made the first template of the application (dashboard).

Diagram

First off me and christian made a diagram for the application to get an idea how it should be build. This is the diagram created for the application.

Please press on the left bottom link to open up the figma file to see it on full screen.

C4 Model

I also made some C4 models on my own for the whole app, customer app and staff app. This includes level 1 and level 2. In the end we compared all the C4 models all together to made a complete one.

Please press on the left bottom link to open up the figma file to see it on full screen.

We used Rick his C4 model to make it complete. We compared all C4 models and we made his one better. This is the result below:

Please press on the left bottom link to open up the figma file to see it on full screen.

Wireframes

After the diagram and C4 model I started working on the wireframes. The diagram gave a good indication about how the application should look like.

The wireframes are made to get an idea how it should look like so we could make changes if needed. After this step I made the prototype for the staff app. You can see the result in the beginning of this page.

Please press on the left bottom link to open up the figma file to see it on full screen.

Testing

I also made some usability test plans for the staff dashboard. I made this for userstory 6 & 7. We also tested some participants in the UX lab.

After that we used Useberry to usertest the application itself. Useberry was new for me and introduced by Wilco. This opened a whole new world for me for usertesting. This website is very powerful in testing and you will get all the results that you want. You can even make tasks to let the user complete. This way you will find out if it’s easy for the user or not. I also added some survey questions on the end. Below here is a video of a user that tried our application. I implemented Figma into useberry and created tasks for the users to complete.

There was also an option to see the heatmap of all the users combined to see where they mis clicked. This way I found out how to improve our interface. See below for the most important heatmap. The conclusion is that there still must made changes in the prototype to make sure that this does not happen again. Also, the prototype should be tested again to make sure. Something I also learned from this.

These are the survey questions that has been answered with feedback from the participants. These were very usefull to know what could be changed or what is already good.

Deliverables

The staff application in figma (left upper corner for all the files): LINK

The customer application in figma (left upper corner for all the files): LINK

© 2021 - 2022 Semester 6 Portfolio - Pim Dankers. All Rights Reserved.

Close Menu