UI, Design, and Animation
S'More Date is a dating app that prioritizes personal attributes over physical attraction.
Are you ready for Something More?
Roles:
Junior Designer,
Illustration, Animation
Graphic Design, UI, Motion Graphics
Tools:
Adobe Photoshop, Adobe Illustrator, Adobe After Effects, Figma
Time:
Ongoing work since April 2020
Deliverables:
Social Media Content, Explainer Videos, Motion Graphics, and Design.
Background
S'More Date is a next-generation dating app that focuses on creating connections based on personal attributes rather than physical attraction. The more you like about one of your match's personalities, the more their photos will unblur. As a Junior Designer, I focus on creating ways in which to make the overall design more interactive. Tasks include redesigning in-app buttons, translating explainer videos, and creating enticing social media content.
Coming from an animation background, working at S'More Date has taught me a lot about branding, social media, and UI. These new skills are attributed to the knowledge and skillsets I have in Motion Graphics, illustration, and animation.
Scope
S’More Date incorporates a lot of vibrant and retro colors to fit its brand aesthetic. The creative goal of S’More is to keep viewers engaged and actively seeking matches. My job is to make enticing and on-brand visuals to assist with in-app creative and marketing materials.
Use the buttons below to skip to different parts of the process. You may also scroll through to see the whole story.
This overview will be broken down into two projects:
-
Personality Button Project
-
App Store Video
Demographic
-
Ages: 20-35
-
Any gender or sexual orientation.
-
Any relationship status (or just friends).
-
Anyone that is tired of swiping and dating based on physical attraction.
-
Looking for someone to make real and deep connections.
-
Looking for a hate-free community.
-
Looking for real connections
Personality Button Project
Problem
The overall look and feel of profile icons are bland. There needs to be a way to redesign them to make them more fun and engaging.
Old Design
These are the only pieces of visual evidence for potential matches. Therefore, it is important to make sure the personality icons are enticing. How might we change the look and feel of the buttons to create more fun and interactive experience for users?
Goals
-
Create, design, and develop new buttons for a user’s profile.
-
Make an experience that keeps users engaged.
Design Goal:
-
Use the brand’s vintage colors and clean style to make the process more interactive.
-
Use vector illustrations to populate the button’s backgrounds.
-
Keep it colorful and fun.
Process and Iterations
The design process was broken down into four different iterations:
First iterations
I first started by adding more colorful icons to the current gray square design.
-
The first iteration was an exploration using the gray space.
-
I played with fonts and colors to accentuate the design.
-
We did not go with this idea because we decided that it should be more fun and colorful.
Second Iteration
The second iteration utilized a full bleed and removed the gray background.
-
I added larger icons and changed the colors.
-
This method did not work because the imagery was not cohesive enough.
-
The text also did not show up well on some of the designs.
Third Iterations
Click State
On the third iteration, we settled on using textured backgrounds and smaller icons, a combination of iterations #1 and #2.
-
We used different textured backgrounds for each category.
-
Bold letters were used as titles.
-
We created a version that would show the click state of the icons.
Final Iteration
In addition to the square buttons, I also made icons that stretch the whole width of the screen. These were for the optional voice and music features on the profile. Once clicked, prompts would come up that would help guide recordings.
Sound Bars
In addition to the square buttons, I also made icons that stretch the whole width of the screen. These were for the optional voice and music features on the profile. Once clicked, prompts would come up that would help guide recordings.
Sound Bars
Prompts
-
I decided to stick to the same background textures.
-
I also kept the small album covers and the play button.
Conclusions
This project was an eye-opening experience to my UI capabilities and ability to create an experience.
I enjoyed visualizing icons and being able to place them in interactive spaces. I also learned a lot about collaborating and getting feedback from people around me, especially from my supervisor.
Here are four lessons I learned while working on this project:
-
Be able to adapt to different types of text. When designing, it is helpful to see where the text is and how it influences the space.
-
Keep in mind that designs have to be adaptable to many parts of the app.
-
It's best to simplify icons to emphasize the point.
-
Once you know one design tool (Illustrator), the learning curve for other programs (like Figma) becomes much easier.
Motion Graphics
App Store Video
Problem
The video on the app store doesn’t accurately represent the new design of the app. There needs to be a new video that shows the new features. How might we create a video that identifies the essence of S’More while also showing off its key features?
Goals
-
Create a new app store video that shows the entire onboarding and profile matching process.
-
The video needs to include all the new features and updated creative.
-
Has to be fun, on par with other dating app competitors like Tinder, Bumble, and Hily.
Design Goal:
-
Create a fun and captivating video that not only informs the viewer but encourages them to download and use the S’More Date app.
Process and Iterations
To first get an idea of the scope of the project, I decided to storyboard the video based on the copy written by my supervisor.
Story Boarding:
The video starts with a series of blurred photos, representing the blurred features on the profile. It then runs through the process of liking attributes and unblurring. Once the photos are clear, messaging unlocks video chatting, and then you can see the blurred video dating demo.
Iteration #1:
The first iteration made use of a single iPhone and different banners. I decided to utilize an iPhone to frame the features. The backgrounds copied the textured screens of the button designs and used movements to direct the eye.
After the first iteration, the App Store took it down because we broke a few of their rules. They did not allow an iPhone frame in the video and wanted all screens shown to be actual footage from the app.
Iteration #2:
-
I decided to keep the same movements and take out the frame around the phone.
-
New transitions were put in and added to the text.
-
This version was not used because the App Store wanted more screen time over backgrounds.
Iteration #3:
-
After another removal from the App Store, we decided to take a new angle that used more dynamic transitions. This one emphasized screen time and in-app features.
-
It also utilized full-screen pop-ups and text. The pop-ups were an alternative way to keep the copy. This was intended to keep it separate so that it was not distracting to the on-screen visuals.
Final Iteration:
The app store was still not happy with the use of pop-ups because it was not consistent with the app. We then made a final iteration that tried to limit this as much as possible while keeping it full screen.
Conclusions
Though the video project was thoroughly researched and planned from the start, many things could not be accounted for. It was a hard but rewarding process and we went through many different versions until we settled on the final one.
These are three lessons I learned while working on this project:
-
Not to be afraid of multiple iterations.
-
Utilize transitions and find ways to iterate ideas into a time based format.
-
Various work methods on Adobe After Effects.
More Motion Graphics projects:
Reflections
At S'More, I am grateful that I get the freedom to work on many different projects! I love being able to contribute my different talents to a small and dedicated team.