S'More.png
UI, Design, and Animation
S'More Date is a dating app that prioritizes personal attributes over physical attraction.
SMore_Logo.gif
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.

Smore backg copy.jpg

 

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

SMore_Logo.gif
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.

Screen Shot 2020-11-15 at 12.45.23 AM.pn
Screen Shot 2020-11-15 at 12.45.13 AM.pn
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:

Artboard 4@2x.png
Artboard 1@2x.png
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.

outsideArtboard 1@2xwe.png
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.

outsideArtboard 1fin.png
outsideArtboard 4fin.png
Third Iterations
outsideArtboard 1fin.png
outsideArtboard 4@2xwe.png
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.

craetive@2x.png
myseason@2x.png
smoothie@2x.png
convo@2x.png
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.

outsideArtboard 60fin.png
outsideArtboard 56fin.png
Sound Bars
outsideArtboard 59fin.png
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.

Jane_edited.jpg
Julia_edited.jpg

Here are four lessons I learned while working on this project:

  1. 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.

  2. Keep in mind that designs have to be adaptable to many parts of the app.

  3. It's best to simplify icons to emphasize the point.

  4. Once you know one design tool (Illustrator), the learning curve for other programs (like Figma) becomes much easier.

 
SMore_Logo.gif
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:
S'more app store video boards.jpg

 

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.

Iteration #1 GIF

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 2.gif
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.

Iteration #3.gif
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.

final iteration.gif
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:

  1. Not to be afraid of multiple iterations.

  2. Utilize transitions and find ways to iterate ideas into a time based format.

  3. 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.