Ellie Polden Visual Communication Level 5

[elliepoldenviscommlevel5]

Shown are my final boards for hand-in. Within these boards, I have made the changes that Rich suggested by removing the user persona, user flow and brand guidelines. I also emphasised the narrative of the app so that it was clear and was able to speak for itself.

Overall, i am extremely happy with this entire project. I enjoyed every part, whether it be researching UI/UX or using my knowledge to create a beautiful design. This project has definitely solidified the fact that I want to work with UI/UX in the future. I look forward to widening my knowledge and understanding of UI/UX,

[elliepoldenviscommlevel5]

Responding to feedback

In response to the feedback from Rich, I went and made the small changes within my UI. These changes were making the buttons within the learning and profile page look more unformed so they look as if they have a stronger place within the page. This was completed by making each button the same size and making sure they're equal space apart.

I then went into the crisis page and changed the colours of the buttons and corrected the sizing and placement. this was to make sure they are cohesive with the rest of the designs within the app. i also reworded the text to explain that 999 should only be used during an extreme mental health emergency.

I also changed the icon within the nav bar to have a fill colour when the page is active. These changes, although they're small, have made a big difference in making the designs feel more refined.

[elliepoldenviscommlevel5]

Presentation boards for final crit

These are the final presentation boards I have constructed for my final crit with Rich. I have made sure that I am reflecting back on the feedback that I received last crit, by making sure the boards don't appear too clinical, they tell the narrative of the app and most importantly have a zing! This presentation structure was inspired by the one we used for our EP//M final presentation.

From this crit i received very positive, there were only a few details that i needed to change. these mofications were:

remove user persona, user flow and the brand guidelines.

sell the app as if it exists, not as if its a concept.

consider adding photography within the problems and solution to give visual aide for the context.

re-consider the size and placement of the topic buttons within the learning page

make sure the line surrounding the nav bar is consistent throughout all the pages.

explore filling the icon when the page is active, rather then darkeneing the contrast.

re-consider the appearance of the crisis page.

From this feedback, i felt very positive and proud of my work. However to make it even better I intend to make these changes.

[elliepoldenviscommlevel5]

Crisis page

After considering what I want to be shown within my presentation boards I noticed that I hadn't completed a page for the crisis button. Therefore i pieced together a quick design that follows the same system as the previous pages. the purpose of this page is to allow the user quick and easy access to emergency helplines if they themselves or their loved one is suffering from a mental health crisis.

In the event of a severe mental health emergency I gave the option to immediately dial 999. I also placed the icon to access this page on every page in the exact same location so that the user is able to access it at any time.

[elliepoldenviscommlevel5]

Keeping personal details to yourself

After showing my work to a friend i recevived feedback questioning the anonmity of the community forum. they expressed their concerns about how people could be recognised by their profile picture and full name, this could be troublesome as youre disclosing information about another persons health. Therefore i decided to remove the surnames within the profiles so that only the forename remains. i also gave the users the choice to either use a photo for their profile picture or replace it with a smiley face. This then gives the user a choice and protection when disclosing information as their face and surnames are not disclosed.

[elliepoldenviscommlevel5]

Comparing colour pallets

After I had completed the final compositions and structure of the app I wanted to experiment more with the colours used with the background and buttons. I started with the colours which I've used up until now, with that being a white background and a grey button. i then switched these colours over to be the opposite. from looking at these i personally think that still, the white background allows for the colours within the accent colour, illustrations and background illustrations to stand out more and be more vibrant. Therefore im going to keep to this design.

[elliepoldenviscommlevel5]

Applying UI to the profile page

After deciding to combine the wireframes, i began to apply my UI system to the design. Again, keeping a consistent look and composition to the other pages allowed for a cohesive design.

Whilst i was designing i started thinking about ways i can entice the users to use the app on a daily basis. I then came up with idea of keeping track of the users daily learning times and also creating a streak, which will make them want to re use the app daily to keep the streak going.

[elliepoldenviscommlevel5]

Profile page low fidelity wireframe

With the profile page, there aren't many components that need to be featured, therefore there's not much content to display. I don't want users to be allowed to follow other users, therefore there is no option to view their amount of followers. the only content that needs to be included is the self reflection option, continued reading and also the system preferences. These options can be simplified into their own buttons, therefore I intend to go along with the third design, as it matches the other pages and it is simple but effective.

[elliepoldenviscommlevel5]

Adding UI

Following the same process as before, I combined the two wireframes to produce this outcome.

In my personal opinion I think this page is one of my favourites as the mixture of illustrations and colour really stand out on this page. I also really like how the first illustration of the girl with a question mark sits really well within the page, however I have noticed that it isn't in the same colour as the rest of them, therefore that needs to be changed over. I also think that the line length within the body copy of the paragraph seems a little too short, therefore I need to play around with it and explore ways to make it fit.

