Coffe Guide update live (plus statistics!)

The latest version of the Coffee Guide is now up on the Google Play store! Typeface change and two more coffee types are now live: Caffè Mocha and Caffè con Panna.

When checking out the developer console I noticed I've gotten three downloads in Iran, and quite a few more outside of Sweden, which is really cool!

Coffee Guide mini-redesign

When I first outlined the sketches for The Guide to Italian Coffee, I wanted the feeling to be a little notebook that you kept in your pocket. The typeface in the logo was supposed to reflect this with an old-school serifed typeface.
Since then I've become more and more unhappy with the look of the application, and after being inspired by the creators of Pocket Casts on the Iterate podcast (via Android Central), I wanted to explore using Roboto as the typeface for all parts of the application. Throughout this morning I have tested different font weights and sizes to get the right feeling in the application, as well as been amazed that the Roboto typeface, after what I can tell, still is not included in the Android SDK, and has to be added manually.
I also did a tweak to the left margin for the descriptive text, which I found didn't work out at all.

On the above image, the current Play Store version is to the left, and the adjusted version to the right. I'm now waiting to write up and make assets for two more types of coffee (Caffè Mocha and Caffè con Panna for those who are curious), and then I'm ready to upload a new version.

It's really interesting to see the two screens side by side like this, and the complete difference in colour reproduction: it makes me wish I hade more cash so I could get a bunch more devices to test on.

Work sample, and more excuses....

I'm now doing project work for a Malmö-based company during the days (and sometimes into the nights), which has unfortunately slowed down the speed of my own projects, as well as the update frequency on this very blog.

Throughout the weekend I finished up a work sample that I did for a company to which I have applied. The task was to identify critical flaws in the design of the Internet Explorer 9 view called Organize Favorites, and to propose a design iteration.
My process ended up as two separate suggestions, one for the short term, and one more future-proof. In general the bookmark managing view seems to be forgotten, so one of my proposals enabled you to do all of your managing tasks in the bookmarks bar instead:

(Click for larger version). (Sorry about the formatting!)

I also had a more conservative design suggestion, in which the view more acted and looked like a regular file explorer. I removed duplicate functionality, and suggest using single-click on arrows, double-click on folders, to expand, in comparison to the single-click to open that's still there even in IE10:

If you're interested in more details on this project, including a detailed account for the process, please read the document linked HERE. Preview below!

I'm still here

Life has gotten in the way of more blogging for the moment, but work continues nonetheless.
Below is a screenshot of the application developed by me and Thomas for displaying altitude information.

The thought was to use the sea level, the darker blue area, too indicate your altitude. The higher you are, the lower it gets in relation to your phone. We think of the phone screen as a window through which you can view the world and this relation, and that's why the level is low at an altitude of the (quite) high level of 113 metres.

See you soon(er!) again!

Status update

Blogging slows down when work picks up, but I still want to share some status updates.


Ball Game
The ball game prototype is now abandoned by us, as the game engine we used didn't handle bouncing(!) very well. This came up as one of the main criticisms during play-testing. Instead of moving on to another engine we decided to move onto other projects. I still think this was a interesting concept in its simplicity though, and would like to come back to it one day, but for mobile.


Coffee Guide
I did some updates to the application during the week - one of the things that I was least happy with after the last layout change was the bad user experience on larger screens like tablets. The application has now been updated with a tablet interface, similar to the first version of the app (with a sidemenu for picking coffee type, and a main view to the right for showing information).

Screenshots of the Coffe Guide running on Nexus 7 (2012) hardware (sorry for the messed up layout)

Mobile website redesign
This has been ongoing throughout the week, but with no major overhauls, just a lot of smaller adjustments and fixes. The devil really is in the details!


NEW PROJECT!
We decided that, after abandoning the ball game idea, we wanted our next project to be for mobile devices, mainly due to the fact that we both think it's the most fun and interesting area to work within. One of my main draws toward mobile is their context awareness - you really need to design for so many varying use-contexts. You can also let the user and context influence the software in a totally different way than on our other digital artefacts.
Thomas mentioned his fascination with the simplicity of the new spirit-level in the iOS7 compass app, something I also have appreciated. After some discussion we decided to do something with a similar - take a simple data value, but present it in an elegant and interesting way. The data of choice fell on altitude above sea level: it's a value that is easily comprehended, but it does not at all have a significant place in most people's lives. Can we make something that can make this topographical property interesting to people?
Today has been spent sketching different ways to convey altitude in relation to a smartphone, but also to dissect the different components that are involved when actually being at a certain altitude, e.g. the earth, topographical features, the person itself, but also how you hold the phone in relation to the earth's surface.

