Scott McCabe

Student at #ixdbelfast

[scottmccabe-xd]

Paper Wireframes

Once we and the idea I started drawing out wireframes laying out the user flow and how features would look.

[scottmccabe-xd]

Color and Branding Research

Color

I also did some research on colour theory and the effects colors have on people's emotions.

How Color Impacts Emotions and Behaviors

This article is important as it exampled to use what colors we should use to invoke the types of emotions that we want the user to feel when using the app.

Yellows: make you feel happy and spontaneous.

Greens: make you feel optimistic and refreshed.

Blues: makes you feel safe and relaxed.

Color basics and psychology

This article gives examples of companies that use certain colors to fit their products and their purpose.

Branding

For my branding, research came across this article explaining the reasoning behind the headspace logo.

Headspace logo design reason

"The Headspace logo is an orange dot, symbolizing the feeling of being centered and calm,"

This is an import paint and this is something that we want to achieve in our own branding.

[scottmccabe-xd]

Competitor research

These are app that we found online that provide similar features to are idea. 

Headspace

For Headspace I found that they used a lot of bright warm colors making the user feel relaxed and comfortable. They also implement cartoons into there design which makes the user feel happy.

Calm

Clam uses a more simple and clean using lot of white space which conveys the feeling of clear and open. This makes sense as they are a meditation app.

Breathwrk 

Breathwrk uses a bright color that catches the user's eyes makes the app feel fun.

[scottmccabe-xd]

Milanote Research Mind Map

When researching this project I came to access this app called (Milanote) which is an easy-to-use tool to organize your ideas and projects into visual boards. I used this to layout to my research such as competitive analysis and visual inspiration.

[scottmccabe-xd]

User Personas

Once we had the idea finalized I created some User Personas to give us a guild to fall back up when designing the app to make sure we are designing for our targeted audience.

[scottmccabe-xd]

The Idea

After going throw all our ideas together we settled on designing an app for younger people that would help improve their mental health by helping them create better habits.

We choose young people we felt that they have been overlooked and we felt like there is a need for it.  

The reason why I thought that creating a habit app would be a good way to go was because of a book I read called (HOOKED How to Build Habit-Forming Products by Nir Eyal) it explains the hidden psychology of how tach companies build user habits so that they keep coming back. I may sound bad but I want to help users create healthy habits on things that will make them feel better and happier. So we tried to implement the lessons I learned from his book into the design of our app. This app is all about building healthy habits, which I feel is needed in this hard time we find our selfs in.

[scottmccabe-xd]

Idea Generation

Mind maps

After going over some research and discussing it with my group, I then created a mind map where I just laid out any ideas based on the research I did before. I plotted out ideas of what digital type serves that we could design to help these vulnerable groups.

The best idea that I came up with was to create a daily to-do list for older people to complete every day that would have tasks like light exercise, gardening, creatively... that would fill up their day keeping them active and productive. This app would contain a very simple design language so that older people could understand it. Other features would be walking them throw step by step to learn the app by speaking to them or showing them with simple animations.

Another idea that came up while collecting research from my dad who works in the NHS was the idea of creating a music app for people with dementia. As people with dementia love music creating an app that was focused on them would be a good idea.

[scottmccabe-xd]

ixd306 Post #1

Desk Research

Once we were given the brief for this project from Big Motive I started by just reducing online of who are the most valuable groups in Northern Ireland. I found that the elderly and disabled groups were at risk the most. 

LINK 

But I also found out that younger people are at risk, but not as physically as older people but mentally younger people are finding t really hard to cope. I feel that they are being overlooked on the news and social media.

LINK

[scottmccabe-xd]

Walk Throw of Today. app on Apple Watch and iPhone.

Link to XD file:

https://xd.adobe.com/view/bb996aac-27a8-49db-5ad7-34516ef86213-cda8/

[scottmccabe-xd]

Today. Project  Mockups

[scottmccabe-xd]

Today. Website design

For this app I also designed a promotional website. I did this because I wanted to have this idea viewable on all types of devices.

Wireframes

Below are images of two different layouts that I was experimenting with. The top image is the layout that I went for as it suits the overall theme of the apps layout better than other layout idea. 

High Res Mockup 

Below are the images if the high res mockups that I made from the wireframe sketches. I used the same colors and fonts from the app mockups making sure that the theme carries throw all the designs. The home will be the image with the watch mockups as the watch app is the main ideas. To get to the next page the user will scroll down and see the phone mockup. 

[scottmccabe-xd]

What I Learnt From the Cardboard Apple Watch Prototype