[elliepoldenviscommlevel5]

How can you help low fidelity wireframe

To remain consistent with my page compositions, I have chosen to merge the first and second design. I will be adding the square like grid from the second design , similarly to the learning page, to the first design. I will then be utilising the illustrations and titles to create a similar appearance to the topic learning page, this is so the whole app remains consistent, however it will still have small changes so it doesn't seem too boring.

[elliepoldenviscommlevel5]

Community Forum

After combing the two wireframes together, I believe I have come to a successful outcome. it is clear, organised and there is enough breathing space for the user.

after exporting the first design to my phone I noticed that the typeface ran up a bit too small, therefore I sized up the type size from10pt to 14pt. this then resulted in the text being more legible. the page also follows a continuous type hierarchy which allows for an easy to navigate page.

[elliepoldenviscommlevel5]

Community forum low fidelity wireframe

following a similar style to the previous wireframes, I began sketching different ways the community forums could be composed. Using different existing forums, I explore different ways of splitting the information from the original posts and their replies from other users.

in my opinion I think that there are elements from the third design that could work due to the fact that it clearly separates the two contents and organises them into different categories.However the elements of having the illustrations and a small piece of text at the op remains consistent with the appearance of the the topic learning page, therefore it remains consistent. To create the perfect page I will explore how I can merge these two wireframes together.

[elliepoldenviscommlevel5]

Applying UI

Following a similar pattern to the learning front page, I began applying my UI design to the topic learning page. I personally think that I have managed to successful create a page that has a comfortable amount of text within it and also plenty of breathing space.the illustrations give it more of an energised feel and the use of colour within the sub heading allows for clearer hierarchy.

I have noticed that I have missed out on changing the colour of the illustration to the blue tone, therefore when I go back into XD that I need to do that.

[elliepoldenviscommlevel5]

Learning Page low fidelity wireframe

these wireframes were made to help me Crete a well structured learning page that Is useable but manages text in a gentle way so that it isn't too clustered and overwhelming for the user.

from these designs I like the second design the most as it has a illustrations as well as text cut up into smaller sections and over a few pages to make sure that there isn't too much text within the page. however, with the first design I like the numbered countdown of the pages as it explicitly shows where the reader is within the article and how much they have left to read.

moving forward I intend to combine these design. most importantly, when designing this page I need to make sure I'm not over using the text and also giving room for the content to breathe.

[elliepoldenviscommlevel5]

Experimenting with colour and adding illustrations

to begin experimenting more with the composition, I started by making the green block from the previous post into a reading list. immediately after doing this I thought it made the page feel like it fit better. I then moved on to creating the different sections that display the different topics that they lead to. within these button I applied some of the illustrations that I found online, this helped make it feel more interesting and less sterile. With the first design I did come across a slight problem with the placement of colour, especially making the difference stand out between the background and the nav bar, therefore I experimented with applying the green colour and then turning down the opacity to 50%. I also wanted to explore adding in some form of my own illustrations within the back ground, therefore I created a two tone squiggly line that I then applied to the corners to the page. Although they are small implants of colour it helps bring in a sense of life and takes away the sterilised feeling.

Within the designs I applied the blue colour to the typeface and the plugin illustrations. this was to make It softer as I find that pure black can be quite straining on the eyes, especially within UI.

Out of curiosity I also wanted to experiment with the appearance of using a floating nav bar, however it definitely didn't look as good as I thought it would. therefore moving forward I intend to keep to the middle nav bar, where it is green with a low opacity. I also changed the opacity of the icons that weren't In use, to create a hierahy to show the user which page s currently active, this will change in response to which page you are on

[elliepoldenviscommlevel5]

Illustrations

To make my design more exciting I wanted to add in illustrations, however I anted these illustrations to still remain simple and go with the aesthetic of my design. I researched into good plugins that I could use copyright free illustrations, where I found streamline icons. Within this website I found a collection of illustrations called Milano, which I liked and believed worked well with the appearance of how I intend to have app.

therefore I started to scroll through and download SVGs of the illustrations that would work throughout my entire app.

All illustrations found within this app design are from this following reference:

streamline (N.A) Milano. [online] Available at: https://www.streamlinehq.com/illustrations/milano [accessed]

[elliepoldenviscommlevel5]

Beginning to add colour

To begin the learning page I applied the nav bar that I originally liked from the wireframes, as well as the structure of the buttons. I then started to implement the chosen colour palette. Following the ruling of colour I learnt about previously I began with using the green as an accent colour, grey as the primary colour and white and the secondary. I liked how clean this design looked due to the fact that it has used muted colours but still also implemented colour via the accent green colour. I don't necessarily know if I like how the green looks as a full rectangle, therefore moving forwards I intend to try implementing this as a reading list.