Tyme 

⤳ ui/ux, interaction design, product design, visual identity

Delivering the Delight of Memory

A digital time capsule app that encourages users to cherish their precious moments.

Timeframe  4 months

Tools  Adobe Illustrator, Adobe XD, Invision, Principle, Webflow

Role  Ideation, Research, Designing, Prototyping & Interactions

tyme-mock-bl

"Time capsules provide one of the best means to address the collective need for belonging, past and future." — Erik Ragno for The Atlantic

Problem

The current culture of people not treasuring moments due to a fast paced lifestyle and the constant access/availability leading to instant gratification therefore not cherishing a moment.

Outcome

A modern time capsule - an IOS based application which allows users to record their memories along with details that make the specific moment then bury them for a delightful surprise when opened.

Research & Ideation

Through secondary research, a market analysis, an analysis of HMW peer papers and crazy 8 workshop papers, a list of requirements, a user flow diagram and low fidelity wireframes were created based on the answers to "what, why, how and who".

What?

  • An application on mobile with an optional smart glasses connection
  • User recorded memories/experiences for later access, a time capsule collection

Why?

  • The culture of people not treasuring moments due to the fast paced and hustle lifestyle
  • Cancel instant access/availability then gratification
  • Digitalization of memories

How?

By tracking videos, photos and audio to decay and collect memories

Who?

Primarily users in the younger adult range (20s-mid 30s) as they tend to lead a more rushed and digital lifestyle

Key HMW Questions

  • How might we create a habit of decaying memories and get users to look forward to them?
  • How can the user be notified of a memory?
  • How can data be shared and visualized?

Requirements

  • Customisable — users must be able to make their memories feel personal and comfortable
  • Ease of use — allow the user to quickly record and re-visit
  • Bring delight — motivate the individual to capture their moments

Mid Fidelity Wireframes

I visualized my initial ideas digitally while also making adjustments based on the on-screen values and organization across all the screens - I also thought of variations available for screens such as displays of memories and additional options for tracking. I narrowed down the main sections of the system into the:

  • Onboarding process - from first launch, introduction, account creation and preferences
  • Capturing process - from taking a photo, audio or video to adding details that make a moment precious
  • Memories collection - viewing saved moments, whether they've been revealed or are still hidden to the user
  • User profile - viewing the user's favourite memories and tracking their complete moments
michyoung.com-tyme-midfid-1

Identity design

Identity direction

I created four mood boards based on different visual identities and paths I felt the app could take. 

  • Vibrant & playful - the fun and inviting design for the user's motivation towards using and returning to the app
  • Minimal & dynamic - having a clean and cool toned interface to bring more attention to the memories themselves
  • Bold & strong - exciting and attention grabbing to highlight the memories recorded
  • Nostalgic & soft - bringing the sentimentality of time capsules

I chose to continue in the direction of the mood board with the keywords "nostalgic, soft, comfortable, unique and eccentric” as it resonated with the message and intention of the application.

vibrant & playful

mdbd_Page_1

minimal & dynamic

mdbd_Page_2

bold & strong

mdbd_Page_3

nostalgic & soft

mdbd_Page_4

Logo

The logo was based on the concept of the app being a personal time capsule. 

  • The name "Tyme" was derived by linking together the words "my" and "time" 
  • The lines above and below emphasize the two words by linking "m" and "y" backwards right to left then "t" to "e" encapsulating "tyme" from left to right
  • The lines also represent the connections in different points of time connected by moments saved
michyoung.com-tyme-logo

Challenge in direction

During the translation of the mid fidelity wireframes to high fidelity and the creation of the branding, I felt that the design created did not fit the direction that I had envisioned for Tyme. There was a loss of the nostalgic feeling I wanted to convey, with stiffness and no ephemerality.

michyoung.com-tyme-initial

Revision

In order to reivse the unsatisfactory visual design of Tyme I did some exploration of concepts. The explorations included variations in colours, shapes and layouts while maintaining the structure of the mid fidelity wireframes. The ones I considered were:

  • Exploration 1: A cool and modular style - focused on more modular units and the concept of piecing together moments
  • Exploration 2: A colourful and whimsy style - playing with multiple colours and the use of free flowing shapes and lines
  • Exploration 3: A calm and stable syle -  primarily using circles and rounded edges to convey serenity

 I chose to move forward with the second style as it captured the intent of the application best.

michyoung.com-tyme-experimentation-3

Interaction design

The Interactive Prototype

The high fidelity prototype brings the user through the process of onboarding, then introduces them to the process of capturing a moment and possible user scenarios.

tymemock

Animated Interactions

In terms of animation I wanted to communicate the soft and relaxed feeling. This involved many elements fading, drifting on and off the screen throughout the user's interactions with the app. The colours, movements, typefaces and forms would also be customised based off of the user's input into the system.

  • Interaction 1: the loading screen -  once opening the app, the forms and shapes float in smoothly to join the logo and the log in inputs appear 
  • Interaction 2: onboarding  - the onboarding follows the user from the loading screen to sign up into an introduction to Tyme 
  • Interaction 3: moment captured - taking a photo using the camera of a moment leading to the details page
  • Interaction 4: adding a feeling -  once the user has their moment captured, they add feelings to their memory and return to the details page
  • Interaction 5: adding audio - the user searches for audio to add to their moment 
  • Interaction 6: viewing memories - viewing the moments captured, sorted by time and date while showing on revealed memories

interaction 1

tyme-load

interaction 2

tyme-intro

interaction 3

tyme-capture

interaction 4

tyme-feelingselect

interaction 5

tyme-audioselect

interaction 6

tyme-memoriesfilter

Marketing website

The marketing website brings in potential users and may expand the customer base. Since the intention and workings of the app may not be understood by simply hearing or reading the name of the app, it is essential that the users leave the site with a clear understanding of the features and benefits of the application.

Screenshot_2018-12-25_at_18_05_56

Reflection

Working on Tyme I was able to try new tools such as Origami and Principle and learn how to use them, I think documenting each stage from ideation to the final through my process website showed how the idea of a time capsule developed into a product. Looking back, I would fix and improve some of the animations created, create visualizations for the optional smart object and have done user testing in order to receive feedback.

Set in Sporting Grotesque & Karla 

© Michelle Young  ☻ 2020

Let's connect  ⌲