Ryan Grant-Wylie

IxD student at Belfast School of Art. Passionate about visual communication. Branding, UX & Web Designer.

[rgrantwylie]

IXD303 + IXD304: Table of Contents

IXD303

ClimaHealth Weather App

UX Research

App Research

Usability Testing

User Feedback

Surveys

Branding & Design

User Journey Map

Brand Guidelines / Style Tile

User Personas

Logo

Icons

Wireframing

Promotional Images

Prototyping

Marvel Prototype

Process

Production

Sketchbook

ClimaHealth - Final Weather App Prototype

Design Sprint

Workshop

Master / Apprentice

Keynote Animation 1

Keynote Animation 2

Oblique Strategies

Final Webpage

Process

Research

All IXD303 Blogs

IXD304

Takahe Project

GitHub Repo

Takahe Semantic Markup

Style Tile

Process

Final Takahe Website

Heroes & Villains

GitHub Repo

Baker Street Semantic Markup

Moodboard

Style Tile

Web Typography Poster

Research

All IXD304 Blogs

Other

Tumblr

Pinterest

GitHub

Instagram

Twitter

[rgrantwylie]

Finding An ‘Extinct’ New Zealand Bird

View the website here

The website is finally finished and is now online to view. It was an interesting experience designing something for a body of work such as the takahe essay. Thinking of an idea for how to present the information was without doubt the biggest challenge throughout the work and learning what you’re doing right, wrong or could do better was valuable.Perhaps in hindsight I could’ve used more imagery and in terms of the styling ensure that everything was naturally aligned, which was the biggest headache when coding out the website; but these are part of the learning curve and things to bear in mind for future projects. Overall I am satisfied with the final piece in terms of the experience I had beforehand and with that in mind I feel I have done well.

[rgrantwylie]

ClimaHealth - Protecting Your Health Ahead of the Weather

View the app here

Now that the app is complete, I put together a section of promotional images to illustrate what the app is about. I am pleased with how the final app turned out. It was a valuable experience to work through an app with the appropriate processes in order to create something that is ultimately something real people would like. Of course it’s not the exact experience of working in a professional role but it does give you an insight into what is at least expected to create an app which is of real value. Of course there could be things I do differently or more efficiently but overall I am satisfied with how I done with this project.

[rgrantwylie]

Takahe Website: Responsiveness

The problem when designing a horizontal website is how it will work on smaller screens. Luckily this website wasn’t so wacky that it would be rendered useless on such devices. Media queries alone didn’t solve this. Removing z-index’s and working with margins were key to getting this to work on smaller screens. This was the last big issue to be resolved on the website and I’m glad it was achievable.

[rgrantwylie]

Weather App: Screen Icon

As you’ll have noticed on the screens - the screen icons. I felt the first one worked best for a ‘hub’ section. The symptom tracker felt like a target, or some sort of progress icon. The sun for the forecast screen is self-explanatory; the threat tracker has a warning sign and the profile one consists of a person icon. Having visual things look as universally recognisable is critical for having an effective design.

[rgrantwylie]

Weather App: Profile Screen

The last screen is of course the profile section. On this here you would be able to edit your details, as well as your medical ones and also your preferences. You’ll also be able to log out via this section as well. A part at the end also shows what it would be like to just sign in rather than setting up an account.

[rgrantwylie]

Weather App: Threat Tracker

The purpose for this screen is to be able to see visually how big of an issue certain environmental elements could be to your health. So in the instance of hay fever, you could visually see how much pollen levels will rise or fall throughout the week.

[rgrantwylie]

Weather App: Forecast Screen

For the weather forecast I wanted to keep it as simple as possible. It includes a 7-day forecast with basic weather and temperature information. I’m having doubts about the visibility of the clouds on the pages however, perhaps I could alter those to make it easier to see.

[rgrantwylie]

Weather App: Symptom Tracker Screen

The next section of the weather app is to track your health throughout the month. It shows a calendar with some progress bars underneath. I envisage that you would select edit and put down a new date and how you’ve been feeling.

[rgrantwylie]

Weather App: Hub Screen

At this stage you’ll have finally made it to the main stage of the app, when you can now view all the relevant information and features available to you to help improve the quality of your life. For some reason the hub screen starts at the bottom, I’m not quite sure why, will have to see if there’s a solution to that.

[rgrantwylie]

Weather App: Onboarding Screens

Once your account has been set up, you’ll then be directed to the onboarding screens, which illustrates the three main features of the app; which are about putting in your medical details, receiving medical advice and tracking your progress.

[rgrantwylie]

Weather App: Set Up Screen

When you’re starting off with an app you’ll more than likely need to create an account, but for the purpose of this one, it’s rather essential. In the set up page you’ll put down basic information plus relevant ones that’ll be related to your health.

[rgrantwylie]

Weather App: New Start Up Screen

Having worked through the user journey map, user personas and style tile, I was finally ready to start designing the screens for the weather app.

I wanted the start up to look as clean as possible and created a simple transition which sets the tone off nicely.

After working with Sketch to create the original design, I decided to go with InVision Studio as I felt it was more convenient for what I needed to be done. I’ll go through the other pages next

[rgrantwylie]

Takahe Website: Image

I feel similar about this as I do with the map, to an extent. It sticks out a little, and plus it’s the fact it’s the only picture. I made it look like it was hanging down to try and keep it within the forest-styled theme. I knew it was important to have a picture in there somewhere and then felt like the appropriate time to do so. Perhaps I could’ve illustrated something out but I feel it gives a bit of a visual break. I altered the file size slightly to ensure it doesn’t look particularly pixelated.

[rgrantwylie]

Takahe Website: Performance Optimisation

Continuing with the performance optimisation theme. When I created the backgrounds for the takahe website, I used SVG as the file type, as the quality remains unchanged regardless of size, so I took advantage of that and created them in a 25x25px Illustrator file. This is massively different to doing them both in one the size of 1920x1080px, and as a result enjoyed a huge size decrease within the files, and doesn’t hinder the performance of the website. I would need to do a similar task (not so seismic in file resolution difference) to maintain the effect.

[rgrantwylie]

Grunt is a great option for concatenating elements together. It automates the work that you would have to repetitively and tiresomely do when working with sprites. All these features should be taken advantage of and will help you in the long run. Whilst it’s not necessarily a necessity for my takahe website, it is something to consider for my own personal one.

[rgrantwylie]

This article has been revised and re-written several times since its very first publication in 2007, to keep the information current. The most recent revision was done by Flip Stewart in January 2015. What are CSS Sprites? Spoiler alert: they aren't fairies that write your stylesheets for you. I wish. In short: CSS

This is another good technique for trying to optimise the performance of your site. The purpose of this is to chunk images into a file and make them retrievable in a quicker way. By using CSS, this can limit the amount of work HTTP requests would have to make. This also makes up for the fact that the file sizes may be slightly higher, but this is a more effective way of organisation. You can use software such as Grunt, which I will show next.