Moments
UX/UI
Product Design
Branding
Interaction Design

A B2C friends-only mobile application for sharing pictures of just you and your world.

Overview
Moments is a map-based photo-sharing app intended for friends. Moments has no linear feed or algorithms, just a map with you and your community on it. The goal is for the user to post their "Moment" for just their friends to see. This phase of Moments looks to begin the essential foundations for the application. Our goal is to establish core functionalities in a human-centric way and give the platform its unique personality.

01 Discovery 02 Ideation 03 Design 04 Final Designs

Insight
The client needed his core features to be established. The client already has an existing app in the IOS marketplace though it is quite barebones. He wanted not only a redesign of his current app but new designs to legitimize the functionalities of the pending app.

The client looked for:
  • New onboarding screens
  • Home page functionality
  • Adding/inviting friends
  • Posting moments
  • A brand style/guide

The issues with the existing product included a lack of app navigation and formatting, inconsistent visual elements, and an unfriendly user platform.
Solution
I designed core features such as onboarding, the home page, and adding friends and posts. I also created a brand guide and UI kit. As a result, I ensured the product was user-friendly and visually intuitive.

01 Discovery

Client Questions + Answers
From the initial meeting, I came up with a few questions for the client to help us best understand the project scope and the requirements for a successful design phase.

02 Ideation

User Flows
User flows dictated the required screens for each essential user story provided by the client, including creating a profile, logging in, adding friends, and uploading photos. These user flows formed the basis for the initial wireframe designs.
Wireframes
The wireframes were based on established user flows and stories, primarily drawing inspiration from other map-based social media apps.

03 Design

Branding
Moments combines sleek blacks and greys with playful blues and a distinctive typeface, warmed by touches of red, green, and yellow for cohesive branding.
UI Kit
Using my brand guide and wireframes, I designed a UI kit that takes into account different UI states for each component.

04 Final Designs

Onboarding — 1
The onboarding covers essential profile details: username, password, phone number, name, birthday, and a profile picture, incorporating various user input types (default, active, focus).
Onboarding — 2
This section shows more aspects of the onboarding flow. This includes password protection, date selection, and terms and agreements.
Tutorial
The optional tutorial guides users on app usage, with a touch of sarcasm.
Map View
The map view serves as Moments' homepage, allowing users to explore posts from friends and themselves, including recent posts displayed as stories.
View/Add Friends
Ensuring a seamless user experience was paramount, particularly in viewing and adding friends. In the "My Friends" section, users can message, compare, hide moments, remove, and block others. In the "Add Friends" section, they can add existing app users or invite contacts to join.
Upload/Take Photos — 1
Posting a Moment is user-friendly, mirroring social media apps. Users can add photos, captions, tag friends, and include a location.
Upload/Take Photos — 2
This section shows more of the photo editing, captioning, and tagging aspects of the flow.
Error Checking
Error checking, crucial in any app, includes handling invalid inputs, non-original usernames, and problematic posts.