Case Study: Mobile and Desktop Responsive Web UI Design for Chingari

Our fourth project at RED Academy was a community partner project with Chingari, a non-profit organization providing resources to help immigrant women in areas such as legal support and business skills. This was a joint project with two UX designers Hatley McMicking and Gurvi Chandi.

BRIEF

As Chingari did not yet have a website nor a strong brand identity, the task was to create its brand as well as a mobile and desktop responsive website to showcase the organization. As the lead UI designer, I was in charge of logo design, as well as executing the art direction for the visuals of the website.

PROCESS

During the initial client kickoff, we were able to learn more about Chingari’s mission and business goals — namely to provide practical resources, support, and empower women so that they can become self-sufficient and independant. In terms of art direction, the client had a very strong affinity towards bright, vibrant colours that would connote feelings of enthusiasm, warmth, and resilience.

DESIGN INCEPTION

Based on the mission and vision of Chingari, we determined that the mood we would want users to feel while interacting with the Chingari brand would be as follows: Empowered, Bold, Inspired, Supported, Proactive, Energized, Safe, Lively, Esteemed, Fresh, and Motivated.

MOOD BOARD

From here, I put together the following Mood Board.

The left side of the mood board represents the color palette for this project which is predominantly blue and orange. This is largely inspired by the scarf pictured top left, which the client brought in and commented on the appeal of its vibrant colours.

From a colour psychology standpoint, turquoise blue and orange are fitting colours since orange usually represents enthusiasm, excitement, and warmth, where as blue represents trust and reliability. These are the moods that we would want the users to feel.

The middle and right side of the mood board represents the overarching themes of the art direction e.g. hope, resilience, passion, freedom and empowerment.

LOGO DESIGN

Chingari is the Urdu word for “spark” or to “ignite”. The existing Chingari logo looked like this, a literal flame to represent its name.

Upon feedback from other people, many commented that they liked the flame representation. However, several people commented that the current logo reminded them of Mozilla firefox — most likely related to the tail-like shape and color gradient. From this feedback, I sketched out some new designs for the logo. I wanted to move away from the literal representation of the flame to a more symbolic one.

There are the versions I sketched out:

With colour and text applied, these were the final versions I presented to the client:

Most users liked the version in the middle — they felt the flame shape was best represnted. Also, some commented that the shape reminded them of a wing — which was a positive element because it could represent the aspect of Chingari giving “wings” to women to help escape their current situation. I chose a solid orange colour (instead of using a gradient) to make it more versatile (i.e. if you were to utilise the logo on print mediums).

The client decided the final version of the logo to be the middle one — as the flame was more bounding and “full”.

STYLE GUIDE

The mood board was then extracted into a style guide.

I chose a simple Muli and Lora typeface pairing to use for the website — the combination is legible and friendly to the viewer. In terms of the imagery used in the website, I wanted to incorporate strong captivating imagery to draw the user’s attention. Therefore, the other elements of the website e.g. buttons and navigation bars are kept simple in order to not distract the users from the imagery.

In terms of the wireframes, I was able to participate in the UX design studio when it came to paper prototyping, and was able to give my input for user-centric website from a UI standpoint. Once I received the wireframes from the UX team, I applied the UI elements based on the style guide:

Desktop High Fidelity Prototype
Mobile High-Fidelity Prototype

Interact with the prototype here:

DESKTOP

MOBILE

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.