stadium tour cover image

In The Loop Project

Infographic of the continents

This project we had to create a infographic based on population, but it could be any subject that we wanted. I started of with researching other infographics both online and also at the library with books such as Information is Beautiful and Data Flow. The subject I ended up going with was the opulation of the continents and how they compare to each other.

Skills used

Branding
Illustration
logo design
Type design
layout

Programmes used

Adobe Illustrator
Adobe colour
adobe XD
Adobe fonts

stadium tour cover image

Idea generation

When it came to generating ideas for this project, I firstly looked at similar news sites so I could understand what made them popular and why they worked.

User Research

I wanted to make sure I was able to fully understand the audience I was designing for, I was lucky to be in the demographic I was designing for so I was able to ask my peers for their views on the current state of the NEWS and their consumption of it.

User Persona

The user persona I built was mainly to get in the head of the user and the habits that they were. The extra information can all go towards the design choices.

Style Tile

When picking the fonts I was very aware of the size of the screen and that there would be quite a lot of text so I wanted to make sure that the fonts were clear and not overpowering for the user. I think that these two fonts do a good job at this, making the app really easy to use.

The colour choice was important because I chose the normal black and white to be easier on the users eyes but the using the brighter orange to make

stadium tour cover image

Logo Sketch

When coming up with a logo I really liked the idea of an infinity sign and have that in the middle of the Loop and I like the way that it looked.

stadium tour cover image stadium tour cover image

Designing the Loop

I made these guides as a way to make the design as a accurate as possible and it helped a lot and saved time adjusting the loop to be more accurate.

stadium tour cover image

The rest of the logo

As part of the logo I think that the loop fitted perfectly with the rest of the design and I was able to use the guides for the loop and created the other letters so that it fitted.

The problem with this design was that it was to big to fit a phone screen and for it to still look good. I learned a lot from this and how important is to design for the platform it will be on.

stadium tour cover image stadium tour cover image

Final Logo

After I reconsidered the size of the logo I went back and thought of ways that would be more condensed but still fit the brand I had established.

Using the guide that I used to create the loop as well as the other letters. I was able to stack them on top of each other creating a monogram, with a few adjustments I was able to make it work.

stadium tour cover image

Layout inspiration

before I started sketching I researched different designs for mobile devices to see what users were resonding to and what the latest trends were.

I used these designs as references because I liked the clarity and the simplicity of the designs, no useless elements or design choices.

For more examples of the inspiration I collected click hereto see my tumblr post.

stadium tour cover image stadium tour cover image stadium tour cover image stadium tour cover image

Layout sketches

These are the sketches I did that influenced me when I started to design digitally. These ideas were mostly influenced by the research and inspiration I gathered and by the end of this process I was confident that I had a good basis to build on digitally.

To read more about this and see all of the sketches click hereto see my tumblr post.

stadium tour cover image

User Flow

During the sketching process I was also thinking about the user so that when I knew what the designs were I could make sure that I considered what every screen would look like with the user flow as a guide

This is a simplfied version, there is various screens within these sections.

stadium tour cover image

Icons

I thought that it was a good idea to spend a day or two designing all of the icons so that I was able to have a consistent design style throughout the app.

I really like the icons turned out because of the cosistent art style throughout the icon set.

stadium tour cover image stadium tour cover image stadium tour cover image

Onboarding screens

I wanted there to be an onboarding section so that users could personalise the content they were going to receive so I designed these to show how that process would look.

I am really happy with how this turned out, I wanted it to be simple and straight forward for the user so they could get to their news feed fully personalised to what they want to see.

stadium tour cover image

News feed and menu

With the news feed I wanted it to again be simple so that there wasn't any distractions from the content users want to see.

I wanted to differentiate the menu from the rest of the design and I really like the it has turned out, I think that it adds something fresh for the users while staying within the colour palette.

Randomize feature

The randomize feature I incorporated was just a fun feature that would break-up the constant feed of news.

I designed the feature to animate like a slot machine so that it cycles through the potential categories the user could get.

Whole app walk through

This is a video showing me go through the app and using all of features and the transitions from page to page.

I really like the flow through the app, I think that it is easy for users and isn't hard to access the different features throughout the app.

stadium tour cover image

In The Loop Prototype

Click on the image or hereto use the prototype and experience all of the features yourself.