Branding


The Berakael Group

Creating a long-lasting, future defining identity for a growing brand

Berakael is a growing real estate, construction, investment and properties management company based in Nigeria with no prior web exposure. As a personal study on Visual Design, Interaction Design and Team Collaboration, I, alongside Chibuzo Uguru, undertook the challenge to transform this company, from a small scale family construction company to Africa’s leading architectural and real-estate business by re-imagining it as a global brand. We then proposed it to the company's management. We envisioned a long lasting, future-defining identity for this Lagos-based company; a future filled with pioneering sustainable practices, environmental consciousness, and rigorous, competitive business practices.

The Problem

How do you design a brand that conveys Berakael’s core value of sustainable housing, while also making it marketable, trustworthy and attractive to potential customers?

The Objectives

Design a brand guideline and a unique responsive website that provides site visitors with information about the business, builds trust and rapport with potential customers and provides a featured selection of case studies that outlines work done for past clients.

Ideation

The design process began by identifying the core values of the business; it’s services, functions and how we intend to convey these visually to potential customers. We had a few Brainstorming sessions to help guide us and lay out a clear vision for the design.
Some Questions we asked were:
What services does Berakael offer?
What makes the company unique?
What are the Big Ideas (Slogan)
Who are the customers?


Logo

For the design of the Logo, we sought inspiration from nature, Water droplets and leaves. As the company places a huge emphasis on sustainability and environmental consciousness, we wanted this also to be conveyed across in the visual language of each artifact.

Wireframes

Before we began creating visual mockups for the website, we brainstormed different layouts for the website. We wanted to create a unique site that was still simple enough to navigate and effective enough to get the intended information across. To this end, we made wireframes to clarify the functionality of the site and also to determine how much space is allocated to a given item and where each item is positioned.

Visual Design

Ah, my favorite part! Based on the wireframes we created, I began creating the mockups for the website. My goals were to introduce the company to potential customers in an easy way using an effective visual hierarchy that led the customer to the information they were seeking with ease.

Reflections & Outcomes

I thoroughly enjoyed the design process from this project, right from the conceptualization phase. Working with Chibuzo was a pleasure as we bounced around potential ideas, deciding which ones fit with Berakael’s overall vision.

A few takeaways from this project:

1) Branding is a balancing act between a company’s values and the customers needs. The Designer’s job is to articulate those values in a way that communicates to the customers clearly and directly the vision of the company and the value it can offer.

2) We live in a branded world. Good branding will steer customers towards the companies that they perceive would provide the most value to them, and this perception of value derives heavily from how strong a brand is.

3) Teamwork makes the dream work!

Top


UI/UX Design


Playtime for SOCARP

Playtime App: Making Research Data collection easier and more delightful

The SOCARP (System for Observing Children’s Activity and Relationships during Play ) researchers needed a more streamlined process to collect, store, analyse and manage their research data. Recording behavioural data of elementary school children actively engaged in play during recess on several sheets of paper was tedious enough; manually transferring each record to an Excel database was time-consuming and not a very efficient process. I was hired by the Michael Morton School Yard team in conjunction with the Dornsife School of Public Health of Drexel University to design and manage the development of a modern solution that streamlined the data collection process and made it much easier to retrieve and analyse the collected Data.

The Problem

Recording time sensitive data on paper was tedious and often led to approximations and errors.

Records from several members of the team had to be manually translated and transferred line by line onto an Excel spreadsheet where it is then analysed. This process was neither optimal nor efficient.

The Objective

Design a new solution to streamline the data collection and retrieval process, making it easier and more intuitive to record Research data for the Michael Morton Schoolyard team.

Persona Development and Stakeholder Interviews

To understand users' needs, one must first understand their behaviour patterns. Creating Personas helped me make some assumptions about the user before actually interviewing them. I assumed that they would be people who wanted to save time and spend it on something more worthwhile, or simply just people who were not happy with the paper clutter that often turned their valuable research process into a mere mundane activity.

During the stakeholder interviews and initial meetings, many of my suggestions for what the features of the final solution were based on what I had learned from these prior assumptions. For example, I speculated that entering lots of data on pieces of paper in 10 seconds, while also keeping track of the time elapsed may require too much cognitive effort, and this assumption was validated during my interviews with the users. So I determined that whatever solution I designed needed to keep track of the time elapsed and automatically move to the next section, thereby, enabling the researchers to focus on the actual task at hand which is data collection.

