A g r e a t i d e a m o t i v a t e s y o u ,
t o g i v e a d a m n ,
t o n e v e r g i v e u p
a n d t o o n e d a y s e e i t a l i v e .
Make it Great.
Piction is a service that takes your image and adds survey type questions to it in a page which you can then share to anywhere on the web. Its used as a very light weight survey tool when you need peoples input on something you’ve made. This project sprung up as a side project from Photic.me as a lightweight alternative for people wanting to use their own network to get feedback.
How it works.
We love simplicity in our projects and Piction, is a very clear example of that. A simple welcome screen directs you through the upload / linking part in a smooth, well tested process. After you’ve got your image into place you proceed by creating some questions to go along with it.
There are simple comment questions, rating questions and choices questions. There is also the option to add a comparison image. After you’ve decided on the questions you click Finish to create your survey page, from which we help you with sharing options. And that’s it, you now have your own survey page.
Piction was an interesting approach and many of our users had never seen the concept. Innovation is funny that way, it may seem obvious for a web developer that there are many traditional things we do on the web that would be very easy to improve – but its not always that easy. Piction at first had a very innovative registration process that did almost everything without the user even noticing it – when you had submitted your image you all of a sudden had a new account. We thought, this is surely easier than that old fashioned register form.
But to our surprise our users did not like it at all. There was a lot of confusion and the lack of transparency caused them to doubt the service. People where actually looking for the old fashioned registration box even though we told them they didn’t have too. Innovation is a careful balance between old habits and new ways.
Piction taught us a lot about innovation and user perception – which is everything. We want to thank our user base for contributing and ironing out all the details to produce the refined beta version we now have online at Piction.it. Thank you guys – we had a blast!
I’ve always been interested in quantifying progress, having been somewhat of a fitness buff in my earlier days a workout manager was a very interesting target.
How it works.
Workout Manager was built to be a very fast entry workout tracker so the first part of it is the workout entry part.
The workout input takes inspiration from a spreadsheet with sets and exercises being visualized through horizontal and vertical space. To make this easier and faster it works very well with keyboard input. TAB creates a new set with weight and reps and ENTER creates a new exercise.
Another interesting aspect was the concept of Progress points. To be able to quantify progress we analyze the difference between workout instances and figure out how much stronger you have become. This analyze is of course not exact but an estimation based on the ORM calculations.
The workout manager is one of our first applications and therefore is based on Flex which is a Flash framework, which made it insanely easy to create applications in a structured way. We used a fantastic MVC framework called PureMVC. In the backend there is good ‘ol CodeIgniter - our absolute favorite PHP framework.
A big step.
Workout Manager was a very big step for us into development of larger applications and we learned a lot about systems, optimizations and user psychology.
There is nothing I respect as much as a self-made individual with a high level of artistic integrity. Looking at the photos Sara has taken I knew this would be a challenge of giving her a presentation that matched the quality of her work.
Theme and Motive.
The motive with this project is obviously presentational and it was always clear to me that the theme of the site should be “photos speak louder than words”. With this theme came some very important responsibilities:
- The photos should never have to compete for the attention of the user
- The communication from the site to the viewer should (as much as possible) be made through the photos
- Every decorative element of the site must serve to enhance the viewability of the photos
Elements of the Site.
The first thing to greet the viewer of a photographers website should be a presentation of his/hers best images. Hence a slide presentation of her chosen pictures was a given. But I also wanted it to be more than that. The images should communicate a little more clearly – which we managed beautifully with one simple line of text inside each of the photos. Positioning inside allowed me to avoid the differentiation between text and image, and therefore to communicate a more unified message.
The gallery is designed with the same principle in mind – communication through images. It is at first a set of categories displayed by a big, very clickable thumbnail. This leads into the actual gallery which is designed the exact same way as the category screen. Simple and to the point.
The blog was a very interesting problem to integrate into the theme. Here again I used thumbnails with text inside them as the blog feed list. This goes back to what I said in the beginning - the images should tell the story.
The navigation is overall very silent, not to steal any attention away from the images and I instead rely mainly on positioning to convey the functionality of the navigation. The logo was easy: clean, clear and simple.
As I stated in the beginning, this project was a very rewarding experience, a lot of hard work and we are both very proud. There is no doubt in my mind that given some time Sara Elin Photography will be kickin’ ass and taking names. I’d wish her good luck, but from the looks of her photos she won’t be needing it.
Being huge fans of Blizzard Entertainment we got really excited when we experienced (from the audience in BlizzCon 09) the Starcraft 2 announcement. And now almost three years later Starcraft 2 is rapidly evolving to the top among competitive gaming. As a thank you to blizzard we decided to throw together a minor application to help the Starcraft 2 community.
What is it?
Its a very simple and slick Starcraft 2 unit reference for the players to get fast access to the stats for each unit in the game. Its not a full fledged lexicon yet as we decided to keep the scope as slim as possible. Non the less its a very useful tool if you only need the basic stats for a unit – if you want more I would recommend you visit Liquipedia.net.
Technology wise we decided on Flash / Flex mainly because the tooling and the impressive speed of which you can crank out a good looking, useful application by this technology.
To acquire the data we used a custom spider to query starcraft 2 sites about unit data and then parse and clean the information before we pass it into our database. Our back end technology for this project is PHP.
Design wise the application is made to reflect the Starcraft feel but this time stripped of any unnecessary decorative graphics to give it a cleaner look. Read more about the design choices here – Yes, form does follow function.
Thank you Blizz!
Finally we want to thank the starcraft 2 community for helping us with feedback. Lastly: Thank you Blizzard for all the good times you’ve given us!
Now there are many photography communities out there and many of them do offer ways of feedback – generally through the tried and true comment-box. The quality of feedback however is seldom more than one line of praise, a “Wow, nice photo” or “Great pix!!”.
For some I’m sure this is just enough, but there are photographers who would rather have someones honest and specific opinion. This is why we decided to create Photic. To create a place where you could get feedback from photographers you respected – to grow as an artist.
How it Works.
You sign up for an account and are then greeted by the photo feed, where all the requests (the photos that are up for critique) are listed. By giving your opinion on another persons photography you can be awarded stars (provided the photographer behind the photo think’s your opinion was helpful). Conversely If you upload a photo you’ll get 5 stars which you can award the people giving you critiques.
By giving helpful critiques and gathering stars, you earn titles and can unlock more features of the site. This way we reward our most helpful users and motivate them to stay on, as well as providing high quality advice to the people wanting feedback.
Another principle part in the system is the way that we modeled the critique giving. We made sure to employ as many psychological / UX strategies we could to make sure critiques are easy to give but also that they give a constructive impression and leaves the artist with a few new perspectives. Therefore the critique input is constructed out of 3 questions – What was your first Impression?, What did you like? and What would you do different? Answering questions makes the writing much easier and by first acknowledging what a critic thought was good about a photo, makes the critiquee more open to the advice.
This system has so far helped to produce some very high quality critiques and helps photographers improve their skills.
The heart and brain of Photic is created in CodeIgniter, which is hands down our favorite PHP framework – hats of to Ellis labs.
This wassnt our biggest project, but it still had a lot of different modules to make it work. The thing to note when you are developing your own applications, and building a user base is that things like analytics and channels for feedback has to be custom designed too. Among the many things that power Photic, big components are:
- Ajax based live chat
- Ajax image uploader and cropper
- Star currency system connected to an auth-system for feature unlocking.
- Critique system and a Profile.
To sum it up, Photic was an amazing project that taught us a lot about usability philosophy, modular architecture, gamification and a lot of other things.
But most of all it taught us how important the end value is. That at the end of the day, if we can do only one thing – it should be to make sure that when a Photic user closes the lid of his laptop he should feel like he gained something. If our users gets value from what we do, we’re making the world better – even if its just a little bit.
Hi, I'm Hampus and I'm a freelancing "web guy" currently residing in Auckland New Zealand.
I've been designing and building for the web since I was very young and has always found the experience extremely rewarding - which is why I decided to do it for a living. As a designer I love simple, tightly integrated products with a high level of attention to detail. My expertise is taking an idea from its early stages, iterating and developing it through all phases of web development to create a final product.
My skill set is developed in every aspect of web development from concept development to design to programming. Which comes from many years of experience in iterating through every part of building a website, community or web application. I also think I'm quite a good communicator (a skill I developed by much trial and error) which I see as an integral part of any project - making the customer or client understand and be comfortable in every stage of the development.
I get very excited with new ideas. And developing those ideas through all of its phases is what I excel at. It's the idea of that final product that’s been affected by the efforts of all parties involved that really motivates me, especially if its new and innovating.
I also spend a great deal of time investigating productivity methods, I just love life hacking in general and I believe there is a sense of that in the best products I've made - all created to help people achieve their goals easier, whether it be workout management, photography or note taking.
Don't hesitate to contact me in any of the ways listed below if you like my work, I'm here to make ideas into great products.
If you're interested in more detail about what things I've been doing over the years you can download my resume right here, and have a look.
Do you have an idea, some questions about my work or just want to talk about web design in general - throw me an email, I'd love to hear from you.
If you feel you'd want to stake me out before having a chat, there are a few places I've been known to frequent. Google plus and Twitter is where I spend most of my "social" time so those would be great places to start. I also hang in Skype about 50% of the day, if you are the kind who prefers more direct contact. Anyway the point it is - no matter how you'd want to get a hold of me, there is an option.