Mira Kirvesmaki

Design with heart

May 3, 2013
by admin
0 comments

Project in a nutshell

mira_kirvesmaki_image_degree_show

My project in 100 words:

This iPhone application gives a small circle of loved ones a way to connect to each other on a daily basis. By drawing a smiley face that represents your mood, you can keep the people you’ve connected with in the loop on how you are doing. Respectively you can dedicate a moment each day to your connections and see how they are feeling. This small exchange can create a sense of connectedness even when regular contact through other means isn’t possible or necessary. Through it you can also better understand when your loved ones might need a little extra tlc.

 

Bound from Mira Kirvesmaki on Vimeo.

May 2, 2013
by admin
0 comments

Critical reflection

As a continuation from my previous post where I looked at what I’ve learned it is now time to take a moment and look back on the journey that got me here.

My project has been very much people centered from the beginning. The starting point was to take a topic and explore it through engaging with people and through that find an insight or problem around which a concept could be developed. After some initial exploration I decided on good deeds and the connection between people that can ensue from doing good deeds as my broad topic to explore. I conducted several interviews, experiments and an observation as well as did some desk research into the topic. One of my favourite parts of the process was when I had gathered all of these materials together and was able to then dissect them and pull them apart to reveal several insights. I then took these insights and brainstormed and ideated around them actually generating several feasible concepts. I shifted through these ideas using SWOT analysis and dot voting to determine which one fitted my needs and wishes best. The really scary part of the process was not having the concept until halfway through the project. This was by design, it was the process I wanted to follow, but I still wasn’t fully prepared for the pressure that came from that uncertainty.

After arriving at a concept I started testing out the possible design solutions for it. I went through several prototypes and especially found the experience prototype I conducted extremely useful. The feedback I got from it had a huge influence on the final design decisions made and the direction the project took. Along the way I had to make some hard decisions that shaped the project as from the beginning I had wanted to design something quite compact and in a way simple. This was so that I would actually have the space to craft it and to have the possibility to go through the full design process, without having to skip stages because of time constraints.

The final stages of the project were more to do with the design and technology aspects of the project. I experienced several hick-ups with the technology. I decided to implement the project as a web based application as the skills associated with that were more attuned to what I wanted to learn. From the beginning I was gearing the project towards an iPhone application as it was a clear gap in my portfolio. The final product, Bound, allows a small circle of loved ones to connect to each other. The main insight that led me to this concept was that in order to do a good deed you first need to become aware that there is a need for one in the first place. And more often than not we aren’t actually aware how our loved ones are doing, especially if not living under the same roof. Bound was conceived to combat this and allows people to share how their day went with others as well as respectively see how their loved ones are doing.

May 2, 2013
by admin
0 comments

The learning curve

As the year is coming to an end I felt like reflecting a bit on what I’ve learned over the past nine months.

I think my biggest take away from this year was being able to plan and execute a full design process over a longer time period. As I’ve only been involved in one semester projects before that have had a tight time constraint as well as several team members to negotiate with I don’t feel that this is something that I’ve had the chance to do before. Drawing from a pool of design methods that I’ve used before as well as ones that I wanted to test, I moved through the stages of design. With the brief being open I really found myself struggling with trying to narrow it down, the limitless possibilities and the responsibility lying solely on my shoulders really weighed me down. I learned that constraints are really one of the key aspects in any design project. And that the more constraint a brief is the more I actually enjoy it, I love the dance around them.

I also learned that I utterly love the initial stages of the design process, the part where I can interact with people. I have to say that I get most inspired by others and working on my own, which was something I was kind of looking forward to experiencing, proved to be quite the challenge. Luckily, being a people centered project, I had several extremely useful interactions while conducting interviews, observations and the experience prototype. It was the insights that I gathered through these interactions that really made my project.

I also feel that my visual design skills have improved since last year. I identified this as a particular weakness of mine during last summer and since then have actively used any possibility I’ve had to improve my skills. This included things like doing weekly mood boards at the start of the project and designing few motivational posters for my own use. It is still not one of my strongest suits but I am quite pleased to see that there has been great improvement which I hope will continue.

There are countless small technical aspects and mishaps that I’ve also learned from. I have not undertaken this large a project using HTML, CSS and JavaScript before and obviously learned a great deal in that arena. I learned that blogging/recording my process is a great way for me to keep my head straight with a project and that putting too much pressure on myself will only lead to paralysis in the end. I learned that it is important to have fun and love what you are doing if wanting to achieve something great and that this comes from being relaxed and openminded. Especially for learnings sake feeling safe in making mistakes is paramount.