One of many pages of sketching from this morning

We think we have dialled the design down to a couple of alternatives, so now comes the next problem. How do we test this successfully in a paper prototype-state? Is it even meaningful? Do you care about altitudes that you've never visited, if you just get them served to you in a test setting?
Our instant feeling is that we'll perhaps need to make this a longer test period, with a digital prototype, so that people can look at actual values, and to test how close we can get to the elegance of the aforementioned spirit-level app. We see this as a rarely used application, that mostly will be used when you're at an exceptional topographical feature (e.g. the top of a mountain or bottom of a quarry), so the testing procedure will need to allow for that as well in some fashion.


See you again on Monday!

Mobile website make-over, reconsidering

After a discussion with Thomas earlier today about the pros and cons of responsive web design, and the possibilities of implementing my mocked-up layout from last week in merely a CSS redistribution of content, I've decided to keep my current website, but make a lot of smaller tweaks. To quote myself from last week:

I've divided up my initial critique into three points:
1) There's too much vertical scrolling going on. The first view just contains an image of me until scrolling down. The situation is even worse with some of the subsections, with Where's Malibu standing out as especially aggregeous. The image resolutions and layout, together with the large amount of text about each project, definitely lead to a sub-par experience.
2) The menu situation is not very good for visitors not familiar with my projects (and who really is except me?). Why would anyone consider visiting any of the links? This shows that just making separate CSS for mobile does not get the job done, as you can't explore in the same way. The user cost of clicking the "wrong" item in the list is huge (in the form of a bunch of vertical scrolling, or taking a chance on another menu item).
3) A common problem across platforms is the lack of visible and understandable contact information.

Considering it, I realized that the amount of vertical scrolling was probably too much on my desktop version of the site as well. The amount of text for each project has now been severely shortened, and images have been replaced or resized to make the website a lot "shorter" on both platforms. This should alleviate some of the problems under bullet point #1.

For #3 I decided to add a standard footer to the website, in both versions, which now contains all relevant contact info, whereas before it was mashed up into the "About Me" segment.

As for #2, I think it still is the weakest point. However, with the shorter format the cost of clicking the wrong item is reduced, and the urge to use the menu at all should be reduced as it' should be fairly easy to scroll through the site.

Mobile website make-over, part 2

Work on my mobile website continued today, with a number of layout sketches. The main goal here is to minimize vertical scrolling while not introducing a series of clicks (slideshow-style).

After about ten different concept sketches, tested on Thomas, I decided move on of the concepts on to the phone instead, in the form of a .png mid-fi prototype:

I'm not certain about this layout, as there might be too much going on, with the text overlaying images. It'll be interesting to get some more input on it though, as it makes for a compact layout.

One of the more difficult things is to determine how a elegant solution for switching between mobile and desktop versions can be done - along with the best way to display what is the current view.

The Larmen.com Guide to Italian Coffee - work continues

After listening to people who have used the Coffee Guide I decided to make a few changes. In a regular process this would of course have been tested in-house, before the application was uploaded to Google Play. When I run into a friend or acquaintance it's easier to just direct them to the Google Play store though, so it very much encourages spontaneous user studies.

One major point of user complaint was that the view is erratic in where it places the headline of the coffee type in relation to the content. Often times, the headline (coffee type, e.g. Cappuccino) gets hidden above the screen, and you get transported to the middle of the content instead. This seems to be due to the operating system not knowing the size of a particular view before scrolling to it. I've tried to remedy this by using the built-in system method smoothScrollTo(), and sending it to the headlines position in the view. This did unfortunately help in any significant way, so I'm going to call in support from a friend on this issue.

 The initial view. Clicking on Cappuccino sends me to the view below.

 The headline and content are both visible. Scrolling down a bit and clicking on the item Caffè Latte gets the below view.

The headline of the coffee type is not visible.

Secondly, it turns out that the colors in the image are not as clear on the devices as I would have hoped when creating the assets. The blue color we chose for water for instance is too bright, and kind of melds together with the cup color. The same thing goes for the different shades of milky white.

What I wanted to achieve with the application was a navigational flow where the user would feel encouraged to explore the different alternatives. This goal has only partly been achieved, I think partly due to the issues mentioned above.

Mobile website make-over

Over the last few days I've been reading Mobile Usability, by Nielsen and Budiu. This has led me to finally get kicking with a mobile redesign of my site. When I first designed it, I wanted to have a quick-and-dirty site, aimed mainly toward visitors on desktop computers. The mobile website was, as in many other cases, an afterthought, which is painfully evident.

