Mombi Meet
Mombi Meet is a hypothetical app designed to bring people together and meet new friends in the area. I created these frames as part of School of Motion’s Design Kickstart course.
The assignment was treated like a real-life scenario. In the place of a client, the professor’s assistant would give feedback based on what they liked and what needed to be altered.
The goal was to produce 12 style frames to embody the brand’s ethos of making a hectic world feel friendly and safe through Mombi Meet.
I was provided with ideas for potential pictograms and given the opportunity to improve upon them as well as Mombi Meet’s color scheme.
Starting Phase: Style Board
Mombi Meet Style Board
I created this design project through School of Motion. I was given a request from a “client” to create 12 design frames that would express how smart and simple Mombi Meet was to use.
Mombi Meet is a social media app that is all about bringing people together in the real world.
So I created the style board below to show the client the general feel of the project moving forward.
We have the brand colors repeated through the board.
Hexagons are used to represent people’s social media profiles and give off a feeling of high tech.
Thread is used as a reoccuring element to show how people are connected.
I also wanted to create an element of friendly guidence so loose arrows and thread guide us to places we want to go. It also shows that the technology is comfortable and safe.
Creative Process
Outlined below are the steps taken, when creating work for a client. They are broken into three phases. The starting phase where I create a style board for the client to get an idea of what the boards will look like. The drafting phase where the boards are created. The final phase where color is added to the boards and all the neccesary adjustments can be made.
Drafting Phase
After showing the mood board and getting aproval from the client to make the following boards in that style. I proceed to make draft frames to make sure that the client’s message is getting across. I put my thoughts on each board below the image, as well to help convey what I was thinking to the client and how each board could be animated.
Board 01:
We start off with a girl inside of a “Techy hexagon.”
the narrator says "We use social media to see what our friends are up to.”
The main character will be purple so that way she sticks out from all of the other blue characters. (Until she gets introduced to a special friend at the end.)
The margins start to move in towards our main character creating an environment of stress.
Board 02:
Two hexagons appear carrying her friends and a little thread connects them.
The main character is no longer alone and a Social media message jumps out of the characters' hexagons.
The friend's thoughts are not as important so they will be muted into the background blue.
But what our main character shares is that she feels lonely.
Board 03:
The "blue screen" will come down and behind it is the world. The frame is much more active than the previous one, giving a feeling of motion or change (we also inverse the foreground and background colors).
The narrator says "But in the real world..."
the world moves to the left and starts to shrink as we move to the next slide.
Board 04:
The narrator says "they are all over the place."
A few star hexagons turn into our original characters.
Our characters float in space only attatched by an orange thread.
Our characters are together but also isolated from each other. The thread connects them to earth but not to each other.
This is our most active frame, it almost feels uncomfortable because there is a feeling that we are no longer in control.
We transition out by rotating around the earth.
Board 05:
The narrator says "Introducing Mombi Meet."
The board becomes much more centered and gives us as an audience a sense of peace and control.
We start our transition by having the "i" in Mombi Meet animate into the phone on the next board by having the tittle slide inside of the body of the "i"
Note: The client disliked how we no longer had the earth in the frame even though they previously said that the logo should never be obstructed. So we came up with a compromise of having the logo within a box and the earth behind that box in the finished product.
Board 06:
The sky gets a little darker. The narrator says "It's a social media app for the real world." (In the final product I decided to add stars in to make the picture more mystical/exciting.)
A hand emerges and presses the Mombi Meet app.
We transition out by zooming in on the app.
Board 07:
We zoom in on the phone to see the Mombi Meet app. It turns into a hexagon and shows our main character and her friends chatting.
We kind of get a "Brady Bunch feel" they are all close to each other looking at each other and laughing. But you can tell it is still social media because the apps are still present on the screen's perimeter. We are also reinforced by the fact that they are in "Social media hexagons."
The narrator says "it's designed to bring friends that are nearby..."
the characters all look at each other and a kinnetic energy starts to build. They move away from the center character slowly building energy then they all sling shot back towards the center.
Our transition is a cut but the characters will remain in the same area so the eye will know where to look.
Board 08:
We transition in by having the hexagons colide together and we see all of our characters together in person.
The narrator says “… Together in person.”
I tried to keep the people in a hexagon shape to show that they were brought together by Mombi Meet.
I also have an "M" hidden in plain sight that also directs the eye toward our main character.
The main character’s phone vibrates at the end of the scene so that way we have a reason to cut to the next board.
Board 09:
We cut to a yellow background and a hand raises a phone into the frame.
The narrator says "It uses GPS on your phone to help create meetups in the real world."
While this is happening the map annimates on to the phone screen and then the arrow animates on, pointing to her friend and how to get there.
When the arrow connects to the friend an orange string shoots out of the phone. Implying that we are connected to a new friend. I immagine it annimating on simmilar to the motion of Spiderman shooting webs.
(The client decided that they wanted the hand in this shot to be more “realistic/recognizable” so we had a hand with fingers for this shot in the final copy.
Board 10:
We zoom in on this string and see a lot of technological elements happening.
The narrator says "and our state of the art 10G technology"
While the thread moves around. We see elements happening like another character getting locked out and the friend being approved and getting a check mark animated on.
Implying that Mombi Meet is keeping you safe from potential threats and uses cutting edge technology.
Board 11:
We zoom out from the string and find ourself at the place we were before.
No characters are there but the string snakes it's way across screen.
While this is happening the narrator says "Ensures your meet-up..."
The string becomes taught and pulls both main characters onto the screen together as social media hexagons. They step forward out of their hexagons and hold hands while the string makes a heart out of their two hexagons negative space. While this second part happens the narrator says "won't become a missed connection."
Before the heart fills in the thing that will be connecting our two characters will be the string in the shape of the letter "M". Implying that Mombi Meet starts new relationships too.
Board 12:
We zoom into the heart and the Mombi Meet logo reveals itself.
The world also pops on screen at the bottom and it is really large. While the narrator is talking the earth shrinks.
The narrator says "Mombi Meet. It's all about making this big world... a smaller- and safer - place."
The earth becomes very small and the ad concludes.
(To keep consistent with the other change above, in the final product both earths are covered by a rectangular box and text.)
Finishing Touches
After communicating with the client about the rough drafts changes are made and a more polished final version is created.
If you are interested in making a commercial or explainer video feel free to reach out.