I feel like I’ve been able to grow as a designer over the past year, having had several opportunities to challenge myself. This growth is obviously inevitable as well at this early stage in my development when each project completed counts. Even though I am not satisfied with my project (is there such a thing?) I think it is this discontentment that is really pushing me to better myself and to challenge myself. All in all it has been a great ride.

April 16, 2013
by admin
0 comments

Technology side of things

I though it might be a worth while to go over some of decisions made about the technology related to my project. As I’ve mentioned before from the beginning I was gearing my project towards an iPhone application. At the start of the year I identified iPhone apps as something that my portfolio was missing. After deciding on a concept the main technical decision was what technology to use to prototype the final concept. This boiled down to two different options that I already explored in my PeDeTe sheets: a native app and a web app.

After considering these two alternatives I decided to build the prototype using html, css and javascript. I concluded that these skills would be more useful for me in the long run as they can be applied to a bigger variety of projects in the future.

As I’ve never actually build anything this substantial using HTML, CSS or JavaScript before I decided to use an existing framework to build mark 1 but soon realised as I moved on to implement some of the more challenging parts that the restrictions of that framework would hinder my prototype too much. I swopped to another framework, one as well meant for building web apps, for mark 2. This allowed for a lot greater variety of things to be implemented but as with the first one I hit a wall at some stage in the development. After these two start-overs I decided that the benefits of building using an existing framework were not worth the  trouble they were giving me. Third time the charm, after starting with a clean slate things have ran a lot smoother. No project is obviously without it’s hiccups but I believe that the worst has been conquered.

April 11, 2013
by admin
0 comments

Iterate, iterate

After looking into finding inspiration for the pattern I started experimenting with the visuals. I find that the process that works for me the best is one of iterating through several versions. I usually start with a very rough sketch on paper and use that as a starting point when moving on to work on the computer. But then many times I find that things that worked nicely on paper don’t actually translate very well onto more high-fidelity sketches. This is where iteration comes in. It’s more like a sketching/testing process where I sketch with rough elements that still somewhat resemble the final elements. This way of working means though that there is a huge amount of sketches and most of them are quite embarrassingly bad.

I started exploring with a more geometric look, trying to still stay somewhat fateful to the visual identity I’d been looking at previously. After several iterations it became clear though that I wasn’t really getting anywhere with that. I then moved on to the more natural look and feel of a water colour background, which fit in better. I also adore the kind of hand-crafter quility of it that I think fits very well with the feel of the app as well with one of the main interactions resembling drawing.

Testing the patterns

Testing the patterns

 

As can be seen I still decided to keep with the circles. I do like the idea of having it as a reference to emoticons. For a long time I was also keeping with the yellow+grey kind of colour scheme but then further in decided to start experimenting with other colours as well. Looking into colour schemes I found a lovely combination of yellow, few greys and a lovely light blue that I felt had a very nice, energetic and friendly feel to it that fit the tone of my project well. For this exercise I was concentrating on getting the background and structure right so the circles are very undesigned. I also did few experiments with fonts, but nothing too extensive yet.

Obviously I am not there yet with the visuals so more iterations will follow.

April 4, 2013
by admin
0 comments

The great pattern hunt

Over the last couple of days I’ve been hunting for patterns that could inspire the background pattern used in my application. With the guidance of few textiles students I hit few recommended pattern books to see what style would hit my fancy. Here are few of the directions that really had something that intrigued me:

“Watercolour” patterns

watercolour inspiration

watercolour inspiration

+handmade quality that would mirror the hand-drawn strokes

-how would the other interface elements fit in?

-/+very different direction in style from what I’ve been previously pursuing. This might not be a bad thing though as I’ve been hitting a wall there too so a change in direction might be just what I need.

 

Circle patterns

Pattern inspiration

Pattern inspiration

+circles could be the “theme” of the app

+the actual UI element circle would be easy to blend into the bg

-is there such thing as too much of a good thing/too many circles?

Two toned patterns

Two tone inspiration

Two tone inspiration

+instead of colour opacity or intensity could be used to create the difference

Other ideas that rose from these:

-I could use the curved lines of the smilies to form the pattern.

-Colour could be used underneath pattern instead of on top of it thus almost like lighting up the pattern in the foreground.

-A ripple effect could be used from the circles, deeply incorporating them into the pattern.

Besides hitting the library I also tapped into the wealth of resources available online. Here is a collection of some of the materials I found. Most of these fall under one of the three categories mentioned earlier.

Pattern inspiration

Pattern inspiration

 

 

March 25, 2013
by admin
0 comments

Interactions explained

I thought it might be worthwhile to go over the interactions that I’ve designed for the app and explain why they are what they are.

 

The current interaction architecture

The current interaction architecture

