What is Clooger?
Clooger is a treasure hunting app. The treasures are coupons and unique offers from stores and nearby shops. Coupons are scattered around nearby locations, to ‘discover’ it, you just have to go to the location indicated on the map and it is automatically added to your app. Once the coupon is in your possession, you can use/redeem it or share it, by giving it away to friends or others in need.
A unique and fun way to bridge the gap between customers and companies, Clooger is a modern way for the latter to advertise. Completely free-to-play for users, Clooger encourages positive activity — just like a pedometer’s 10,000 daily step goal might encourage people to take that extra detour to reach the milestone, Clooger also gives people a reason to spend some time outside (take that detour and pick up that coupon!) and increase their well-being. The option of sharing and community involvement gives this project a social dimension with the ability to interact and share with others.
A great project and a great idea, Scandiweb was approached to come up with a great design. And we did just that.
Our goals & tasks
Scandiweb was called upon for rebranding and app redesign, which would enable Clooger to compete on a global scale, by making it stand out.
From restructuring the current app functionality to adding new ones, working out a UI/UX strategy, improving visual solutions and creating a global concept, Clooger’s identity rested on our shoulders.
Or to put it more concretely, some of our primary tasks were Logo development, App wireframes, Font selection, Illustrations, and UI examples, each of which we’ll go through right after we take a brief look at the first step of any such project — research.
Since it’s a fairly unique concept, we did not have concrete competitors to analyse, hence we explored those with similar functionalities. This served as a foundation for how best to translate these functionalities in Clooger.
We then explicated some brand values, to align the team involved & create a concept which we want to deliver to the users. We came up with the following 5 brand values to articulate Clooger’s direction:
Moving forward, we created a mood board — a selection of colour palettes based on the feelings commonly associated with things such as adventure and experiences
As a result of these preparatory and research steps, we had a clear understanding of the direction & message of the application. We also had some technical foundation to base the progress on, in terms of colours. These would underlie all further development.
1. Logo Development
Coming up with a new logo took a while. Clooger’s original logo wasn’t very eye-catching and it also was in a different colour. It did, however, have a clever design with the use of the letter C and our first idea was to replicate/improve on this idea.
In the beginning, the idea of the Clooger logo redesign was to keep the C letter with the radar symbol but to shift the style of the logo, so it would be modern and the logo would fit to be an app icon.
We did a colour rework. We also experimented with the form, so it would be in the shape of the compass and geotag icon — things that directly associates with adventures and traveling.
While we were quite satisfied with some of the options, the logo failed in terms of memorability and the cleverness of it would only be appreciated by those who knew what’s happening and what is the message we’re trying to deliver.
So, we made a one step back and started over with underlining what Clooger is — app for active, fast, flexible and curious users. That is where the squirrel image came up!
Stage #3 cont. — Final logo
The final Clooger logo design is a jumping squirrel that is ready to go for an adventure and find those desired treasures in the shape of the nut.
Research shows that logotypes with animals are memorized 34% better than others. Besides that, it perfectly reflects the functionality of the application!
2. App Wireframes
Wireframes for the Clooger App are based on a User Journey flowchart created beforehand, as well as the data gathered by the research, and combined with the client’s wishes.
Some of the app wireframes
3. Font Selection
Initially, we chose the Cera Pro font, but it did not fit all the requirements outlined by the client.
The main requirements were for the font to be supported by a minimum of 7 different languages, and it should be neutral, modern and scalable, as well as look good on all screens.
In the end, we opted for the Sans Serif font Roboto, since it fits perfectly given these criteria.
Through iterative testing, we created multiple versions of illustrations. Experimenting with the playfulness aspect of the app, we created illustrations to reflect this. In our experimentation, however, we went a bit too far, making the squirrel very cartoonish. So we dialed it back a little and ended up with something more universal, more recognizable and less cartoonish, without eradicating the playfulness dimension.
5. UI examples
The name of the game for this project (and most others we do as well) is iteration. The UI was no different. Here are two examples of how the Coupon and Map screens evolved into their final form.
First, we tried to simply play around with the existing content and see if we could make it work, however, we soon opted for something more modern and elegant. The second step was all about UI and layout adjustments. At the third step, we worked on the colour palette and graphic elements, adapting the progress to match the foundations established for this app previously. The final step consisted of analyzing our previous work and adjusting all the UI elements in order to make quality design.
The first step was creating a map per request of the client, including all functions and elements listed. Agreeing that the first version needs some revision, we then proceeded to adjust the screen and remove unnecessary elements and buttons. At this point we were faced with a technical problem — for most cities, Google doesn’t support 3D maps, meaning the concept had to be changed. The result — a nice looking, simple map, reflecting the colour palette and feel of the app. It is also very minimalistic — all the primary functions are grouped under the home button!
Results & Conclusion
We created a modern and well thought-out design, based on detailed research and information gathered on what works and what doesn’t through iterative testing. In the end, we got a quality product, that is capable of competing on the worldwide app market.
Applying Scandiweb’s well-established design project workflow really helped the process and enabled rapid-fire efficient & progressive solutions, which improved the development considerably.
In this article, some of the most interesting aspects are present, however, there were plenty more things that took place we haven’t shared — anything from the business and data research to extensive planning, to countless design iterations that didn’t make the cut. If you have any questions, don’t hesitate to contact us!
Check out our creative services here!
Scandiweb is a full-stack digital agency here to serve you in solving problems you might have. Design, marketing, eCommerce, technical development and more — if you’ve got a problem, let us know at email@example.com and we’ll get back to you, telling you how it can be solved!