PLATFORM
3 weeks
Responsive
DURATION

A content eco-system

OURS TO
BEAR

A UX Design Project

Ours To Bear is the Social Enterprise of the non-profit organization known as “The Remix Project”. They educate the students through workshops to teach them professional skills to be used in the industry. At the same time, they use these opportunities to connect big brands with these youth in order to create various brand recognition projects.

A Note To Self

Clients sometimes do not know much about their own identity, that is why they come to us, but through the process of their exploration, they expand the spectrum of our knowledge to an extremely vast amount. There can not be anything more rewarding than this.

BRIEF

“A website that captures, the unique branding of Ours To Bear. As well, as interactively and skillfully displaying their case studies.”

THE PROBLEM

The initial brief was all over the place: a talent agency that wanted to showcase its portfolio but also wanted to voice their political views, in bold letters, on the same page. Furthermore, our client wanted an endless stream of mixed content, all a single page, which we knew would not sit well with the limited amount of data that they had. Last, the website is not meant to attract new clients, but to provide information on who OTB is for those already involved with them.

KEY REQUIREMENTS

GOAL

A personal portfolio
A presentation tool

CONTENT

Video on Landing
Political Commentary

LAYOUT

Endless Stream
All-on-One Page

DESIGN

Visual Portfolio
Alive & Mysterious

PERSONA

We looked deep into each persona attached with OTB (Ours To Bear), trying to find out its traits. We came up with two main personas.

The other persona, the clients of OTB, was primarily based on the Brands but it very heavily linked to another entity, the millennials . We had to understand the relationship between the two- what millennials look for when choosing a brand for themselves, and what successful brands do to capture the loyalty of millennials. Since millennials were not directly involved with the OTB website, instead of keeping them as a separate persona, we made kept them as a focal point of the brand persona.

Confident in our understanding of the target audience, we headed into the planning phase, hoping that everything would be easier and straightforward from here onwards. Little did we know that things were going to get far murkier.

Lo-Fi's - A FAILURE

We started with a standard process, creating the Lo-Fi wireframes, however, everything we made failed to get us anywhere near the desired result, everything was too generic and failed to give any purpose or personality to our designs. The biggest problem we were facing was to fit all the different type of content into one single page, making them all as important and visible as the rest and make it all look seamless. We were quickly running out of time, so we decided to do something out of the ordinary.

CRAZY 8’s

“A robust layout sketching exercisse to quickly push out ordinary ideas & generate more creative solutions to problem.”

We broke out of the system to create something unusual: the crazy 8s exercise.

8

minutes

sketches

24

Suddenly, we had a lot to work with: we compared all our ideas, mixed and matched the best ones to come up with more ideas. We seemed to have found some direction but it was still disjointed. This is where the revelation came.

BIG Lo-Fi

"A website, one-page-only, with each scroll a unique experience showcasing an entirely different section, a continuous living thing, a content eco-system."

We grabbed an (x-size) paper and drew the whole website on it. We divided the sheet into sections and created a big Lo-Fi of the whole website on the single page, mixing up the sections, one after the other, we were able to create a random and endless streaming experience where a section could be anything ranging from a project page, text banner page or a random image gallery. We knew we had it right this time!

Mid-Fi’s - A FAILURE

By this time, we had discovered the right layout of the website, but our struggles kept on coming. It was the same cycle all over again: we went back to the standard process, creating Mid-Fi wireframes, but it failed on us once again. Everything we made, lacked the personality required for the website. This time, however, we did not waste much time and looked for a different approach right away.

HYBRID-Fi's

“A combination of Mid & Hi-Fi systems in order to  create content-based, purposeful layouts for the content heavy nature of the project.”

FAILURE DIAGNOSIS

The reason for our repeated failure was quite evident:

Greyed-out boxes lacked the required personality

Direct jump to Hi-Fi’s could result in usability issues

Mid-Fi's

Hi-Fi's

To keep a balance, we decided to fuse both stages, creating a hybrid process of mid & hi-fidelity wireframing. We used actual, and sometimes dummy, images while creating the wireframes, which gave the sense of the personality to each section. We worked very closely with our throughout this process. This personality-driven approach also helped us in generating new ideas on the go and it was astonishing to see how quickly we bundled up the complete website with this process, made up for all the time lost before.

A TV BOX

Very Late in the project our client asked us to make a change that could have forced us to redesign the whole layout all-over again.

Throughout the project, we held frequent meetings with our client to be sure if we were on the same page. At the end of the second last week of the project, however, we had a very important meeting where the client added a new requirement for the look of the project. They wanted to have the website as a box of TV where each section would act as a channel, so it was like the user switching through the channels with each scroll of the page. It was supposedly a huge change, considering that we were nearing the end of the project, however, this requirement brought anything but more confidence to us because we had already envisioned & designed our layouts in the same style. It was confirmed now, we had definitely nailed it!

FINAL PROTOTYPE VIDEO

FINAL DESIGNS

OUR ACHIEVEMENTS

MYSTERIOUS IDENTITY

Our client wanted to keep the website mysterious for outside users, they did not want to give away too much information. So, in order to keep the mysterious vibes, we introduced a ‘more information’ button with an unorthodox design and hid all the detailed textual information behind it, only to be visible if clicked on that button.

NAVIGATION SYSTEM

The requirement of having everything on one page presented us with our next challenge, creating a smooth navigation system that was easy to understand and use. The biggest challenge was to accommodate the inner pages that contained descriptive text or preview of image galleries for each section. To cope with the situation effectively, we opted to use accordions to reveal the textual descriptions of each project. To preview images from the galleries, however, we found modals more visually appealing and useful.

NEEDLE IN THE HAYSTACK!

Clients do not always know what’s best for themselves. The main purpose of the website was to act as a portfolio tool, especially during meetings with potential clients, to show them relevant projects. During our testing sessions, we realized that with the current flow, finding relevant projects would start becoming more tedious in the future if the number of projects would grow a certain point. So, contrary to our client’s requirement of having just a single page website, we suggested having another page, a site map, that would make it easier to locate a specific project. To make the idea gel into the theme of the site, we turned the sitemap into a thumbnail-based gallery view, which also made it easier to visually find the required project. Luckily, we were able to convince our client and add it to the project.

we are especially proud of that one page!

KEY SOLUTIONS

GOAL

+ A Personal Portfolio
Showcasing projects with loud and visual layout

+ A Tool of Presentation
Presentation-friendly, concise, visual, and creative, layouts

CONTENT

+ Video on Landing
Full-screen video to kick-off the ‘OTB’ experience

+ Political Commentary
Independant sections with bold letters to give voice to their opinions

LAYOUT

Endless Stream
Full-screen sections to make long stream with limited data

All-on-One Page
Randomized content for engaging browsing experience

DESIGN

Visual Portfolio
Gallery-view to showcase the content of each project

Alive & Mysterious
Dynamic transitions to bring designs to life

jameelnasir@gmail.com