Iterations on System Design

I considered possible system designs to determine the best type of solution and pitched each of the ideas to the Stakeholders. As we discussed these possible system designs, we discussed the bottlenecks of each solution, judging them by their affordability and ease of use.

A connected, real-time
intranet system


Data collection in real-time is unnecessary, and developing this specialized system may be too expensive.

An IOS mobile application with a derived
mobile admin application


Cost effective, however, mobile screens for a mobile admin are too small for displaying, exporting or analysing large data sets.

An IOS mobile application with
a Web Based Admin


Cost effective: a web app designed for a larger screen provides the best viewing experience for the data.

Sketching Ideas

Once I had a clear direction on what platform I was designing for, I began sketching the app’s pages, modelling them after the already established SOCARP process.

Card-centric Interface

Because this app features several pages packed with much information, I designed the interface around a card-centric approach, allowing the user to break up information by focusing on very little per-time.

LOGIN Only Users who have been granted access by the admin can log in on this page.
SELECT SCHOOL The user can select from the list of Schools registered on the database by the Admin.
DASHBOARD – HOME The main dashboard of the app.
PAST SESSIONS On this page, the user can view all the past sessions which have been saved locally on the device. They can also commit (send) data to the database.
RECORD BUTTON User taps the record button as soon as the target child enters the playground.
RECORD This is the main data collection page. Users observe the target child and select what action corresponds directly to what they are doing at the time.
Prototyping for early feedback

Throughout the design process, I created several iterations of the clickable prototype for testing to obtain feedback from the users. Presenting static designs may be suitable in certain cases, but for us, having a clickable prototype helped the stakeholders articulate exactly how the app was or was not addressing their needs.

Interaction Design

I also prototyped micro-interactions for the Record page and tested out different actions (tap, drag and drop) to determine which was quickest and easiest for the user.

Admin Web Application

The admin web application serves as the central data repository for all the collected data on individual user's smartphones. Collected data is committed (sent) to the database and can be viewed, sorted, organized and exported from the Admin Web App.

LOGIN

The login screen prompts the Admin for the password.

SELECT SCHOOL

The Admin choses which school to view.

DASHBOARD

Similar in style to the dashboard of the mobile app, this screen provides a snapshot
of the data contained in this school’s records.

DATA

All the records that have been committed to each school’s database are displayed on the Data tab.
Data can be sorted and expanded for a more detailed view.

DATA – EXPANDED

The expanded record shows a more in-depth view of each Child’s activity per interval.

EXPORT

Data can be exported in Either CSV or Excel format to be sorted and analysed.

Hiring a Developer

Once the design process was underway, I began searching for a developer to execute my design vision properly. I began by locally advertising with fliers and posters but the search was not fruitful. I decided to take the search online and advertised on Freelancer, Thumbtack, Toptal and Upwork.

I interviewed several candidates and companies, but they were either charging too much or offering sub-par services. I eventually found a Freelancer on Upwork that agreed to do the job within budget and within our time constraints. His Portfolio was also really impressive.

The project is currently under development, and I provided documentation, technical requirements, flow diagrams as well as Retina-ready assets to ensure a speedy development.

Reflections & Outcomes

The Application is currently in development phase.

I was able to design a solution that cut down the data collection process from more than seven event steps to 3. I believe that this will boost the efficiency of the research team and increase the accuracy of the collected data.

A few takeaways from this project:

1) User experience design is a very fluid but structured process. The structured process demands a certain level of discipline from the designer, in ensuring that no stone, in the form of users’ needs are left unturned. The fluidity of the process still allows the Designer to be as creative as they need to be in executing his design vision.

2) Establishing and collecting requirements as early as possible from the users and stakeholders is crucial. Besides allowing the development process to go on smoothly, it also acts as a contractual agreement between the Designer and the Stakeholders, ensuring that none of the user’s needs are neglected but also making sure that the development process is not constantly being interrupted by the request for additional features from Stakeholders.

3) Design feels much more tangible and valuable when It is done to solve a real identifiable problem.



Designing


The Encore App

Designing fitting visuals for the all -in-one social media app

