Small things

Tiny but cool

Al Jazeera - News app proposal

TL;DR

I created a proposal for a complete revision of Al Jazeera's mobile offering. Unfortunately we didn't win, but managed to utilise some elements in the AJ+ project.

I devised a navigation model that doesn't use tabs or or back navigation at all, this allows quick navigation between article list, article detail, article actions and application menu views. This model seems suitable for mobiles as the interaction time when using an app is extremely short compared to, for example, this website. As attention span is short it's more important to see quickly the headlines, read the article and get back to the headlines again. 

Oh, remember those nice panoramic images from previous project I did for Al Jazeera? Well, they made their way in to this proposal as well, except here half of the image is used as the headline "thumbnail" and the other half as the header image on the article itself

MORE CLEVER THINGS

So, news are reported by journalists, but sometimes the readers don't have clue why somethings are happening in the world. Now in the days of Quora and Reddit, where users come together and communicate and explain things, it seems logical that the source of the news should allow the same. We imagined a similar type of service for Al Jazeera, where a user can discuss or contribute to an article. This isn't, however, an ordinary comments thread, but more like Quora, where readers can ask questions about the article and other users or the author of the article can answer to that. 

We do this by the following way:

"Superusers" are users who contribute much to the content. These users have privileges over ordinary users as they can answer questions in the Q&A sections and moderate contributions. They can also be asked by Al Jazeera to contribute content if, for example, they are in a location where a breaking news story is occurring.

"Contributions" are content created by the users. The contributions are multimedia in nature, meaning that they can be text, photos, videos or audio clips. Each contribution can be voted up or down by other users. The ratio between ups and downs determines the contribution's position in the list. The position of the user's posting adds up to her superuser score.

"Q&A" are questions related to the article posted by the users. This is because a lot of news have a background that is not obvious to all readers/viewers. An example question could be for example related to an article about South Sudan; “What is the reason for South Sudans recent independence?” Superusers and Al Jazeera correspondents and editors can answer these questions. These answers can also be voted up and down and add up to the Superuser score.

Outotec - Particle size analyser

TL;DR

I designed an interface for a stand-alone machine, that analyses particle sizes in mines from the slurry created in the mining process. This is an Electron app.

Role

I took care of the UX on my own and instructed both the visual designer and front-end developer to carry out my designs. There was an earlier interface running on a special version of Windows CE, that I studied carefully in order to understand how the interface should be built. My task was to re-design everything in the software to better suit a resistive touch screen input and make views and navigation much clearer. I took care of UX matters in direct communication with the client. I instructed the client on future UX creation, as this was the first new type of interface that will be implemented across the product catalogue in future versions, while moving away from old Windows CE systems.

The Machine

The machine needs to be explained in order to understand any of this.

Rock is mined, then the rock is grinded down until it's basically mud water or slurry. Reagents are added to the slurry and minerals are extracted chemically from it. For the mine to be efficient, the particles (the grinded-down rock) need to be of constant size. If they are not, then there is a problem in the grinding process somewhere. The analyser has three different lines coming in from three different grinders. The machine lets in slurry from lines one at a time and lets it flow through it. In the middle of the machine there is a ceramic "hammer and anvil" that trap particles between them and measures the size of the particle twice per second. This done for two minutes, after which the machine is flushed with clear water. The machine then checks that the "hammer and anvil" meet at value zero. Then the next line opens and and the process is repeated. It's about the size of Michael Jordan and features an embedded touchscreen.

What's going on here? So much stuff! True, but for a reason.

Let me explain

This interface needs to glanceable, since the user research showed that users in the mines don't need go so often deeper in the interface than the first screen, where they are presented with all the necessary information.

On the top of the screen is the main navigation arranged in tabs and then two buttons. The other is obviously info screen, but what's the other? Well, as this interface is installed on to a machine that sits in the part of the mine where the minerals are extracted, the environment is dirty to the extreme. Hence, the screen needs to be constantly wiped clean, but as it as a resistive touchscreen, (durable, can be operated with gloves on) the screen needs to be turned off to do the cleaning. So, that button turns off the touch functions and displays a counter from ten to zero, when the user can wipe the screen.

Each tab has under it a group of sub-tabs, shown later. The other tabs and their sub-tabs are rarely accessed and are mostly detailed views or the settings of the main screens.

On the left of the are all the assay assigned to lines and here it's where it gets complicated. See, the machine can measure different things like the acidity or alkalinity of the water in pH or particle size in micrometres or meshes or the slurry density. But assays can be heavily customised to catch any deviations that might occur. So the assays are custom in nature, that's why we gave them no predefined names, rather when the user defines the assays, she also names them.

On the right from top down we have first the machine state as text and then line control buttons. Let's check those later.

Then we have the machine operation animation. We are essentially looking at the profile of the machine on the top the light grey rectangle is the slurry inlet. You can see brown water flowing through it when the slurry is coming in. The various sensors are also marked on the diagram. the "hammer and anvil" is the last thing before the pH sensor. It will blink twice a second when measuring.'

The sequence clock

Image taken from the wireframes explain the lower right half of the main view. This the actual operation of the machine explained in an infographic. Let's see the customisation part to understand this better.

Configuring the sequence clock

The sequence clock was designed closely together with Outotec's engineers to get it right. All the switches in the UI are either on/off buttons or in this case three stage buttons. Here, they cycle through the lines. Multiple assays can be taken from the same line, which is most of the times a line is repeated in the sequence several times. It could be also that some lines simply don't produce as much as others. Again, this had to be designed as heavily customisable simplicity.

Intel Screensavings - Windows boot UI

Hoo-boy. This sure is a weird one. Intel can put stuff on computers before Windows boots up. They basically own that few seconds before ol' Bill's OS kicks in. So they asked us to make some kind of UI that would have sponsored content in order to lower the purchasing cost of the computer as well some very small user defined content. And it needed to be in 3D. And you needed to see the previous offers that were there the last time you booted up the computer. And it needed to act like an interactive screensaver if the computer had been idle for a while, hence the name. So... we came up with this one.

I did the UX and animation here. Direct quote from focus group testing: "It's like Ironman!" Very strange concept, I must say. Maybe all things designed are not meant to be.

Service design concept for stadiums

So we did a concept for a digital platform for stadiums and other venues. I was part of the team designing the service, which I then made in to this nifty little animation. Some of the graphics we bought, some I did.

Service concept for a digital real estate company

This is a whitelabeled concept of a digital real estate company. I did the concept, script and animation directly with our lead designer and art director, not even bothering with the wireframes. This concept was used by an un-named company for their internal purposes.

"Well, that was some experience. Now just let me adjust the spatial controls and we'll move to another observation point."

-Forrest J. Ackerman