UI DESIGN AND IMPLEMENTATION
App for capturing and interpreting photographs
Role
In this project I worked with the:
UI
Flutter development
Group
3 students
Tools
Figma
Flutter
Firebase
background
Bursting the mobile bubble can be interpreted as designing mobile applications that entices its users to interact in some way with the space around them, expanding the design space beyond the phone’s screen.
The mobile application MYTAKE. was created as a way to burst the mobile bubble and encourage the users to look up from their phones and interpret the visual world around them through photography.
The project was done in a group of three where we all worked on all parts of the process from UI to implementation, as part of a course in Mobile Computing. As the focus of the course was to create and implement the UI and functionality of an app, little focus was put on user-research upon creating the app.
Concept
The concept is a variation on the children's game telephone, in which a word or phrase is passed from person to person, and the original message is morphed and distorted as it moves between participants. In MYTAKE. participants pass images between each other instead of words. Users get to develop their skills to both interpret others’ images and convey their own ideas through photography. The idea is that users hone their visual literacy in a casual and interesting group activity.
The first user (A) is given a text prompt and asked to give a take on the subject, which they do by taking a photo. The second user (B) is then asked to give a take on the first person's photo, but they are not given the initial text prompt. In a similar manner, user B’s take is then sent to a third user (C). Once all users have made takes the session is either completed or the last take is sent to person A who would give their take on the photo sent to them, after which the activity continues until a specified amount of takes have been made. This first stage is envisioned to carry on over days or weeks.
Once a session is completed the participants can view their takes in chronological order. This step is conceived to take place while the group is gathered physically. They can now discuss their different takes and their thought process. Both how they read the previous take, and their thoughts on their own take. This would break the users out of their mobile bubbles. It should be noted that the goal is not to figure out the initial prompt, but rather to have a fruitful conversation about the takes.
Process
Low-fidelity wireframes
High-fidelity wireframes
Development
The app was developed using the Flutter framework. The app utilises Firebase to store and fetch data for the app. For the images in the app Firebase Storage has been used and for the remaining data, the Realtime database has been used.
Visual style
Immediately apparent when the app is launched is its distinct visual identity. The hard shapes and high contrast colours are present on all the app pages. The app deliberately avoids Material Design (and iOS) default components in order to avoid users to use their mental model of a “productive” or “serious” app when they discern its usage. The aspiration is that the visuals inspire an artistic attitude.
