
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
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.
TAKEAWAY 1
TAKEAWAY 2
Contact
Work
Thanks!
Thanks for taking your time to visit my portfolio, I hope to see you soon.