Area of Interest - Interactive

Website Planning

Rough Layout Sketch

Structure

The homepage will give the user enough information to know roughly what Cash Cow offers and how the magazine payments work.

This is a rough illustrator sketch of what will be on the website and how the pages will look like.

Final Website

Click this link to see the final website WIP from Wix, or to view it on mobile, scan this QR code down below:

Website User Testing

To make my website even better, I made a post for people to give feedback on the usability of the website.

For example, Dylan said that the colour scheme is good and consistent throughout the website, but he said the amount of subscriptions weren't enough so I added more. He said that the images were good although he would've preferred to see a few more. He said the ease of navigation was perfect.

UX and UI Design

UI (User Interface) is the visual part - its about the actual elements that users interact with like buttons, icons and screens.

UX (User Experience) is about how the elements work together - is it easy to navigate, does it make sense, is it enjoyable to use etc.

When designing UI and UX, having less information is less than having more because you should aim to grab attention. The navigation should be very easy to understand E.G. the user should know they are and can go when they are. 

Action buttons should never be too close together because the user's finger can click the wrong button if they are too close together.

The hand controls should also be very easy to reach with one hand - don't place action buttons at the very top corners otherwise they won't be able to reach easily.

 

The text should always be above 11PT otherwise it becomes very difficult to read. The interface elements should be visible in all light levels.

Another thing you should do when doing UI and UX design is to make sure you test your design as you work.

App Research

Dominos

Dominos is an app used to order pizza straight from your phone and in my opinion it is very well-designed with recognizable branding with an easy-to-use UI.

On the homepage, there are popular coupons at the top which bring customers in to buy because they can get the food for cheaper. There are also, deals, menu, and group order sections. It also shows your last order so that returning customers can re-order their favourite food selection. One thing I think they could improve is the images they use behind each section, e.g. for deals they could show coupons or behind group order they could show multiple people.

This is the deals section which shows all the available coupons that you can use.

This is the menu which is perfect in my opinion; each section shows suitable images behind the text and it is very easy to navigate.

This is the account section which shows all personal details which is standard in most apps.

Using Adobe XD - TableTown

Using Adobe XD, I made a mobile app used for buying furniture, predominantly armchairs and sofas. You can check out how the website looks in action on an actual phone by clicking this.

Using the prototype option at the top of Adobe XD, I linked each button to their respective area - the logo brings the user back to the homepage, the "Shop Armchairs and Sofas" section brings the user to the list of armchairs and sofas, etc. 

To make the top bar look clean and professional, I made sure the icons were the same size with the same stroke consistency which is a bad mistake lots of people make when adding icons. Instead of using PNGs, I used vector files so that they could be scaled up to whichever size was needed without losing quality.

I then linked each small armchair to a more in-depth page and also added a back arrow to be able to go back to the previous page. 

Using Adobe XD - Making a Food App

This is my design for the menu list. At the bottom, there is my old design which I didn't use because it didn't match the rounded style I'm going for on the whole app and it looked too dark.

When you click on one of the buttons on the menu, I made it so that it shows more details of it as an overlay that slides up.

To make it so that you can exit the overlays, I pasted transparent rectangles at the top that had a transition to go to the previous artboard if you tap it.

In a normal food delivery app, you can add items to a basket but in my case, I cannot do that because there is no way I can do that in Adobe XD. But if I were to, I would make an array list (Android Studio) of items in a basket using Stack Overflow similar to this screenshot.

Here is a recording of my final app

https://drive.google.com/file/d/1iFjKY1Oys66JPNdWBP36Deu07V8vGXnZ/view?usp=sharing

App Evaluation

To make this app, I used Adobe XD and made 13 pages in which I created a seamless experience for the users which allows people to order a variety of food with just their fingertips. The back button allows users to go back when they have made a mistake of where they clicked. Unfortunately, I couldn't make it so that the map would work functionally because you need a certain plugin which doesn't work. Instead, I replaced it with a static image of a map on where it would actually be. I also couldn't make it so that users could add items to their basket and control the quantity because you would need a developer who could implement it into the app. I spoke to a developer and they gave me the process that they would use to do this which I wrote further up in this page.