Mood Board

Originally when making concepts for my magazine I was going to go with the name Vernacular and a more white/gold colour scheme.

App Concept

For my original onboarding I used a very rough concept of how I might want pages to flow. I was still using the name vernacular and the white/gold colour scheme here.

Rough Wireframe

Below is my rough wireframe for part of the app.

New Branding

For the new branding the name changed to Bottled North with a darker moodier colour scheme. Below are some images from the Brand guide I created that show case the brand a bit more.

Component Library

In my component library I was still learning how to create all the assets needed for an app. Thus it was quite rough around the edges, I used my new brand colours, logos and fonts to keep the brand consistent. I did use a similar font to brand guide but altered it slightly because I was using it through adobe fonts and it was not easily accessible on figma.

App Design Overview

The prototype is extremely bare bones, throughout this section I will go through my design decisions and where I went wrong.

I decided to go fairly minimalist for my app as I had yet to finish my magazine and my brand was meant to be fairly posh.

My Login was not working in the Prototype and needed to be adjusted.

The sign up would benefit from the option to fill text.

In this section I would fix the images to be vector based so they are not pixelated, make the interests button clickable and add a visual element to the carousel to indicate where you are.

Below: This section was missing some details that would have made it more believable and needed some better formatting. First off I would add a home button to the bottom to allow user to go to the home page, I would alter the sign up card to be more inline with my brand, I would move the nickname portion over and add some flourishes to the bio. I would also make the chosen interests clickable.

I would also add a secondary screen clickable from the account page with more payment info, card details etc. Below are the beginnings to improvements within figma.

Here I would make the article picture much bigger, alter the bottom Nav, and use a real article from my magazine in the app. Now that Im done my magazine, theres a lot more detail I would add to the app. Below I will include some pictures of my spreads.

I would have included this image with some similar text as I feel like that would be more impactful. The image I picked feels a bit more like a placeholder image.

I would also have liked to include a spread more similar to the feel of this spread as I think it gives a better sense of the personality of the springmill.

Im not sure it would be possible to do on a phone screen but it would be fun to make the beers on this spread clickable and have the information pop up.

I need to change the bookmark on the cards to be more legible, make the notification more polished.

Below, is some visual research into how to make my cards and profiles better going forward.

Conclusion

Bottled North is a very distinct brand, the app needs work to be fully functional but the foundation is there. Throughout the case study I talk about my plans for the improvement of the app for my portfolio. The app should better reflect the magazine, and the prototype portion has significant room for improvement.