Merrie's Portfolio
mobileExample.png

Generative Form

Generative Form: Moments

iOS, March-May 2019, GMD Year 3 Final Major Project, Individual

Brief

Choose an object or an experience, do quantitative and / or qualitative analysis of it, consider which elements from your analysis to work from, create a recipe to recreate the object or experience follow the recipe to make outcomes.

If you want to see the full design process, check out the Figma file

 
 

Technology

longGF.png
 

Reimagining Memories

The initial object/experience I chose to explore in this project was human memory. Memory is the capacity to connect experiences, learn and make sense of our lives. However,I quickly figured out that that in itself is too broad to tackle, so I did some initial research and decided to focus on explicit, episodic memory - personal memories based on real life events and experiences. What really caught my attention was that some part of our brain gets to decide what makes a memory special enough to move it long term memory.

 
MemoryModel1.png
MemoryModel2.png

Research

In order to get a broader sense, I interviewed about 15 people on their experience with memory and particularly episodic memory. Due to the answers being very personal and connected to the private lives of the participants, I will be keeping the participants' answers private too.

However, one thing that all the answers had in common was the main factor behind making that memory - emotions and feelings related to a moment in time. Emotions are not only what made the memory, but also what triggers it. Other common factors were sound, smell and physical space.

 
MemoryModel3.png
MemoryModel15.png
 

Product Concept

For decades, the photo album-stuffed shoebox has been a household staple. Today we capture memories through our phones, turning them into a modern shoe box. Moments gives you a new way to remember by fusing tradition with modern technology.

Think of your moments as stories. A mix of emotions and feelings related to a particular moment in time. Create as little as 5 or as many as 20 moments at a time. They can be as broad or as specific as you want them to be. Finally, receive your personalised moments cards and analog mp3 player - yours to listen back to and keep forever!

 
 

Flow

Flow01.png
 

Visual System Development

First Iteration

MemoryModel11.png

The first iteration of the visual system / pattern maker design, involved having one solid shape (from a choice of three) as the centre of the composition and then layering on different elements, patterns and textures. The main shape can be associated with an overall feeling - circle=happy, triangle=sad, rhombus=balanced/neutral (based on psychology of shapes). The additional elements can also convey feelings, emotions and even weather conditions.

Although I liked the overall idea, when tested, the system proved to be not as efficient as I had imagined when sketching and a little bit too complicated. So I proceeded with another round of iterations.

 
 

Second Iteration

For the second iteration, I decided to keep the idea of using simple shapes and layering, but I decided to try and play with having different, solid patterns stacked on top of each other. The idea is that you can always have one colour and you can invert the shape. And stack. It feels simpler to make, but also looks more interesting visually with the possible play of negative space.

 
 

Example Patterns

One thing I found challenging while making the “example” patterns was to let go of my designer self. In the end, people that are not designers will be making these graphics themselves and their graphics won’t necessarily look amazing. So I tried to make a few weirder/not so “aesthetic” graphics to showcase a more realistic sample.

 
 
 

Moment Cards

To go with the example graphics, this is essentially what a printed “moment” will look like. The customer receives a deck of cards that they can scan and listen to.

 
CardStyle_a01.png
CardStyle_a02.png
CardStyle_a03.png
 

UI Development

The next step in my process was developing the actual screens. Due to time constrains, I wasn’t able to go in detail and do every screen, so I focused on the core activity - creating and managing moments.

 

Name Moment

The first step to creating a moment would give it a name and date. I never enjoy designing screens that only have 1/2 elements, so this gave me a headache - I didn’t want to clutter it, but also didn’t want to look like half of the page wasn’t loading. I did like the idea of the bigger & bolder type, so that’s the one I decided to explore further.

I had the great realisation that this screen requires a keyboard input, so having that kind of filling the screen made it easier. I decided to keep
it very minimal. Once I have the colour palette maybe I’ll try a coloured background to increase contrast and make it pop a bit.

Exploration

Exploration

Final

Final

 

Create Graphic

I’ve never had to design a tool in a way, so this was a lot of fun. Drawing inspiration from VSCO, Instagram, Unfold and other photo editing apps, I laid out the main elements, which I generally liked, but the thing that really didn’t work out was the colour picking and colouring of the different areas of a layer.

 
v1 - Colour Picking Exploration Tooltip

v1 - Colour Picking Exploration Tooltip

 

For the second iteration, I kept some of the elements from the first iteration, but switched out the way you colour - there’s only 1 colour per layer and you can invert the layer to get a different effect. I also played with what controls to include in the top, what an empty state might look like etc.

 
v2 - colour picking & controls

v2 - colour picking & controls

 

This was a very small change from the previous iteration - I looked at what image processing controls are actually relevant to the graphics I created earlier - flip was totally irrelevant for example.

 
Overall flow and layers control

Overall flow and layers control

 

I was pretty happy with the layout, but decided to push it around a little bit more and see how I cna separate the controls better, which ended up in putting them up at the top of the page, which also had an effect on the heading styling.

 
Layers selection and controls hierarchy

Layers selection and controls hierarchy

 

Record Story

The first thing I started testing was the way the screen indicates the different states of recording - I didn’t want a multi screen flow, so it was challenging to fit it all into one screen, without being confusing. This initial exploration focused on the overall flow - what are the steps in order for the recording to be recorded and saved, also for a first time user do he need to enable any permissions.

 
recordFlow01.png
 
recordFlow02.png
 

I looked at a few existing apps where you can send voice messages to observe the deleting recording patterns and then gave it a spin in this app’s context. I like the swipe to delete, however that implies the user holding down the record button for longer than a minute, which can get tiring for the user.

 
cancelRecording.png
saveorDeleteFlow.png
 

I continued pushing the idea of cancelling/saving etc. The swipe to cancel and hold to record were left behind, so I tried a more simple approach - just tapping record and then stop and play.

I also introduced the idea of trimming the audio and adding background music, which allows for more personalisation that the previous iterations.

 
refinedSaveRerecordFLow.png
finalFLow.png
 
firstIt.png

Moments Selection Overview

This would be the main screen showcasing if you’ve already created some memories and also allowing you to add more. I wanted it to be super simple and that’s why I chose the card approach.

I spent some time fiddling with how you should add a new memory - the continue to checkout/make my box button kind of messed with it, so it was difficult to find a good place for it.

I ended up not adding any extra buttons for adding a new memory, rather making the first card in the stack the button. I also decided to add a list view, because not everyone likes rails + when you get over 20 memories it might get too hard to find something.

 
secondIt.png
 
thirdit.png
 

Interaction Design Examples

Selection

View Selection: Delete Card

View Selection: Delete Card

View Selection: Edit Card

View Selection: Edit Card

ezgif.com-video-to-gif (8).gif
 
 

Record Story

Create Graphic

Create a new graphic - add new layer

Create a new graphic - add new layer

Record Story

Record Story