Close

My role

UI design

Brand design

Tools

Sketch - Photoshop

Mockup - Photoshop

Prototype - Adobe XD

Team

1x UI Designer

1x UX Designer

Project Type

Academic

Website Design

Brand Design


The Process

Learn

Ideate

Sketch

Stylize

Test

Evaluate


About the project

ACN aims to bring young aspirants to basketball players a positive prospect and a chance to be succeeded with their dreams. With this, they select players to have technical training for this purpose to be achieved. My role on this project was to provide a good brand standard from 0 and provide a useful, usable, and desirable interface.



The Problem | Challenge

It's not a re-brand project, so the challenge was to create a product where we could detach from the others competitor and convince people of our value.

How can we build a brand / interface that highlights our value?

Research

The best way to understand the market I was dealing with was to learning about the field and what the competitors were doing to achieve that same goal.

Competitive Analysis

Method 01

ACN isn't a university school, it's a specific school where the target audience are male teenagers like the most schools are. ACN don't have many competitors, but the few that they have, has a powerful brand. The marketing job in their brand was strong and valuable. With this information, I wanted to make clear the advantages they have to show value as the others competitors.





Knowing the target audience

Method 02

To better understand the language of the sport, ux/brand research helped me to collect data that would be necessary not only to build a brand of value but also to know more about the public that consumes this type of sport. Most are young aspiring players who are looking for a way to make their dreams come true through better preparation. High performance and learning are the most important attributes, so I'd like to highlight this.



Findings

These are the insights I collected from the research. My research was 100% focused on branding and the visual aspects from competitors together with the data collected from the UX designer. My mission was to build a meaningful user interface and use this as a way to catch the user's attention.

1#

Big sports brands often use complementary colors that draw the eye's attention. We can also use a neutral color variation in specific cases when we want to show more seriousness.

Result: Draws more attention and attributes identification to the sport.

Big sports brands also like showing off their players on posters. This is a way of promoting the brand through a player and also gives us a feeling of enthusiasm. In our case we will have to use stock images because we do not have photos of the players of our own brand.

Result: Helps to promote the brand and show value.

2#

3#

The images match the brand so that we can convey the feelings cited as our keywords: effort, accomplishment, goal, etc.

Result: It gives more identity to the brand.

Strategy

My strategy was to create a brand that wasn't too obvious but also not too different from I'd expect a brand like this could be. I had some problems with the color palette and finding the perfect images for this project but at the end I think everything came along.

Logo

branding

I didn't want to make such a cliche logo, but I also didn't want to make it look so distant with the sport. I chose complementary colors as most of sport brands, and I wanted to create a strong color pallet to show more dedication as the blue could show (color psychology) and pink, that's not very common, to show more vibrance.





mockup from: https://sportstemplates.net/



Imagery

Getting the feeling

Most of the images are black and white because I wanted to contrast certain parts of the images with filters. I used png tapes for the website images to characterize this feeling as if we were pasting memories on the wall.



Demonstration

high fidelity

The structure of the site has a meaning. When I usually make a website, I think about the key points we need to show on the main page, the information architecture. I did not only the UI but also the coding for this example.

Sketch

The first example represents the first idea I had for this website, but in the end I didn't think it would be the better option because the images, the style, the hierarchy wasn't right. The second option was the one that I chose to create the layout. The hierarchy is more organized, and it makes more sense with what were are trying to accomplish.



Identity

brand

After I created the logo and website, we started to create some assets for social media and branding. We standardize the grunge style and complementary colors, making the brand harmonize with the rest of the assets.



These are the stylescapes I made before I created the website. I like to create the sytlescape first to have a better vision of what I'm doing, and although the first example was really good, the images ended up kinda messy and confusing. The second stylescape is more simple and less confusing. You can notice that I also added AKIRA font to the second one. The font is more bolder and thick, something that I was looking for the logo. I removed Raleway because the details of the font, such as the descender line and the letter arms wasn't matching with the overall style.

LEARNINGS

This was one of the first projects I worked on when I was learning about UI/UX design and Branding, so I had a lot to change through time. I made some mistakes about my choices, and I learned to make all my decisions thinking about the details; the hierarchy, colors, logo, and style segment. The main lesson that this project taught me was to redo my choices even after several attempts. I still a junior, so I'll have a lot more to learn and this was never a problem for me.


©   Stefanie FreitasAll rights reserved.
Design by Stefanie Freitas, Base Code by Templatemonster