So there are 4 main levels to my app, the connections screen, the individual connection screen, your personal screen and settings. From conducting the experience prototype I identified the interaction that ensues as the most important aspect, the meat, of the application. This is the reason the first screen you see when opening the app has the connections on it. This is the screen that hosts the circles, thus shaped as a throw back to emoticons, that each represent a connection you have made. The maximum number of connections you can have has been limited to four to try and enforce the idea of having only meaningful and intimate connections. This screen is also the one that will change if one of your connections thinks of you. There will be a subtle pattern in the background that will be abstract but formed of the sort of lined curves that are used in the app to represent how you are doing. This background will be barely noticeable at first but will be coloured if someone thinks of you. This will be a stark and prominent change in the feel of the app and the only indication you will get of someone thinking of you, you will not know who of your contacts it was. This decision was made on the basis of it being an app that connects you to the most important people in your life and thus it won’t really even matter who out of those people thought of you. This is also a counter measure for silliness that might ensue from speculating “why person x didn’t think of me” etc. This also ties in to another idea I had during the ideation phase that I had to discard due to technical difficulties.

As the main screen of the app I have identified the “zoomed in” state of actually viewing one of your connection’s specific details. So to represent this when selecting a person by tapping on their respective circle that circle expands covering other elements. This aims to represent the action of concentrating, or zooming in, on that particular person. It is in this state that you can then see how they are actually doing, how they’ve been in the past few days, and think of them. I wanted to have these interactions happening at this stage instead at the other level as this enforces the idea of having this one-to-one moment with the person. It’s about giving that person your full focus for that fleeting moment. There will not be access to the persons full archive of entries but rather just maybe the ones from the past 7 days of the past 7 entries. This is a response to one of the concerns raised by the experience prototype that in their quite abstract format it will be hard to remember why a certain mood was added after a longer time period. A solution suggested by the participant was to add written tags to some of them but on further examination I have concluded that as the apps function is not to collect data or allow for reflection it is better to allow for a more carpe diem style approach. This means that instead of holding on to the worries of the past the app concentrates on supporting the people now, in the current moment. The apps main functionality is to be able to see how your loved ones are doing and through that understand better if they might need your support or not.

One way to reach out to the connected people is by “thinking” of them. This is similar to Facebook’s Poke functionality and is aimed to say “you are not alone”. To “think” of a person there is a button with the same pattern as on the main screen that you can tap and drag to apply to that person’s circle. When you let go the pattern will go from the thought of state to normal state by fading from noticeable and coloured to subtle. This is to mimic sending it off to that person and is the same interaction that they will see on their main screen but in reverse. I am also entertaining the thought of adding a slight sound effect to this, but this still remains to be tested. To get back to the screen with all the other connections you need to tap some where out side of the main circle (that is not the patterned circle obviously).

The connections are also given visual importance by having the two other main screens, the settings and your personal screen, sliding from underneath it. These are in a way parallel, so they slide from the left and right but not as important as the connections screen which remains visually as the “top” layer. The personal screen will have the canvas to draw on if a mood hasn’t been entered that day. After drawing it goes to a screen with a similar circle as for others, mimicking what your connections will see. Here you will also be able to flick through some of the recent entries but as like for the ones from your connections these too will be limited to the immediate history. The entries are about how you are doing on a bit more general level than just in that moment so the number of entries has been limited to one per day, hopefully thus getting people to reflect on their state of mind on a daily level.

March 22, 2013
by admin
0 comments

Design intervention

The feedback I got for the mark two prototype very much reflected what I had already been thinking. For a project that was supposed to aim to “delight” it was very much lacking in just that. There really didn’t seem to be much of personality. Even with the addition of the playful paper planes as a metaphor for sending thoughts it still didn’t seem right. One of the pieces of feedback was that at the moment there seems to be two forces fighting the one to do with the metaphor of emoticons and then the paper planes. I do believe that this is actually why it has felt that little bit wrong, guess it has been a gut feeling that something isn’t exactly right. So fueled by this realisation I decided that rather than trying to forcefully continue with something that isn’t working it is better to iterate and go back a few steps in order to find a better path for the project to continue on.

Armed with post-its and the help of a peer I went back to what is the main aspect of the application. Even though the paper planes is a nice metaphor it kind of diminishes the main purpose, connecting to your loved ones. Using this insight I asked and answered some tough questions about the app and by the end of the quite long session had a (slightly) new direction. Or rather had a clearer vision of the purpose and how to best support that. Ditching the paper planes metaphor and concentrating on bringing the forth the connection side felt a lot better.

