Week 08: Self Study- St Patrick’s Day

This week there was no lectures as it was St Patrick’s day so I took this week as an opportunity to catch up on my app design. I wanted to really work on my content and changes I had made from the critique last week.

Where I had left off in terms of app development was the mock-ups I had created for critique. The first thing I decided to do was to redesign these mockups with the new changes I had made to my design.

This is what they looked like before changes.

The things I will change are the colour scheme, text alignment and icon and button size.

This is what these mock up screens look like after my changes.

I really like what these changes have done to my app, I think it looks much more professional and sleek. I got rid of the loading illustration in the launch screen as I feel that it’s unnecessary. Instead it is now just my logo and brand name with that violet background.  The welcome screen is now more visually interesting as I made the logo take up a third of the screen with that violet background changing into a curved rectangle. I did this so that the transition in prototyping will look good auto animated. The sign up and sign in buttons have decreased in size to fit better on the screen and I have also added a ‘continue using’ feature underneath. I saw this feature in my peers work during critique and I thought it looked professional and was a great way to fill out that empty space. In these changes I added in the sign in screen. The sign in screen uses the same curved violet rectangle as previous screens to both add a bit more visual appeal but to also make for smoother transitions. I feel like there is maybe still too much empty space and I am in between thinking it should be filled out or that the space is needed to avoid visual noise. The other screens I have kept mostly the same other than the colour scheme and navigation bar. The one thing I changed was the top wavy blue shape to the same violet rectangle I have used throughout. I have also added a back arrow so the user knows how to get back to the previous screen or back to the home page.

After I had made these changes and was happy with them I decided I should continue working on more screens for my app.

These are the sketches I intend on developing into my app.

I have already mocked up most of these screen besides the ‘Add a pet’ screen.

This is how my ‘Add a pet’ screen looks when mocked up, I kept the wire-framed version beside it to see the process. Making this screen made me think about the flow the user would experience the onboarding process in this app.

To make sure I fully understood this process before designing for it, I created this User Flow Diagram.

 

This diagram helped me understand what I wanted from the onboarding process. From going through onboarding processes many times with different software, I’ve always appreciated a tutorial that pops up as a sort of overlay. Adobe software has something like this. I would like mine to allow the user to be able to skip it with one tap or click to avoid frustration.

I then started to sketch out how I think this process would look. like

After my ideas were sketched out, I chose which design I wanted to mock up. I determined that I would go for the darker overlay design with arrows and instructions on top of the overlay. This means that I can introduce option or a direction for the user without the screen looking to visually noisy, if the overlay is done correctly.

These are how the mock ups came out.

I’m pretty happy with them, I think the overlay looks good, its maybe not dark enough on the last screen. On top of that content heavy screen the text on top is maybe not clear enough. The instructions are also too long on that screen. Something that I noticed when designing these was that the darkest colour in my colour scheme is that violet colour. Therefore, for the overlay and instruction text colour I need to introduce a darker colour into my scheme for contrast.

While experimenting with a new darker colour to introduce to this scheme I used a colour wheel. I went through different tetradic and triadic colour schemes and I realised that even though orange and violet are harmonious I think the orange didn’t contrast enough on the light blue background. I decided that a pink shade would be darker then the orange and would contrast better while still being in the monochromatic range of the purple-violet colour.

This is how the pink shade integrated into my app. I think it looks much better and more pleasing to the eye.

Now that pink was in the colour scheme I thought that a much darker mix of pink and purple would be perfect for my dark shade.

 

This is my new colour scheme with the pink and wine colour.

 

This is how that wine colour looks in practice with the overlay.

I think when directly compared with the old colours, you can really see the improvement.

 

 

 

 

 

 

 

 

 

This has been a very productive self-study week and next week I hope to continue with some new screen development and possibly introducing some prototype interactions.

Leave a Reply

Your email address will not be published. Required fields are marked *