Encore is a personal project that was born out of a need and necessitated by an opportunity I identified. As a concert lover and fan of live performances, I wondered to myself, what if a platform existed where every facet of the concert experience, from purchasing a ticket to the actual show could be shared? What if concert photographers could gain exposure for their work, without having to worry about licencing or copyright laws? What if a platform existed where Artistes could reach out to the fans directly with their products, albums, ticket sales, in a way that felt real and personal, while also generating value for the fans, as they can be plugged into a community of like-minded people, connected through similar interests. Encore is an idea in motion, and I decided to begin to define a visual style and pleasant user experience for it.

The Problem

The most popular Social Networks, Facebook, Twitter Instagram and Snapchat all have their purposes and areas in which they excel. However, I am not aware of any that caters exclusively to the celebrity -content creator/ fan - consumer relationship. Take this scenario, for example:
Adele has a show in New York on Friday; she posts an update on Facebook and Twitter, sells tickets on Ticketmaster. On the day of the show, fans upload mobile phone videos to Snapchat of her performance, videos she never gets to see. A fan gets a fresh shot of her singing her heavingly lungs away, slaps a black and white filter on it, tags Adele, and posts it on Instagram. Adele sees this picture, along with 500 others, but she likes this shot because it "captures the moment." She uses the Repost app and shares it with her followers. The only problem is she forgets to credit the fan that posted the original picture :(.
So many social networks involved in the mix, what if all we needed was one?

The Objectives

In an attempt to wrap my head around this problem, some of the questions I had to ask myself were:
How do you re-imagine this process as a social endeavour in which both parties, both fan, and celebrity are fully engaged in generating value for each other?
What does the fan value? Acknowledgement? Being the first in line for updates from their favorite artiste, sharing their concert experience with friends and followers?
What do the celebrities, entertainers, artists value? Fan loyalty? Selling and tracking tickets sales in-app? Engaging with fans?
Answering these questions became important in defining the features for the app.

Sketching Ideas

To begin the process, I sketched the layout for some of the main screens of the app. The sketches helped me plan and decide some of the most important features that I envisioned the app to have.

Wireframes and Appflow

I transformed the sketches I made into wireframes to better understand the relationship between the App’s content and functionality. I found this process to be really vital as it helped me prioritize the feature of the app and decide which ones were suitable for the main Navigation and which ones weren’t. This judgement is based on my expereince and vision for the app, and may eventually, almost undoubtedly change after user-testing.

Defining a Visual Style

To begin the process, I sketched the layout for some of the main screens of the app. The sketches helped me plan and decide some of the most important features that I envisioned the app to have.

LOGIN On the Login screen, the user can swipe to toggle between sign in and sign up.
HOME The user is presented with a photo feed, where they can see, like and comment on followers photos.
PHOTO EXPANDED Pictures can be seen at a higher resolution when they are selected.
EXPLORE The Explore tab features trending shows and popular shots
SHOWS On this tab, the user can track their shows, receive live updates from artists and browse and purchase tickets for shows around their area.
SHOWS – EXPANDED Tapping any of the shows brings up more details.
Website Mockup

Based on the established brand style, I created a mockup for the website that showcases the product as well as its features.

Reflections & Outcomes

I hope to continue working on this as a side project.

A few takeaways from this project:

1) Designing for a user I do not yet know and assuming their needs is an easy route to failure. Because this began as a personal project which I'm still refining, down the line, User research, competitive analysis, and market validation would need to be conducted to ensure that this product is marketable.

2) Preliminary Sketches and Wireframes can be a good, viable idea sorting mechanism. In my head, it may seem like a splendid idea, but when sketched out on paper, the value may either be reinforced or diminished.

Top


UI design & Branding


Chibuzo Uguru Website

Designing a simple and elegant website and identity for a budding web-developer.

Chibuzo Uguru is a young web-developer based in Edmonton, Alberta. I helped her design the interface for her website which she then coded into a fully functional site. I also created a simple, yet effective brand for her web-design practice.

Top


Game Design


And I Wrote

Developing a videogame to remediate current interactive anti-stigma inititatives of Schizophrenia

For my thesis, I’m designing and developing a video game to raise awareness for Schizophrenia. A more detailed case study would be posted as soon as development and playtesting is complete, but for now, You can view some of the screenshots below or read more about the thesis here

Top