Hey Hey!
An app to stay connected through messages, calls and video calls.
OVERVIEW
Hey Hey! is a UI app design project.
OBJECTIVE
The objective for this project was to design the user interface of a messenger app, create a style guide with reusable components and animate a prototype to show how users would interact with the app.
IDEA
While the project started as a design of a simple messenger app, it developed into a communication tool for users to connect with each other, especially using video calls.
CHALLENGE
The main challenge for this project was designing a user interface that would feel familiar, be aesthetically pleasing and easy to use with minimal research and user experience design beforehand.
APPROACH
I started the project by taking inspiration from Facebook messenger and WhatsApp to identify elements I could incorporate and combine into Hey Hey!. In a second iteration, I thought about the increase of video in people's daily interactions and took inspiration from Houseparty to enhance the video features.
LEARNINGS
This project was a great opportunity to learn how to design an app in a short period of time with minimal research beforehand and solely focus on the user interface. Working in Principle, I also learned how to create an animated prototype.
PROCESS & TOOLS
![](https://images.squarespace-cdn.com/content/v1/5eaed0fa64182f2ddf5da25a/1600090223433-4WPNW7V41DI7UJC8541Q/smartmockups_kf2kdq9x+%281%29.jpg)
1. Inspiration
For this project, I took inspiration from Facebook messenger, WhatsApp and Houseparty to identify elements I could incorporate and combine in Hey Hey! as well as opportunities to give the user interface a different look and feel.
2. User Interface Design & Mockups
The user interface design is made of 6 screens that focus on the app's main features and project Hey Hey!'s look and feel.
![smartmockups_ke76xza8 (1).png](https://images.squarespace-cdn.com/content/v1/5eaed0fa64182f2ddf5da25a/1598193221742-OVT14JS2GZAA988VJOK4/smartmockups_ke76xza8+%281%29.png)
![smartmockups_ke73wqel (1).png](https://images.squarespace-cdn.com/content/v1/5eaed0fa64182f2ddf5da25a/1598193251979-5VCEXFFMKGKO2M5CD06T/smartmockups_ke73wqel+%281%29.png)
![smartmockups_ke761fxs.png](https://images.squarespace-cdn.com/content/v1/5eaed0fa64182f2ddf5da25a/1598193312379-5KDEV60HE671JVBKT6UK/smartmockups_ke761fxs.png)
![smartmockups_kpcg9qnc.png](https://images.squarespace-cdn.com/content/v1/5eaed0fa64182f2ddf5da25a/b2efe40f-82cb-425f-af0c-8388565607a6/smartmockups_kpcg9qnc.png)
![smartmockups_kf2k965h.png](https://images.squarespace-cdn.com/content/v1/5eaed0fa64182f2ddf5da25a/1600090068699-GSF83B2IEO5KHS5XKO6H/smartmockups_kf2k965h.png)
![smartmockups_kf2k9mp8.png](https://images.squarespace-cdn.com/content/v1/5eaed0fa64182f2ddf5da25a/1600090088052-99NQ5VH3PGG62MKMX27V/smartmockups_kf2k9mp8.png)
3. Animated Prototype
Using Principle, I created an animated prototype showing how users would interact with the app. The animation focuses on the chat and contact pages.
4. Style Guide
Hey Hey!'s style guide reflects the application modern, fresh and happy character.
In addition to logo, typography and colours, it includes a UI kit with UI elements such as buttons and icons and reusable components.
![Style guide 2_new.png](https://images.squarespace-cdn.com/content/v1/5eaed0fa64182f2ddf5da25a/1598194571252-51NJ0SQS8TIWX1D262FY/Style+guide+2_new.png)
![Style guide 3.png](https://images.squarespace-cdn.com/content/v1/5eaed0fa64182f2ddf5da25a/1598191269061-S56OCL3HMTG41XMTV0AB/Style+guide+3.png)
![Style guide 4.png](https://images.squarespace-cdn.com/content/v1/5eaed0fa64182f2ddf5da25a/2ae18029-8bb6-484d-94e0-6be0f40de665/Style+guide+4.png)
![Style guide 5.png](https://images.squarespace-cdn.com/content/v1/5eaed0fa64182f2ddf5da25a/abcbb769-6f77-4191-9ce9-c9cf37c9815e/Style+guide+5.png)