Scope_thumbnail_1180x757_190130.png

Scope - Brand Identity and Web Design

Scope - Brand Identity

Mockup_scope.png

Summary

When: Dec. 2017 - Jan. 2018
Where: School (Yrgo)
Software: Figma, Wordpress, Illustrator, InDesign, After Effects and Photoshop
Duration: 6 weeks

The task

A fellow student and I got the opportunity to work with the startup company Scope. Scope develops a tool for online gamers to analyze their skills and match them with other players. They asked us to create a brand identity for them and to create a responsive design for their webpage. We agreed to develop a logo, social media banners, posters, business cards, a website design and to implement their new landing page using WordPress.

 
SCOPE, logo portfolio@4x.png

The process

We got two things from Scope initially; information about their users they had collected and keywords that they wanted us to work with - original, strong, enthusiastic, professional, relaxed attitude and fun while serious. We created loose personas based on their data. We also analyzed businesses similar to Scope, summarizing what we liked and disliked about their identities. We incrementally developed a design in Figma, starting with simple wireframes and then developing alternative designs. Scope was involved throughout the process, giving us feedback on our designs and adding to our understanding of what they are looking for.

 
scope_persona.png
We started by sketching up the layout using the graybox technique. Then we made the pixel perfect version without adding any colors yet.

We started by sketching up the layout using the graybox technique. Then we made the pixel perfect version without adding any colors yet.

 

The design

This is the final design. We went with a dark style and strong contrasting colors. The design is meant to communicate gaming immediately and be similar to other gaming services while standing out with the use of the stronger contrasting colors and soft font.

There are many other companies with the same name, so it was important to us to distinguish the logo from these and clearly communicate that we are a gaming company.

The web design is responsive and meant to work equally well on a desktop as a phone – we wanted the user to be comfortable using the phone version both while away from their computer as well as in parallel while gaming. We used custom assets for more distinguishing parts of the design like the background image. The icons are generic free flat icons, as we reasoned these would be easy to expand upon for Scope one we left the project.

Scopes full webpage is a social network with rich features. As such we were only able to design the main pages, meaning for them to be used as a framework easy to expand to all pages. The landing page is working in WordPress.

 
The final design, here seen in the landing page, that we also built in Wordpress.

The final design, here seen in the landing page, that we also built in Wordpress.

This is the sign up page for manager.

This is the sign up page for manager.

As you log in as manager, this is the main page.

As you log in as manager, this is the main page.

When you’re logged in as player, this is the main page, with less functions than the manager page.

When you’re logged in as player, this is the main page, with less functions than the manager page.

Scope_mobile
All the same pages in mobile version. The homepage to the right. And to the left: sign up for manager, manager logged in, manager menu, player logged in.

All the same pages in mobile version. The homepage to the right. And to the left: sign up for manager, manager logged in, manager menu, player logged in.

 

Scope liked it

We had a great collaboration with Scope and they were super happy with the design. At the time of ending the project we agreed for them to buy the design from us.

 
Business cards

Business cards

Poster template

Poster template

Social media banner

Social media banner

Facebook avatar

Facebook avatar

 

Case demo

I decided to summarize the project with Scope after finishing the project. I made a case film presenting the design, even adding some suggested animations to the design.