Week 12

Here was my presentation from week 12: https://miro.com/app/board/o9J_lXJENGs=/?moveToWidget=3458764523258650373&cot=14

Onboarding

For onboarding I had an idea of how to go about it, what to include, what to leave out so as not to overwhelm new users etc. from lecture content and also my independent research on design for healthcare. That’s said I was at a loss for how I should present my login in and sign up screens. I decided to just go with them as the general gist I got from research was that you wanna postpone users having to answer questions or make decisions for as long as possible so I thought that what if you just answered those customisation questions in your profile. Anyway back on track…I found this really great article with example of great onboarding flows, I also looked to see what people were doing on pinterest and dribbble.

Sketches

Here are pages from my sketchbook that are focused on the onboarding screens…

   

Prototype

So you may have seen these screens in previous posts. Anyway so these were the design I had first come up with. I ended up being really unhappy with the look and feel of these screens so I ended up rethinking the colour and style of the app.

At first the layout didn’t really change much at first, just the colour scheme. I kept the plaster buttons and the wee banners as well. Just made the other login method buttons a wee bit smaller.

After week 12 group critique I acknowledged and agreed with some of the feed back I got. I changed the logo from what sorta looked like a broken heart to a heart shaped plaster. This ended up making more sense to be healing with self love or loving yourself enough to look after yourself idk you get the idea.

Another thing I changed is I axed the banners because they didn’t really seem necessary and actually look really awkward. So I changed those to a much more trendy blobby situation.

Another notable thing I changed was the colouring ever so slightly to better accommodate the blobs.

Here is the final result then of all those tweaks…

 

Home Screen

The home screen was something I could design fully straight away because I needed to know the content I would have in the app before I could know what to include on my home screen so I did a lot of backs and forths of adding and taking away. That said, the home screen design is what’s setting the standard for the layouts of the mind, diet and exercise screens. I was designing the home screen where I decided that I really wanted one of those sliding banners.

Sketches

Here are pages from my sketchbook focused on the home screen.

Prototype

Here is the screen I had shown in week 12…

To me even retrospectively this isn’t too bad actually but once again after taking on feed back I made some adjustments. The first thing I did was alter the colouring of the buttons to make them less harsh, I also actually finished of the screen adding whatever buttons I needed. Then I also made the banner look a lot nicer and well like an actual banner even though I left it static. If I had been doing better time wise, I would have like to experiment with making it actually slidable.

Anyway here’s the result after all those changes…

Burger Menu

As I was working on the prototype I felt compelled to add a logout button. Based on my observations the logout button in apps like this is almost always in some sort of side or burger menu and so I pulled a Jakob’s Law and hoped for the best when usability testing came around, luckily I was correct in my summation and it was the users first assumption to go to the burger menu to logout.

So since I decided I need to have a logout button in the burger menu, I had to design the menu screen…

Sketches

Here are my sketches of said screen…

Prototype

So for the design I ended up tying in the top and bottom blobs from the onboarding.

I also add some micro interactions using my handy dandy blob generating plugin, I only hooked up the one button to somewhere but I still felt that I had to give each one the same treatment and so I did just that.

Mind

I kept the layout for this screen pretty much the same. Only differences really is in the content. I spit up the content into the sleep, study and stress buttons you’ll see and then below that I added a mental health section because from my research I learnt that having that kinda stuff is very helpful and valuable.

Sketches

Prototype

Once again here’s my screen from week 12…

And I made the same alterations to it as I did the home. Here’s the result of that…

Journal

The journal was actually one of the last screens I designed. I think I put it off because I wasn’t sure how to approach it but after taking a look at different apps like Fabulous and day book I felt some I ideas sparking. I also looked at the different sections of my papier academic planner I’ve been using this year for inspiration on dividing the content. I kinda decided to fuse the concept of a day planner with a reflective journal. So the user can both be present and organised in the moment but also have the ability to look back on the day or week and reflect on their feelings and make goals for the month ahead.

I also found some really cool ideas for a schedule layout on dribbble.

Sketches

Here are pages from my sketchbook focused on these screens…

Prototype

I experimented as I went with the layout until I felt content with it and honestly I quite proud of the end result.

Diet

So this screen is once again basically the same layout as the home screen, theres just an extra topic in explore and I added supports and resources section for people struggling with food for what ever reason.

Sketches

Prototype

Exercise

Once again, same with the exercise screen layout, one difference is that I put all my buttons in the one screen frame.

Prototype

Sleep

For sleep I decided to have a top section with sleep helpers so meditation, bedtime stories, peaceful noises and binaural beats and such. Then the other section would be guides and tips and tricks all to do with getting good sleep.

I decided for my prototype to go through a flow of you going to a bedtime story. For this I took inspiration from the sleep cast ui cards in headspace (headspace generally has awesome ui) and also I had this idea for taking the layout of Spotify but replacing the album with a book shape instead.

 

Sketches

Prototype

I had way too much fun making up Story Titles and author names for the ui cards. I also enjoyed making the wee ui cards for the guides. The sound menu did stress me out a bit but I think eventually it came together nice so I’m pleased . I also decided to use a darker background than usual as there’s nothing worse than trying to sleep and you’re eyes being blasted with a bright screen.

Recipes

For recipes I took inspiration for the actual recipe layout from my Mum’s Easy Food Magazine collection and some responsive recipe websites on my phones browser. I also decided to use a recipe from one of the many many many Easy Food Magazines for the individual recipe screen. It’s funny actually because she has like every single one of these from each month all the way back to at least 2005 and I’m only noticing now that there are some really good recipes in these things.

The easy foods recipes were actually really helpful to look at as they gave me an idea of how to go about marking up the content.

Sketches

Prototype

I started with the header image of the recipe…

Then I marked up the recipe. I decided to have the ingredients in a drop down menu because I thought it would be cool…

 

 

Wiring Everything Up

I would say this was my last step but really I did this as I went. Wiring up all the different components. I also added drop shadows becasue it made the app look less flat and I added some wee subtle and some less subtle micro interactions here and there. One thing I’d note for next time is that the hover states I added are all well and good when reviewing the design on the laptop but on mobile it would really make sense to have hovers so it would be an effect that would happen when you tap instead. I know for next though. One thing I learned from working on the prototype in XD is that there are a lot of things I have to learn on Xd, in fact the learning probably never stops with design softwares but in particular yeah in the summer I’m gonna try and get to grips with components because although for the most part everything worked out ok in the end, I wasn’t entirely sure what I was at with them

 

I wish I coulda done a bit more with it and add a ton more screens but overall I think I did a decent job of designing a health and wellness app for college students. This project seemed very daunting to me at first, designing a healthcare product with all the ux considerations but I learned a lot more about ux design through this module and I was able to make my own spin on the brief so I’m happy.

You can view my final prototype here.