Skygram: Social Media without the Ego

Skygram is an application designed to get users outside of themselves to engage with and admire the world around them.

Put the Sky in Your Pocket

Skygram is a photo-based social media platform focused on the natural world. Unlike most photo-based platforms, Skygram disables selfie mode and includes face detect which prohibits selfies from being posted to the feed. Outside of the standard timeline, the app allows multiple feed settings that include sorting by favorite tags (i.e. sunrises or cityscapes), sorting by location, tagged locations (i.e. places I’ve lived, bucket list destinations, etc), and viewing photos posted by people in the user’s network. The standard timeline can also toggle to present photos from around the world – regardless of timezone – based on the position of the sun.

App Design Process

Journey Mapping

The design process for the app involved an extensive planning process starting with the creation of a flowchart – or journey map – that outlined important features of the app and how users would navigate through those features.

Research and Design Audit

I audited mobile apps with similar features such as Instagram. While I recognized pros in the minimal color palette that allowed the photos to stand out, Instagram’s interface includes lots of dead space such as the logo bar at the top and the bottom bar. While these bars provide hot links and promote ease of navigation, they eliminate valuable screen space that could be devoted to the content. I wanted the Skygram interface to optimize the space, allowing users to focus on the photographs.

Wireframing

Armed with the flowchart and my design research, I began sketching wireframes for the application screens. I sketched numerous variations to determine the most effective mechanism for presenting users with a simple, yet robust interface.

Wanting to present users with an easily navigable design, I ensured that important features were accessible within thumb’s reach. Key features include the camera and the menu icons, which easily allow a user to post new photos and access important application settings.

Development Using Sketch App

Once I had highlighted versions of the sketched wireframes that were most effective, I began recreating the wireframes with Sketch App. This allowed me to perfect the alignment of items and pin down a rough idea of icon usage and interactive elements.

User-testing Feedback

With initial wireframes in Sketch App, I met with a design friend to present and receive feedback. His voiced a desire for a standardized, scrollable timeline feed rather than focusing primarily on the sorting features. I rethought the layout of the home screen of the app, making the timeline the primary feature while still allowing sorting options to allow for customized content.

Interface and Brand Design

Brand Goals

My primary goal for the app’s branding was to minimize the brand presence so photos were the ultimate star of the show. However, unlike Instagram, in which the top logo bar alone serves to represent the brand, I wanted Skygram to present a brand image that spoke for itself. I accomplished this by drawing inspiration from sunsets to create a cohesive color palette across the application.

Designing for Accessibility

To promote greater accessibility and flexibility, I wanted to provide options for a dark or light mode, so I had to ensure the color palette I chose would stand out on both a light or dark background. When applied to the interface, the result is a distinct branded look and feel that complements the photos without distracting from them.

Logo Design

The logo design was the most challenging aspect of this project. Originally, I was looking to various phone application icons as inspiration. However, none of the these seemed to match with the minimalist brand I was wanting to promote. Based on user feedback, I was encouraged to design a simple typographic logo that could then be pulled from to create an app icon. After another round of sketches, I concepted the idea that formed the final logo, the word skygram with the final three letters forming a camera. A simplified version of the camera can be used in an icon format.

Key App Features

Skygram provides the ability to view curated content from the natural world around the globe. The above circular slider feature is a variation of the standarized timeline. It ignores timezones, allowing users to see the world based on the position of the sun rather than by the univeral time the photo was posted.

Users will have the ability to set up tags and locations, and follow other users. From the home feed, these preset tags will allow users to select the exact content they want to view, either by tag (i.e. night sky), by location (i.e. San Diego), by location tag (i.e. places I’ve lived), or by user group (i.e. family members).

Additional functionality will allow professional and hobby photographers to interface with their camera applications to post high resolution photographs imported from their wireless DSLR cameras.

An ability to switch between dark and light modes will not only provide better accessibility for the vision impaired, but allows a better color contrast depending on preference and time of day.

Work in Progress: What’s Left

Next steps for the app will include:

  • planning, wireframing and implementing an onboarding process for new users
  • using InVision to create click throughs to simulate application usage
  • user testing and fine tuning to optimize user experience
  • finalizing wireframes and implementing design for additional application screens (user profiles, settings, posting new photos)

Thanks for your interest in this project. Stay tuned for progress updates!

Leave a Reply

Your email address will not be published. Required fields are marked *

Post comment