Another thing I did during this project related soul search was giving the purpose and content of each screen a good think. Mirroring the fact that connecting to others is the main meat of my app the main screen, and the first screen that is seen when the app is opened, features visual representations of each person you have connected with. Besides those some sort of visual clue will be given if one of them has added a new update as well as some sort of change that represents that someone has thought of you. After giving this a think and discussing it with peers I decided that when someone thinks of you, you will not know who it was unless there is only one connection (then it’s hard not to know really). I decided on this after realising that in a way as the purpose is to only connect to the people you really care about (this enforced by limiting the connections to four) it doesn’t actually matter who of them thought of you. This way also hopefully avoiding some drama that might ensue from “he thought of me but she didn’t” type of thinking. When viewing the mood of someone I have kept with the idea of having to actively select them before seeing it. I am still very much intrigued by this idea of having an individual “moment” with each of the connections when viewing their entry instead of being able to see all of them at a glance.

Other aspect that isn’t as prominent but still necessary is an archive where the moods that you have added get stored. As a decision was made based on the experience prototype that this is not for reflective purposes a full archive will not be available. This also addresses the point raised during the interview with the experience prototype participant of the emoticons getting too abstract over time to really get reflective value from them. Also it can be argued that the information that your loved one was sad three weeks ago even though they are happy now is unnecessary. These are the reasons why I am limiting the amount of entries accessible to the seven previous moods added on both individual level as well as when accessing the moods of connections. The individual archive will be represented visually similarly to how the moods of the connections are represented.

The really big change is in the representation of thinking of someone. I wanted to go back to something quite abstract giving the emoticon/connection idea more room to breathe. After going through few ideas I came up with it being a visual change in the look of the app as done through a pattern. So the pattern could represent “thinking of someone” and change if someone actually thinks of you. Then while viewing the mood of someone you could “apply” that pattern to their circle thus thinking of them. A fade effect could be applied here that would then get replicated on the other persons screen (so the pattern fades-out when you think of someone and fades-in if someone has thought of you).

It is quite scary to have hit a wall at this late stage in the game, but suppose it is part of the thrill of a design process. I feel more confident now in this new direction and the next stage will be doing some research into the world of pattern to try and find some inspiration to start from.

March 22, 2013
by admin
0 comments

Mark 2 prototype

As I previously explained me and the platform that I was using to build the mark 1 prototype had an ugly divorce as I hit a wall with it’s capabilities. For the mark 2 prototype I tested a different one, this one actually allowing me to accomplish what was necessary. For the prototype I managed to get a lot deeper into the animations and interactions that I wanted. I also made some refinements to the visuals though never really was satisfied with them. It felt like something was lacking. Through the feedback that I got I realised that I had some what lost the intended tone of voice somewhere along the way. It had all become quite clean and sterile. Very much lacking in personality and delight, the things that I had definitely wanted to incorporate.

Screenshot from mark 2

Screenshot from mark 2

screenshot of an earlier version of mark 2

screenshot of an earlier version of mark 2

 

A big addition from mark 1 was an introduction of a visual metaphor for sending thoughts. In aiming for an identity for the app I played with the idea of the thoughts being like paper planes that I used to through in class to my friends sitting on the other side of the room. This seemed to resonate with the people I asked about this and so I incorporated it to the app. It was an aspect that I really liked but it never seemed to sit right in the bigger picture. The reason, pointed by the tutors during the feedback, was that this metaphor was very much in conflict with the already existing one: the use of emoticons as a reference. The feedback as well as the doubting feeling in my gut have gotten me to doubt the project. I feel like I’m at the moment hitting my head against a big and very real brick wall.

March 11, 2013
by admin
0 comments

Delight

A great word to describe the purpose of my app is delight. I want it to be delightful to use with nice interactions and few delighters/easter eggs hidden here and there. This puts the microinteractions in focus and I’ve started on a hunt to find examples of these. Here is a collection of some of my favourite ones:

 

Plume

Plume is a Twitter client for the Android market that sneakily changes its notification sounds to match festive time periods. For example during the Christmas holiday the notification sounds is sleigh bells.

 

Clear

A random quote displayed if the to do list is empty

A random quote displayed if the to do list is empty

The to do list app for iPhone displays an inspirational quote if you open a list that doesn’t have any items in it yet. There are also secret themes that get unlocked as you perform certain tasks. Like the night owl theme that gets unlocked by completing a list late in the night.

 

Carrot

A to do app with character. If you hit the “lens” of the app mascot it portrays a message. If you keep doing it the messages get increasingly angry until it decides that you are doing it because it is reacting to it and starts ignoring you. The app also get’s angry if you do not complete the to do tasks.

 

WTHR

The two states of the WTHR app

The two states of the WTHR app

This weather app changes the colour scheme based on if you look at it during the day or night.

 

Gmail

An app for the Google email service. If there are no emails the app tells you to have a lovely day. If there is no internet connection it shows a sad cloud.

 

Path

In the shop view of this social networking app when physically tilting the phone the items on the app “shop window” tilt accordingly.