Posts

Bottom bar redesign

Image
 Today, I have been focusing on redesigning the bottom bar which after some testing I have found that the space in between each icon was too small thus meaning that it was easy to misclick the wrong section. Thus, to improve the bottom bar I have decided that the colours at the side were not necessary as it was more important that the app is usable and user is not frustrated thus removing the side bars of colour. Which allowed me to increase the orange bar in which the space in-between each icon increased. Below is the screenshot of a bottom bar before redesign. And here is the redesigned version of the bar In the before picture although the bar looks clean and minimalist I have found that users testing the app didn't know what some sections meant/directed towards thus adding the text at the bottom. Also, I have reprioritized some of the icons as I have removed a store locator as I have found to be not as important to be in the middle. Whereby, replacing the middle with the same si...

Further redesigns

Image
 Further redesigns to the app can be seen below an example of improved menu Before and after of nutritional information

Redesign to the app

Image
 Over the last couple of days I have been focusing on redesigning my app where I have made a design for one of the screens and changed the content of the rest of the screens in order to make sure all of them are based around the same design. An example below of before and after of my research screen As you can see I simplified the top bar thus leaving the bottom bit unchanged.  Another example would be the change to Home-screen page. Before and After respectively. Following changes were made after feedback I have received that the previous version of the home screen looked old and not contemporary.  Below there is an example of a redesign to my settings page.

Prototyping

 Also, recently I have started to prototype the app together. Whereby connecting all of the frames that I have made so far in order to create a functioning app. 

Mike's tutorial

 This week I had a tutorial with Mike where we have discussed our progress on the app and what could be changed and improved. From my side I raised an issue/question I had regarding the prototyping of the app whereby ideally I was thinking of designing the app in Adobe XD then transferring that content onto Figma in order to gain access to great prototyping features of Figma. However, currently after some research I found out that for free the following idea is impossible. And the only way to do that is to use service called XD2Figma. Which charges on a basis of how many screens you have in your app. That's why for now I will be sticking with designing in Adobe XD as I have made a significant progress of work in there.  On the other hand, Mike highlighted that the thing which could be improved upon would be "Build your coffee" screen to be specific the screen where customer selects the origin of their coffee. As he mentioned that the country flags don't quite fit the ...

Sidebar

Image
 I have also made a decision to change the top bar where before the three icons were: search, account and cart where as I have replaced account with the sidebar which allows the user to access key features of the app wherever he is. Current example can be seen below

Login screen

Image
 Upon launching an app it is important to allow the user to login or to register within the app. Thus, I have decided to include a login screen in before the main app. Furthermore, from my knowledge I have also decided to add in a feature to just "browse around" this is because some people might find it hard to commit to an app whereby they have to create another account without even seeing the content of the app and what the app has to offer. Ultimately, allowing the user to choose whether it is worth it for them to create an account or not. An example of the login screens  can be seen below