UI/UX

A concept feature for Snapchat

A little introduction…

I recently graduated from the University of Maryland with a degree in Materials Science and Engineering. After spending over a month in Europe I moved to San Francisco for a job in technology consulting. In my free time I like to fly my drone, do a little videography, and work on graphic design. Up until now my work has mainly consisted of flyers, logos, and short motion graphic videos, but the SF culture has recently gotten me hooked on UX and UI.

Free Time

Actually, I really shouldn't say I have more “free time”, just generally more time. Not having classes to go to or tests to study for has, unsurprisingly, left me with more time to do…whatever. My consulting job keeps me plenty busy, but since I am trying to shift my career towards design and digital marketing I figure this type of work is a win-win.

The Concept

Stylesheet:

For this concept I didn’t focus too much on the mobile platform (iOS vs Android) since the Snapchat is largely the same on both.

Color

I used screenshots of the app to eye drop the main colors used within the app. In addition, snapchat implements some opacity on its shutter and next buttons (I decided on 70% opacity for those).

Blue and green are the main colors used while red,white, and gray are used for accents

Screenshot of current app UI

Typography

I tried to figure out what font Snapchat uses in the various parts of the app but couldn't find anything solid. I ended up varying the font styles of Helvetica Neue based on what I thought fit best.

Story behind the idea:

I, like many of you, am an avid Snapchatter. It’s a great, simple concept. Share what you’re doing at that moment with your friends and family(this could be dangerous if you've added your parents). A not so recent update allowed you to join “local stories” in addition to creating your own. These stories based on location are great, but what if I wanted to share my snaps with ONLY the same group of people all the time? You can imagine how this would appeal to college roommates, fraternities and sororities, family members, really any group of friends. I thought it would be a good exercise to recreate snapchat with this new functionality I called “circles”.

Design:

Something Old

I kept the actual snapping portion of the app the same in order to stay consistent with previous builds of the app.

New edit screen with circles button

Something New

After the photo is taken, the user is brought to the edit screen(I left the recently added sticker button out to make the recreation process easier). The snapchat circles button is now located to the right of the download button. Again, I didn’t want to stray too far from the implemented design, so rather than create a entirely new edit page I went with a simple icon that will bring the user to a new “share with” screen.

snapchat circles icon

In terms of the icon creation, I had some ideas in mind for expressing sharing a photo with the same group of friends. At first, I played around with geofence and map based designs but ultimately decided that people want to share these moments with certain “circles” of friends. Get it?! Circles of friends!?

Circle with instead of old Share with included circles you have already created

Circle With

If you are familiar with the app, you know that once you are done editing your photo you are brought to a “share with” screen. From here you can pick multiple people to share with. In my concept, by clicking on the circles icon on the previous screen you are brought to the screen on the left. This new section allows you to either start a new circle or add to an existing one.

viewing snaps and circles

Viewing Circle Stories

The viewing snaps screen is largely unchanged(again, for the sake of time I did not recreate the local story or discovery portions). All of your current circle stories appear here for viewing. If you have created a new circle or someone has added you to a circle it will appear in the most left slot with a “new” icon.

Icon

Even though snapchat stays true to their one logo, I thought it would be cool to apply the circles icon design to the main “boo” icon. In this case, I altered the icon to match the white fill and black stroke(this also makes it a lot easier to see on the harsh yellow)

That’s a wrap

Lessons learned.

1. Practice, Practice, Practice: I love the idea of coming up with a concept and 6, 8, 10 hours later being able to see it on the screen. However, UX is a whole different ball game. Having to think beyond what looks good to you is something that I sometimes struggle with (I think its good to acknowledge your faults). Thinking about where an icon is placed, what color looks best, or how the user will interact with it is a hard thing to do for someone who has never really thought about concepts like that. The good part about the process is that you can only get better with practice.
2. Time: I started working on the project late last night around 7pm, went out for a few hours and then came back. All in all I think this entire process took about 6.5 hours, 7 if you count AfterEffects. Since I wasn't able to find pre-made templates of Snapchats UI I had to recreate every single element in Illustrator, which took some time. I guess the lesson here is make sure your schedule is clear and the coffee is on.
3. Have fun: I really don’t look up at the clock too often when I work on projects like these. To me, this isn't work or part of a job, it’s actually fun. UX is a lot like the projects I have worked on in the past, just with a different set of requirements and criteria. I think the best part is that it isn't boring, it’s exhilarating and unique.

Thoughts?

I would love to hear feedback! Any advice or knowledge would be most appreciated

Thanks to Rachel George for reviewing and commenting on the draft

Email: klopez4212@gmail.com | Facebook: Kenny Lopez

HH Design is a community for students interested in the intersection between design and technology.

contribute