The Challenge

I was tasked with the client brief (Business Information, Features&Content and Client Preferences).
My main goal was to take all the information and present a user interface which is prototyped along with the responsive design for desktop, tablet and mobile versions. 

1

Business information

MessageMail is a centre location in which all the DM's are presented to the user, similar to e-mail, connecting various social media accounts and responding to all of them on the user interface.

2

Features & content

Designing the landing page and the "Create an account" page combining the idea of centralisation and direct messages

3

Client preferences

The key message the company wants to share is about being fun and not too serious.

There were no preference regarding themes

Tools

Figma

Timeline

2 months

Role

User Interface

designer

User Interface

designer

Sketches

I started the project by sketching what could be the possible layout, this allowed me to a quick concept generation before moving to the Low-fidelity wireframe.

Low fidelity wireframe

Here you can see the transition from the sketch phase to low-fidelity wireframe, in this way we are getting into more details.

High-fidelity wireframe

After aligning the layout for both pages to work on, it was time to bring colours, shapes, and illustrations, and explore all the different variations and combinations.

Despite the illustrations being aligned with the concept of Direct messages, I was still not convinced of the result, and I decided to level up the whole landing page with some 3D illustrations and re-define the background colour.

Solution

As a result of a few combinations, I could feel that the illustrations were too cluttered and I wanted to keep everything on a white background, right below you can find the final version.

DESKTOP

DESKTOP

MOBILE

Design System

Through my UI Design course, I was able to establish the Design System in my case study, in order to keep everything simple and efficient.

Next steps

Next steps

TAKEAWAY 1

At first, I underestimated the complexity of layout constraints for responsiveness.
By prioritizing the desktop version initially, adapting tablet and mobile became easier .

At first, I underestimated the complexity of layout constraints for responsiveness.
By prioritizing the desktop version initially, adapting tablet and mobile became easier .

TAKEAWAY 2

Practising daily challenges made me reflect on the fact that every fundamental matter when is applied to a design.

Practising daily challenges made me reflect on the fact that every fundamental matter when is applied to a design.