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
"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
Identity design
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
minimal & dynamic
bold & strong
nostalgic & soft
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
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.
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.
Interaction design
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.
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
interaction 2
interaction 3
interaction 4
interaction 5
interaction 6
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.