My website on an iPhone 4S

I've divided up my initial critique into three points:

1) There's too much vertical scrolling going on. The first view just contains an image of me until scrolling down. The situation is even worse with some of the subsections, with Where's Malibu standing out as especially aggregeous. The image resolutions and layout, together with the large amount of text about each project, definitely lead to a sub-par experience.

2) The menu situation is not very good for visitors not familiar with my projects (and who really is except me?). Why would anyone consider visiting any of the links? This shows that just making separate CSS for mobile does not get the job done, as you can't explore in the same way. The user cost of clicking the "wrong" item in the list is huge (in the form of a bunch of vertical scrolling, or taking a chance on another menu item).

3) A common problem across platforms is the lack of visible and understandable contact information.

Follow the progress of the project here, or straight on the website itself from your mobile device.

The Larmen.com Guide to Italian Coffee, version 1.1 - It's LIVE!

As the headline indicates, we're live with version 1.1. Please check it out via http://play.google.com/store/apps/details?id=com.larmen.coffeeguide!

The Larmen.com Guide to Italian Coffee, version 1.1

(UPDATE) Version 1.0 is now live on the Google Play store, via this link: https://play.google.com/store/apps/details?id=com.larmen.coffeeguide

After digging around the Google Play store, I hope that changing some details in there will make version 1.0 show up later today. If you're anxious, search the store for Larmendotcom, and it should show up together with our other application Where's Malibu. I'll update the post here when the app is up in the store.

In the meantime I've managed to do some user testing and found some valuable pieces of feedback. One thing that I noticed was that, as I've mentioned before, the starting page didn't work at all. Since I didn't want to replace that with placeholder content, I instead reworked the navigational structure. The view now consists of a list with clikable items. When an item is clicked, the item expands to reveal the content beneath. The whole area is then clickable to close the item again, or you can just click on another item to open that, and close the former (a behavior that seemed expected in my tests).

Alternative color scheme test. This was experienced as less legible, and is in my opinion not as elegant.

The old colour scheme, but with the new layout. Feedback from the tests indicate that perhaps a loading screen or something would feel in place the first time you run the application, as the information was experienced as very "in your face", and a bit overwhelming.

The same layout on a 1920x1080 screen. Following the rythm guidelines in Android, the elements will appear the same size (48dp) on all different screen densities and sizes.

This new version (version 1.1) is downloadable from here! Just as last time, the easiest way to install is to click the link on your phone (make sure you allow for installation from Unknown sources in your phone Settings). If you have any trouble, please let me know at http://twitter.com/larmendotcom. If you've tested any of the versions, please send feedback as well via Twitter!

The Larmen.com Italian Coffee Guide, further updates

No news about the Google Play situation, so I'll just keep posting updates here instead.
Some smaller adjustments made since last time: the typeface for the coffee descriptions was adjusted, a divider line was added to make the detailed coffee view more coherent, and everything was put inside of a scrollview. I was also experimenting with a frame around the descriptive text, which didn't work out at all. The final result is screenshot at the bottom below. I believe that the text body continuing below the screen edge should be enough to indicate the scrollable nature of the view.

Ideally I'd like to have another version of the application developed and testable before deciding which one gets to be the "final" one, with the navigational structure mentioned in my last blog post. To get there I have tested to different approaches, each with their own set of drawbacks: the first idea was to utilize the built-in ExpandableListView class in Android, and have each Header (coffe type) item have one child (their descriptive text). Since that setup is built more for a categorizing I came into some complications, which led me to the second approach of dynamically hiding and showing content in a regular ListView.
More to come on that..!

The Larmen.com Italian Coffee Guide, Google Play update

For some reason the application is not up on the Google Play market yet, despite it being set to status "Published" in the developer console. In the meantime you can download it from my Dropbox via this link. The easiest way to install the app is to enable "Install from unknown sources" in your phone's settings, and then visiting the aformentioned link via your phone. Alternatively you can of course message the link to your phone via the messaging service of your choice. Nerds like me will just push it via adb shell :)