From do this prototype I learnt that having five story tiles on the screen at one time makes them so small make them hard to read. So what I did was redesign how many tiles to be shown at once, and I went with three. The user will still be able to scroll throw all the tiles with the scroll wheel but they just wont see as many at one time. I would not have made this discover if I did not create the paper apple watch mockup. 

Old - 5  Tiles Design

New - 3 Tiles Design

[scottmccabe-xd]

Font and Colour Palette

Font

I chose two fonts to use in this app, first is the font that I use for the branding and titles in the app. The font is called “Ambroise Std” I first saw this font when looking for apple watch mockups online, below is the image of mock up that I found. So I when searched for the font adobe fonts and found it.

I like this font as it looks old and since my app is about history it makes sense. The design of the individual letters are really nice e.g. r and k. But for large groups of readable content I used the font “Montserrat” as it is my go to sans serif font. For more decorative pieces of text I will use serif font “Ambroise Std” but for content that is going to be read I used the sans serif font“Montserrat”, also these fonts go well with each other. 

Colour Palette

The colour palette that I used first deepened on the colour palette of the apple watch UI. On the apple most of the background colours are black as the bezels of the apple watch are black, they do this because background colour merges with the edge colour making the screen look bigger than it actually is. And for the rest of the colour I kept is simple just using red as an accent colour and using white to make it stand out against the black background. 

White background

Black background 

Black: #000000

White: #FFFFFF

Red: #FF4D4F

[scottmccabe-xd]

Today Branding Inspiration

For the branding for the today app I created a wordmark using the font “Ambroise Std” which will be used in the promotional website and in high res mockups of the app. But for inside the UI I created a smaller logo that just uses the capital T to save space. I got this idea of branding from the website Medium which uses a wordmark as there mean branding but in different situations they use a smaller logo just using the capital M. They use the large branding when they have space to do so e.g. top of there website in normal desktop made. But when space is a factor e.g. when you view the website on mobile devices they us the small logo. This is something that I have incorporated into my branding for this app. 

[scottmccabe-xd]

App Layout Inspiration

I got my inspiration for my apps layout from how the tabs look in chrome on android. I like the way that the tabs are arranged by the newest to oldest. This works well with my app as when the user scrolls throw (back) the tab it is like you are going back in time. 

I have experimented with different layouts of the tabs as a watch is different than a phone. 

If I had primarily designed the app for a phone I would keep the tabs in the center as the user would pull up and down with there finger to move throw the tabs but I wanted to primarily design the app for the apple watch so the user would move throw the tabs with the scroll wheel not with there finger and I wanted to make the user feel like the scroll wheel is linked to the cards in some way. I decided not to have all the tabs in the center instead, they came from the right side as the scroll wheel is on the right side of the watch reinforcing the user that the scroll wheel is like moving back in time to older and older events that happened on that same day. 

[scottmccabe-xd]

Pierre Herme & Nicolas Buffe

When doing reach on storytelling web design I found this website called Pierre Herme & Nicolas Buffe it si about “THE STORY OF THE KINGDOMS OF THE MOON AND OF THE SUN”: AN ARTISTIC DIALOGUE SIGNED PIERRE” by Herme & Nicolas Buffe. The overall look and story are really nice but what I found interesting was how they make the website feel not like a website. And by making it less like a website I feel more engrosed in the story that it is trying to tell. 

What I found interesting about the website was how they designed how the user navigates the website, you do it by pulling circles down when you are done reading the content. It is a refreshing change instead of just using the next button. Having this type of interaction helps the story pace to the speed of the user as some people may read the information faster than others having this make sure the slower readers do not miss out any information as it may be displayed to fast or stop the faster reader from getting board as it may be displayed to slow. The pacing of the story is determined by the user. Also, this type of interaction makes sure that the user is staying engaged with the story as they have to move the circle to keep it the story going. Some people may find this annoying as they might not want to pull down every time they want the story to move forward. But I think it is a better option to have the user interact with the story instead of the story just constantly playing as I feel that illustration and story would be rushed and overlooked. 

[scottmccabe-xd]

Wearable tech: Should designers learn UX for wearables?

When doing research for my apple watch idea I came across this article on medium about designing for wearable tech by Sympli. It was a short read but very informative, it talked about that wearable tech is not everyone so don't try to instead design for your specific audience. It talked about how it is harder to design down to smaller devices then up to larger ones. So to design for smaller devices you have to have a minimalistic mindset as you do not have a lot of real estate to work within. Knowing that not all types of apps can work on wearable tech e.g. google maps, and amazon shopping as it is too hard to use these types of apps on a small screen. You use wearable tech to do simple tasks that can be done quickly. So when creating my app I have to use Minimalism to take out things that I do not need so that the user can have the best wearable user experience. 

Link