Filmeo
Filmeo is a photo-based scavenger hunt that encourages user to look at their environment in a different perspective.
UX/UI
OBJECTIVE
In a world where most photo-sharing apps revolve around showcasing users' glamorous and extraordinary moments, Filmeo takes a refreshingly different approach. This project seeks to cultivate resourcefulness and encourage users to appreciate the little things. With Filmeo, the emphasis is placed squarely on the photos themselves, rather than the individuals behind them.
APPROACH
The design language is patterned over photo sharing and photo editing apps. Due to the unique workflows involved, I found it necessary to develop specialized terminology within the application to effectively describe each component.
DESIGNED FOR
• amateur photographers that are seeking inspiration
• long-distance friends that want to do an activity together
• people new to town looking to explore the city
Selected screens from the application.
Filmeo is inspired by the story of the Montserrat typeface. Type artist Julieta Ulanovsky went around the town of Montserrat to find inspiration for the typeface. She looked at the organic, hand-drawn signs and incorporated it to what became the Montserrat Typeface. The project is also inspired by the idea of ‘Flaneur’ — a French noun referring to a person “strolling around.”
Important Terminology
Filmeo borrows jargon from filmmaking to communicate functions/features of the app. Filmmaking terminology is used since the idea of the app is making mini-snapshots of one’s adventures/life.
Vignette or in other words, “the challenge.” This is a group of frames that follow a single theme.
Frame or in other words, “the prompt.” Frames are included in vignette to prompt the user what to take a photo of.
UX Features Highlight
Ability to add friends immediately after signing up via the contacts associated with the user’s phone number.
This feature allows the user to interact with the application immediately through populating their feed with their friends’ vignettes.
Adding friends through a QR code.
Every user comes with their own “crew code.” A play on the term QR code, and in relation to the film-making theme of the app. This makes it easier for users to add their friends on the app.
Sample Workflows
Exploring Filmeo and Scheduling a Vignette.
Nathan explores the app and see different frames that he likes. He then finds a vignette to do with his friends. He finds “Type of the Town” interesting, so he saves it for the future. He settles on doing “Coffee and Cakes All Around,” and invites his friend @sheldoncooper1. To confirm his actions, he can view his scheduled and saved vignettes in his homepage.
Completing a vignette.
Nathan and Sheldon go out and about trying different coffee shops. They begin their scheduled vignette and are given different prompts. Unsure where to go, they press the hint button to guide them on their adventure. Once getting to Flour & Coffee, Nathan completes the prompt, edit’s his photo, and uploads it to the vignette. After quite some time, they finish the vignette, and Nathan is ready to share it to his friends.
Design Process Milestones
The following section showcases highlights from my design process that moved the project forward.
The initial idea for the project was for users to upload photos of their handmade artwork (painting/sketches) themed around the area they were in. In a user experience standpoint, this was difficult to implement as it requires a lot of steps in order to interact with the app. After consulting with my professor and peers, they suggested the idea of just taking photos and removing the artwork aspect — since photos are artworks on their own anyways.
Brainstorming
Initial sketches and write up for what was then, a 'Map Museum.' Filmeo follows a lot this initial ideas.
I dialed in my workflow through making a video prototype. This consists of the bare bones of the app in low-fidelity, and making a video of how a person would use the app. This helped me get into the mindset of the user. Through this exercise, I was able to figure out necessary features of the app, also refine my workflow to what makes the most sense.
Video Prototyping
Starting a vignette
Taking "frames." P.S. That's me!
Figuring out the location aspecct.
For this design process, my professor was my participant for the testing. I wrote down tasks for him to do and observed how he navigated with the app. It showed a lot of weakness with my workflow and wording in the app, which in return, helped me refine the user workflow.
Guerrilla Testing with Low-Fidelity Wireframes
Different versions of Filmeo throughout the process
For this design process, my professor was my participant for the testing. I wrote down tasks for him to do and observed how he navigated with the app. It showed a lot of weakness with my workflow and wording in the app, which in return, helped me refine the user workflow.
Homepage Prototyping
Different versions of Filmeo throughout the process