On a more positive note, I today had the chance to perform some observation of first-time users of the app. One thing that's apparent is that it is not at all clear enough that the starting screen coffee cups are just there for illustrative purposes. This leads to maybe 15-20 seconds of pointless tapping on the screen before heading up to the upper left corner to get to the menu. This will be the first thing in the order of business for the next version.
As I see it I now have some alternatives, in the order of time commitment from quickest to slowest:
a) Make the coffee cups to links to actual content (creating a number of other problems)
b) Re-design static starting page to more clearly indicate that it's not interactive (waste of space perhaps?)
c) Displaying something else on there (my original plan was to perhaps have photos or interviews, etc.)
d) Redesign the whole navigational structure (which I'm not very happy with), and design something that makes sense in just ONE layout, something I practiced while sketching a media player for an internship application (see below)

Testing and reworking will continue throughout the coming week, keep your eyes peeled!

The Larmen.com Italian Coffee Guide, part 4

Today was spent in crunch mode together with Filip, and it certainly payed off in the end: The Larmen.com Guide to Italian Coffee is now uploaded to the Google Play Store! It should be up in a few more hours, and I'll update this post with the link as soon as I can see that it's live.

We still have a long //TODO-list, and a potential navigational re-design in the works, so stay tuned!

The Larmen.com Italian Coffee Guide, part 3

Today work continued with another pass at asset management for the Coffee Guide-application. Inspired by a talk by TAT founder Hampus Jakobsson, who encouraged us to "release, release, release" I've decided to get a working version up on Google Play, before possibly developing and expanding the application.

This is mainly a way to get user feedback. Although late in the process, I hope to get as much constructive feedback as possible. I do realize that getting user feedback this late in the process requires special tools - during my thesis we tested two differing mixed-fi prototypes, and tried to get feedback via comparison. I think I'll go for a similar approach with the Coffee Guide. This also seems to be the most common case in the industry, where most software is iterated upon, not created from scratch.

As per usual, the differing screen sizes and densities prove to be a hassle on Android. Luckily Filip once more jumped in to provide assistance with asset creation, and also whipped up a nifty Photoshop script to down-scale in steps from the largest xxdpi bucket and going lower. As the image indicates I had some emulator fun, testing all the fresh assets.

My ambition is to get the app ready for the Career Days-expo here in Malmö on Friday the 18th of October. Something to show off has to better than nothing, don't you think?

Ball Game, game design part 5

Ball Game (previously known as Prince) is still underway. After playing an unhealthy amount of Peggle, and becoming infatuated with the slow-motion effect when you're close to hit the last orange peg, we decided to implement something similar into Ball Game.
Three more levels were tweaked and added today, and one of the old levels was replaced (it was too similar to another one). We've started to come across larger and larger design challenges when it comes to timing in the levels, so next thing on the to-do list is a permanently displaying trajectory tool, so that we can figure out if the levels ar beatable or not without doing a huge amount of math.

As always, click on the image to play (via my website)!

The Larmen.com Italian Coffee Guide, part 2

Squeezed in some Android fiddling during lunch, and managed to figure out what the layout problems were all about yesterday: if you have an image where the resolution is wider than the screen, it will (for some reason) fill up the whole parent container. Or at least it seems that way. My problems disappeared when shrinking the .png-file to the correct size for my HDPI screen.

I'll keep you posted on further progress (as usual)!

Bollspel, game design part 4

Another day, another line of code!

Today Thomas and I introduced moving objects into the world of the bouncing ball. This requires a larger sense of timing when you play, and we feel that it's a nice addition.
As usual we've spread the link around to as many people as possible to get feedback, on Twitter, Facebook, mouth to mouth, etc, and we sure would appreciate yours!

We've unfortunately just had a few testing sessions where we've actually been able to observe people playing. Despite the low number, we feel that one important part of feedback that came out of that was that people want to be able to measure their progress in some way. We've sketched a few different scenarios, introducing a bounce counter, reset counter, timed levels, etc., and ended up with a reset counter. We are very interested to see what kind of different player behavior this elicits (we've already started seeing changes in our own play styles).

For another take on today's work, please check out Thomas tumblr here!

The Larmen.com Italian Coffee Guide, introduction

Since the decision to move to a more personal format with the coffee application, I've done som write-ups on the most important coffee types in my opinion. I want to user test the application with side menu navigation before doing any bigger changes, but it seems to me that I might have to go back to the drawing board. There are just too many different types of coffee :) This clutters the menu with a bunch of alternatives all starting with the word Caffè.
In addition to this I'd like a space in the app that maybe in the future can contain some other type of content, like images, reviews, etc.

Work has now been stalled, since I've come across a weird layouting problem in the xml-layout for the fragment that displays the information about the different types of coffee. When moving a ImageView to the top of a vertical linear layout, it takes up the whole screen, instead of using it's assigned property "wrap_content".

When placed at the bottom of the screen, it works just as it should, with first the headline's TextView, then the description's TextView, and then the ImageView (all with layout_height = "wrap_content").

Luckily I've enlisted the help of friend Filip Ivansson to help out with the illustrations for the content. He's now created the base shape for the three different sizes of cups that should cover almost all of the common types we want to add to the app. His work with the espresso can be seen in the photos above.

