After sorting out the colour scheme and finalising the functionalities and features in the app, I was ready to start bringing it to life; for this process I used Adobe XD. I began laying out the basics, wire-framing without colours, and once I was satisfied with those I started adding colours. However, this is where things started getting complicated, there were numerous accessibility issues mainly due to the contrast of colours. Also, besides colour and text issues, the trend in the past year or two has been the dark mode in apps. We see this implemented in the most famous apps like Instagram, Twitter, WhatsApp, and Facebook messenger. I decided to create two versions and send it out to a few different people from my target audience. It was decided on the “dark” version for the Home page (below are 2 examples of the different versions).
The complications were mainly in the sub-pages. When wire-framing in shades of grey, it is hard to visualise how colours will overlap, clash and how crowded they can make the app look. This was especially difficult because I wanted to include a small gallery of images of the lounge, which on their own were already very bright and colourful. However, since the home page was dark, the inside could not be so especially since it includes written information which becomes tiresome to read if the background is dark and their are surrounding bright colours. The sub-pages of Basrah Lounge were edited and changed numerous times, also with the help of feedback from users.
Another aspect I wanted to test was the menu. I was torn between a slide/hamburger menu and a bar at the bottom of the screen. From a personal preference, I like menus that are hidden and out of the way; I find it when I need it, and I think they make apps look neater. However, from a UX design and user testing results point of view, that is not the case. An exposed menu at the bottom increases engagement and makes the navigation experience easier and less frustrating, especially when it’s easy to use (icons are big enough and have titles if necessary), and indicates where they are on the app (through the use of colour or a pointer).
Although I was still in doubt with some design aspects, I figured that I could always come back to make changes and work it on simultaneously while I export the components that I was confident in so I can start building it on Unity.