Challenge: Design a responsive online platform for a magazine, newspaper or blog directed to meet the needs and goals of one of the presented User Personas.

My Role: Research, Ideation Sketching, Wireframing, Prototyping and UI.
‍
My Client: LAN PARTY (fictional)
‍
Timeline: 3 weeks

Stage 1. Discovery

User Persona

For this particular challenge, we were provided with a fictional user persona for the one we had to design a tailored solution:

Sports bro Eric is 21 year old college dropout that loves Esports, he is disperse and wants to-the-point information or else he will get bored and stop reading.

Business / Competitor Analysis and Blue Ocean
‍
We already knew who our user's were, their needs and their pain points as well; Now it was time to review the market and check the competitors: what they offer, what segment do they serve, etc.

To do this we proceed to do business research on each one; Then we took our findings and compare our rivals on criteria based on brand, features offered and value preposition to users. With this done we were able to create a Market Positioning Map and find our blue ocean (Gap in the market were we can take a competitive edge)

This market position is based on two axes, Type of content: Specialized or broad, and tone of content: serious or fun.
‍
As shown on the map, we placed our editorial site aligned as fun but specialized content. Since our competitors sit on varying ends of these spectrums, we believe that this would set us apart and give us an advantage in an unexplored market.

Stage 2. Define

Now that we were feeling comfortable with our research, it was time to go and define our problem. We began this process by creating some “how might we statements" and then our "Users Journey" based on the insights we received and our market research.

with this done we were able to recognize our main Problem Statement. this is important because they define the project’s main objective and the challenge to be solved:

Stage 3. Ideation

Now with the problem defined, it was finally time to ideate our possible solution.

Moscow Method

After a brainstorming possible solutions, We used MoSCoW Method in order to understand what features are most important and what features are not. This helps us as designers understand what comes first and what are our priorities at the moment of ideating.

MVP

After that we proceeded to do an MVP that helps us sumarize what our product does and how it will help Sports Bro Eric to address his paint points.

Userflow

A user flow is a visual representation of the many avenues that can be taken when using an app or website in order to fulfill a task.
We do this to empathize with users and understand their journey through our solution.

Sketches

Now that we have a solid concept of what was needed and how could we provide it, it was finally time to start sketching our solution:

Mid-Fidelity Wireframes

With the mid-fidelity wireframe we got a good sense of how to structure our information architecture and how should we develop our polish user interface.

Stage 4. User Interface

Visual Competitor Analisys

To start the UI stage, we did a visual competitive analysis of two of our competitors. We broke down their colors, typography, and UI elements; the items that establish their branding/ mood.

We do this to understand the elements that compose our competitors websites and what they have in common and what they don't.

Brand Attributes

We then listed the attributes that we want associated with our E-Sports Brand and ultimately a name for the editorial: "LAN PARTY".

Mood-Board

Now that we had our brand attributes it was time to create a mood board, we put it together based on these attributes and what we wanted the overall aesthetic to be . We went for a combination of steampunk and 80’s nostalgia; Using neon and bright colours on top of a dark thematic.

Desirability Testing

To confirm that the mood-board was projecting the desired branding we established on “branding attributes”, we went ahead and tested it on 5 users. The test consisted of the following: we showed the mood-board for 5 seconds and then asked them to select the best 5 words that described what they saw on a chart that contained a total of 42 words.

Satisfied with our results, we now knew that our branding was pointed in the right direction and that we could, finally, start designing our User Interface.

Style Tile

For our Style tile we took what we already established: the combination of steampunk and 80’s nostalgia. And added elements from a new video game call “Cyberpunk 2077”, both “Blade Runner” movies and a netflix series called “Altered Carbon” We used blue’s and pinks since they complement each other and are common colors in neon/ 80’s themes. And then to lean in to a more cyberpunk feel the typography we utilized was Blender Pro.

High-Fidelity Wireframes

For our Hi-Fi Wireframes we went ahead and designed for desktop, tablet and mobile.

Stage 5. Prototype

The prototype was developed for desktop and we will love if you could test it out:

Here

Next Steps

- For next steps we want to user test our high-Fi prototypes to be able to correct any issues our prospect user may have navigating our solution
‍
- We would also like to explore our site to include information on competitive players, live streams and even tackle features we did not have time to do in Our MOSCOW chart.

EXTRA

As an extra deliverable, we designed the Hi-Fi to be responsive in Ultra-Wide.
‍
For Ultra-Wide, we came up with the concept that the articles and news would be displayed all on one page, and navigation would be done using WASD on your keyboard:

If you’d like to see the prototype for ultra-wide you can check it out here.

A special thank you to my partner in this project: Robert Zamora and thank you for reading!