PS. I'm sorry about the layout of images on this blog, I'm not sure what's up with Blogger's image import settings.

Bollspel, game design part 3

With Thomas back from his mini-vaction in Poland, work continued on the game.
Brainstorming is not my favorite idea-generation method, but we did some of that on our own, and combined our ideas with the feedback received from a bunch of Facebook comments I received when I put the link up on there.
After a bunch of papers scribbled full with ideas, we decided that the next set of levels will incorporate moving obstacles. We're trying to introduce game mechanics one at a time, and want timing to be a larger part of the play experience.

I've always found paper prototypes of digital games to be a bit unreliable in what they can tell you about an idea, since games often rely on things like different physics, control input, and feel. Having quick engines like Construct 2 in some ways also alleviate the need for paper prototyping since mocking something up is so quick and easy.

We are now done with nine levels in magenta, and nine levels in orange, with the ambition to continue this pattern of nine levels for each new world we design. Please play and leave feedback on Twitter here.

Click screenshot to go to the latest version of the game.

The Hipster's Guide to Italian Coffee - follow up

After one and a half day of working with the coffee guide I realized that I had to always fight an urge to editorialize the content in the application. Instead of fighting it I've now decided to give up, and instead of doing a regular coffee guide, I want the content in the application to be more from my perspective. This also lead to a reconceptualizing of the application to perhaps not only include different types of coffee, but also reviews, interviews with people working in the coffee business, etc.

Apparently this project will now become a bit larger than I initially envisioned, however this new direction actually feels something I'm a lot more passionate about. I'll keep you posted!

The Hipster's Guide to Italian Coffee, intro

For a while now I've wanted to develop a digital guide to Italian coffee (one of my big life passions). I've had the silly word-play title "The Hipster's Guide to the Galaxy" kicking around for a while, and decided that the Italian coffee application could fit under that umbrella.

Real concept development of this idea started last Friday, when I was sketching ideas for how to navigate through all the different types of coffee, and considering the hierarchical structure. Based on experience I gathered during my thesis project (here), I wanted to encourage a exploratory navigation through the application, and probably a flat hierarchical structure.

I realize that this is not a new app-concept, and have already checked out a few of the ones that are available on Google Play. However, those are often pretty utilitarian in their looks, and at least a few of them seem to be aimed more at the home espresso machine owner, than my target group: the trend-sensitive hipster that wants to stump the local super-smug, fixie-riding, arm-tattooed barista.

This left me deciding to go with a side-menu navigation, with a list of the different types of coffee. Since I want the app to be a bit eye-catching, rather than utilitarian, I decided to test out a few different graphical styles. I played around with different illustrations as well, but couldn't really find the tone. In the end I found this inspiring poster on visual.ly called Exceptional Expressions of Espresso, by the Pop Chart Lab, and decided to incorporate that into my prototype, just for mock-up purposes. The idea is to replicate a similar kind of visual language going forward, but with illustrations that are a bit more flat (and of course non-copyright infringing).

Final result after almost two days of work can be seen below:

TODO:

- user test on someone (urgently), something that's difficult when you're home alone developing

- add a bunch of more variations of coffee, and also expand the descriptions

- replace all the "borrowed" material from the coffee poster with my own beautiful Inkscape-products

PS. If you have the IP rights of the poster, and you don't want it featured on this site, drop me a line and I'll remove the images.

Bollspel, game design part 3

Today has so far been filled with thinking about keeping the player in the "flow channel" (discussed here, among other places). After Thomas' observations of his girlfriend playing we can conclude that the player behavior is (of course, as always!) different from what we had expected. So how do we design more levels, which bit by bit should raise the difficulty level, while at the same time allowing for a number of different play styles?
Expect a follow-up later this afternoon / tomorrow.

Bollspel, game design part 2

Day three of our tiny game design workshop: since we've experienced a number of problems with the bouncing(!) in the Construct 2 game engine, Thomas has started to mock-up a prototype in Unity, to see if the physics there work better.

In the meantime I've put together another level, and cleaned up the graphical look. Gone are the block dividers, that made the game resemble the old Windows 95 game Chip's Challenge.

The first draft of the game is playable at larmen.com/bollspel

Bollspel, game design part 1

Together with Thomas Rogowiec (blog here), we started to develop a game based on a simple concept proposed by him. The idea, quite simply, is to shoot a ball through a room, and out via an exit. The project started yesterday afternoon with some concept sketches, and today developed into a first primitive digital prototype with six rooms. The digital prototype was quickly put together with the use of the quick-and-dirty game engine Construct 2.