Tag Archives: case study

Toonie Alarm UI design

Case Study: Toonie Alarm. App UI Design.

Designing a product for everyday use, it is vital to ground it on the thorough market research, thought-out design presentation and deep analysis of the target audience. No wonder: the stuff like note-apps, alarms, to-do lists, calculators, calendars and the like surround users in their everyday life, help in common situations and sometimes add color to the routine. We have checked that well and now would like to present you the first case telling the design story of the brand new alarm app for iOS called Toonie Alarm which today is featured on Product Hunt and has reached top-5 in the category Tech in 4 hours after featuring.

 

Toonie Alarm UI design

 

Task:

 

Full-cycle UI/UX design for the simple and engaging alarm app for iPhones.

 

Process:

 

The design process for this case was different from typical ones in the studio as before it we had worked more on outsource projects which means that creating initial product concept and setting the task was done mainly by the client’s side. The process for Toonie Alarm took the other direction and gave us what it was set for: the feeling of full product creation process from the very first steps. We had to set the idea and test it competitive potential, establish its USP and marketing plan, branding and usability foundation and all the other stuff like this.

 

Initially the idea behind the app was to create a simple alarm clock with attractive design and consistent element of motivation and support for such a basic and often far-from-pleasant process as waking up. The basic brand image was set as fun, cute, bright and cheerful, and marketing research supported this concept with the analysis of competition and ideas on adding original features to the app.

 

User research and analysis enabled the team to form the USP for the product on the basis of the following set of key features:

  • All the features of the app free for everyone
  • Simple, clear and intuitive navigation
  • Bright and pretty interface
  • Huge set of beautiful stickers
  • Achievements and rewards for waking up
  • Eye-pleasing interactive animation
  • Animated time picker
  • Instant sharing achievement with friends.

 

Let’s look over the details of UI created by Tubik designers.

 

Cute Mascot

 

In one of our previous articles we have already mentioned the great role of mascots in branding and UI design. As for Toonie Alarm, the idea of applying the mascot was set almost instantly as mascot is not only a sort of communicator between interface and user, but also a great representative of the brand able to enhance its recognizability. Moreover, it has a great impact on easy establishing the voice and tone of the product, creating the feeling of natural communication and supporting the mood. That was the point when Toonie was born to be a funny cheerful bird, whose mission is to make the world  brighter and help users to interact with the alarm. It informs users about news, rewards, errors and just adds some fun and color to everyday life.

 

Toonie Alarm mascot design

 

toonie alarm mascot design

 

App Tutorial

 

App tutorial is an important part of the interface which helps users to get informed on the basic interactions. In Toonie Alarm it consists of three screens that tell the user about the functionality of the app. Small concise copy blocks are supported by smooth and pleasant animation of transitions to create the feeling of integrity and cheerful mascot featured as the consistent element and the center of the screen graphic composition.

 

Toonie Alarm Tutorial design

 

Home Screen

 

The home screen shows the alarms which user already set for particular time and days and the tab with funny stickers already collected for waking up. Active alarms toggles feature the animated sun. Left swipe opens active options for the particular alarm.

 

Toonie Alarm UI design

 

Stickers Screen

 

Various stickers become the reward for waking up at the particular period. Moreover, waking up several times at this time, users can level up their stickers and enrich their collection. All the stickers can be shared to social networks to mark users’ achievements.

 

toonie alarm stickers

 

Toonie alarm stickers screen

 

Time Picker

 

Another prominent feature of the app is the animated time picker. The app has simple navigation and nice motion makes it even more intuitive. Picking time for the alarm, users can enjoy animated march of night and day.

 

Toonie Alarm time picker screen

 

Animated Stickers

 

Animated stickers make interaction even more lively and enjoyable and also enhance user experience making the interface attractive and playful.

 

toonie alarm stickers

 

Logo Style

 

Logo design keeps style of lettering associated with fun and entertainment and creating harmonic link to the fonts typical for cute cartoons.

 

Toonie Alarm logo

 

Product Video

 

To catch more details and see the interactions with the app in real, welcome to review the video guide on Toonie Alarm.

 

 

You can also review the presentation of Toonie Alarm design on Behance or check full pack of the details via Toonie Press Kit


Welcome to see full presentation on Product Hunt

Welcome to download Toonie Alarm via App Store

Welcome to see the designs by Tubik Studio on Dribbble and Behance

andre landscape tubik studio logo design

Case Study: Andre. Rebranding Logo.

Branding is never about just visual perception or verbal message. Branding is about the whole image people get hearing the name of a company or seeing its brand identity signs. So, designing the signs and symbols which make a brand recognizable and transferring the appropriate message is a job with great responsibility. Still, there is one more stage of the process when this sort of responsibility get another shade. It happens at the point of branding redesign.

 

We have already published case studies with the stories of creating logos and brand identity concepts at the early stages of their business path. However, this time the story will have another flavor as we are presenting you the case of logo redesign for a company that is already recognized and actively operating on the market. The task was to create new brand identity not breaking already gained links and associations. The designer assigned for this task was Arthur Avakyan whom you probably remember from cases of Ribbet, Passfold, Tubik, Saily and SwiftyBeaver logos.

 

andre logo design by tubik

 

Task

Redesign of a logo for a commercial and holistic landscape firm Andre operating in landscape maintenance, tree care and design.

 

Tools

Pencil sketching, Wacom Intuous pen tablet, Adobe Illustrator, Adobe Photoshop

 

Process

 

First of all it was important for the designer to study the conditions and philosophy of existing logo functionality, details about company activities and business goals and customer’s wishes about the redesign process. It should be mentioned that redesign for existing companies and products can have different levels of breakaway from the existing versions: some companies decide upon fully new design which has nothing in common with the current branding, while others keep the track of changes carefully and gradually, with minor alterations eliminating the risk of losing recognizability on the market.

 

The second approach was taken as a basis in this particular story, because Andre is a company that has already won its audience on the market. That means any design change should be done with respect to the company’s history and philosophy as well as brand image grown through the years. Therefore, new design had to take its roots from the existing branding, but offer some refreshment and add some trend.

 

andre logo design case study

 

Certainly, to find the sign representing the brand, the designer needs to know as much as possible about the brand, its business goals and statement. Andre is a medium-size company based in the USA and providing all sorts of services linked to landscape care and design of any complexity. The company is family-owned so its name origins from the last name of the family. The customers wanted a new logo to be quite classic, memorable, enduring and setting the strong association with land care.  So, it was important initially to provide the visual sign that will instantly inform observers about the nature of the business and create positive vibes via harmonic combination of shapes and colors.

 

After the market research and getting deep into the requirements and background of the company, the designer worked over the first series of sketches and offered the first version for redesign. It was based on the round shape and featured green leaves as the central element of composition. The designer also selected the corresponding version for the name lettering so that it looked readable and harmonic in combination with the image, supporting it but not overloading general visual presentation. Combination of several shades of green with light blue set the image connected to key concepts of business activities: nature, landscape, plants, trees, sky. The designer applied smooth and rounded lines of different stroke weight and provided the variants filled with color as well as glyph one.

 

andre logo design Tubik

 

Another concept offered more linear and geometric variant also featuring the leaf motif and using a shape inside reflecting the form of capital A letter.

 

Andre logo design Tubik

 

Although the offered style was appropriate, the customers insisted on applying the mascot in the logo image. The choice was made in favor of a bird and the designer offered the graphic option featuring the bird as a logo image. It also was applying the form of the leaf in the image used separately, but in combination with lettering the leaf was placed closer to the letters.

 

Andre logo design Tubik

 

One variant of a logo featuring the bird mascot used the image with the shorter beak and an eye featuring the mimic expression of smile.

 

andre logo design Tubik

 

The idea of “smiling” positive expression was also tried in the variant in which the bird was inscribed into the circle. The beak directed upwards moved out of the circle setting the feeling of progressive flight, while the wing featured the form and visual marks of the leaf.

 

Andre logo design Tubik

 

The general concept of applying the bird in the logo was set and agreed upon, but the customer and the designer decided on trying another iteration experimenting on simplification of the bird’s silhouette to make the logo not only attractive and meaningful, but also clearly visible and legible in any size. This stage of creative search resulted in a new shape combining the visual concept of a bird and of a leaf in one image.

 

Andre logo birds Tubik studio

 

The final choice was made in this direction, which efficiently presented the mascot in clear simple forms, preserved color combination associated with the nature of the offered services and vibes of green and natural background.

 

Andre logo design final by Tubik
This case of logo design has proved once again that user research, market research, thorough attention to the customer’s requirements and inspired creative search together make a great basis for efficient, informative and attractive branding. Don’t miss the next case which will show the application of the described branding solutions on diverse set of branded items.

 

Andre logo design final Tubik


Welcome to see other works by Arthur Avakyan on Dribbble and Behance

Welcome to see designs by Tubik Studio on Dribbble and Behance

tubikstudio website design ui

Tubik Monthly Review. May.

The summer has come full of bright colors and moments of life. Traditionally, we start it reviewing and analysing what happened during the last month. So, let’s look together what May has brought to studio life.

 

The month brought out new shots published on Dribbble by studio designers: there were presented diverse design concepts of websites and landing pages, mobile applications, interface animation and character animation, lettering, logo and branding design. Follow the links if you are interested to see all the details full-size.

 

tubik studio landing page toys

Henderson — Handmade Toys by Vladyslav Taran

 

contact list design concept tubik studio

Contact List Concept by Eugene Cameel

 

tubik studio ui design dark

Dark Side of UI Design by Marina Yalanska

 

online magazine design tubik studio

Daily Bugle Online Magazine by Dima Panchenko

 

tubik studio ice ui website

Tubik Studio | Ice by Ernest Asanov

 

tubikstudio_ui_swiftybeaver

SwiftyBeaver. UI Design for Mac App by Marina Yalanska

 

landing page animation Tubik studio

magic.co landing page concept by Ludmila Shevchenko

 

tubik studio logo design case study

Case Study: SwiftyBeaver Logo by Marina Yalanska

 

lettering tubik studio design

Rapture Lettering by Denys Boldyriev

 

tubik studio application recipes and cooking

GIF Animation for Recipes and Cooking by Sergey Valiukh

 

monster intro animation tubik studio

Epic Monster Intro Animation by Kirill

 

Contact List Concept Scrolls Tubik

Contact List Concept Scrolls by Eugene Cameel

 

We have published some new articles about general and specific design issues as well as practical case studies here in Tubik Blog. In case you missed any of them, here’s the list of topics considered in May:

 

  • Dark Side of UI. Benefits of Dark Background. The article continues the topic of effective color choices in user interface design. This time it is devoted to the benefits and pitfalls of dark background in UI design solutions for websites and mobile applications.
  • SwiftyBeaver. UX & UI Design for a Mac Application. Fresh case study on UX and UI design process. Detailed description of creating user interface for SwiftyBeaver, a Mac application presenting the first integrated logging platform for Apple’s Swift programming language.
  • Case Study: SwiftyBeaver. Designing Logo. New case study on logo design continuing the story of comprehensive design process for SwiftyBeaver, the integrated logging platform for Apple’s Swift programming language. Packed with graphics demonstrating various creative stages.
  • Landing Page. Direct Flight to High Conversion. The article is devoted to the basics of landing pages design. Considers the issues of conversion, CTA, USP, copy, visuals and other elements of efficient landing. Packed with examples by studio designers and recommended reading.

 

swiftybeaver article tubik studio

 

This month we also actively shared our ideas and experience answering questions about design issues on Quora. Here are the most popular ones which got most readers’ attention in May and some of them got featured in Quora Digest:

 

Why are illustrations important for UX design?

— Why hasn’t Facebook updated their UI to a more modern design?

What is the difference between UI and wireframe?

— In website design, what are the pros and cons of dark text over light background vs light text over dark background, and is one better than the other?

 

Tubik studio on Quora

May was full of unforgettable moments of brainstorming, collaboration, creativity and friendship which we, as usual, actively shared with our followers in studio Instagram page.

 

tubik studio designers instagram

 

Tubik studio design team

 

Getting closer to global design community and all those who have keen  interest in this field, we shared our ideas and experience via Medium and kept everyone updated with studio news via Twitter, Tumblr and Flipboard.

 

So, welcome to join us wherever it’s convenient for you. Bright and positive summer to everyone, we are ready for a new month, new projects, ideas and meetings, fresh design concepts and wise tips from experts. Stay tuned!


Welcome to see the designs by Tubik Studio on Dribbble and Behance

SwiftyBeaver logo case study tubik studio

Case Study: SwiftyBeaver. Designing Logo.

In our previous case study we told you the story of UI and UX design for SwiftyBeaver describing the design process in detail and supporting it with the visual variants of different stages. Today we want to continue with unveiling logo design process.

 

swiftybeaver logo design tubik studio

 

Task

 

Design of a logo for the logging platform uniting the efforts of Swift and Objective-C developers, UX designers, app analytics experts, and product owners.

 

Tools

 

Pencil sketching, Adobe Illustrator, Adobe After Effects

 

Process

 

As we mentioned in case study on UI and UX design, SwiftyBeaver is a native Mac application presenting the integrated logging platform for Apple’s Swift programming language. It is aiming at developers as its basic target audience. The product supports all the devices belonging to Apple device family.

 

Design practice of previous projects accomplished by studio designers, such as Saily App or Passfold, proved that tight interconnection of design solutions on branding and user interface for the same product features higher level of efficiency. Both mentioned cases showed that in brand positioning and promotion, using the concept of strong corporate style and applying the elements of branding such as logo, lettering and illustrations consistently was the effective strategy. It is also important to remember that user interface of an application or a website is not just a sort of static or moving images — it is the field of active interaction. Interaction with the product via the interface enhances much higher memorability potential of brand elements as well as general stylistic concept. Following this approach for SwiftyBeaver project, user interface designer Ludmila Shevchenko and logo designer Arthur Avakyan worked in tight collaboration to get the design solutions that will effectively support each other.

 

Naturally, the initial stage of general concept search tried the variants of mascot. As the name of the product includes “Beaver”, in the first sketching set the designer presented variants of this animal as a key mascot. There was also a variant of original presentation of “S” and “B” as two basic letters of the product name. In addition, this first set included a bit more abstract version based on the set of lines featuring the movement of beaver’s tail.

 

swiftybeaver mascot tubik studio design

swiftybeaver logo design tubik studio

 

The variant based on lines was accepted as the basic concept practically at once. Although the mascots can be a powerful tool of branding, this time the strategy was different. The target audience as well as the nature of the product is quite specific so more abstract version of the logo could show more flexibility in its expressive potential. Founder and CEO of SwiftyBeaver Sebastian Kreutzberger was very attentive to details and open for discussions. He decided upon the variant with stripes because it made a logo meaningful as logs the app is based on like the logs of trees are stripes so it presented a strong visual metaphor. Additionally, he liked the colored stripes of famous 70s and 80s logos so he wanted to have a logo that would look vintage and at the same time super modern. So, this direction was developed further.

 

swiftybeaver logo sketches tubikstudio design

 

Moreover, this version got closer to the general visual design of user interface for the application. As it was described in the previous case study, UI design widely used color lines as markers for categories of log entries and the chosen concept of logo provided strong connection of UI design and branding. Therefore, the next stage of design process of elaborate and thorough work on the slightest nuances. Different versions of curves and length of the lines were tried and discussed in search of the most harmonic variant.

 

swiftybeaver logo design by tubik studio

 

swiftybeaver logo versions tubik studio design

 

The color palette also echoed the colors chosen for UI design and supported them with smooth gradients. So, user interface of the platform, landing page and logo were cojoint via colored elements.

SwiftyBeaver ui screens tubikstudio

 

tubikstudio swiftybeaver landing

 

The original version of logo was colorful, but monocromatic version was also accomplished and tested to provide branding solutions with high level of flexibility.

 

SwiftyBeaver logo final tubikstudio

 

SwiftyBeaver logo mono tubik studio

 

Another issue to consider was the choice of font for company name lettering featured with logo image. Several options that could work effectively with the logo and correspond with the nature and general design of the product were offered and discussed. The set of potential variants included diverse variants from strict and straight to smooth and curvy. Finally, the font was chosen to provide a good combination with the fonts of the app interface. The client chose that particular font because found it appropriately curved and perfectly matching the curves in the logo.

 

swiftybeaver logo fonts tubikstudio

 

The approved variant of logo image and lettering was also supplied with the design of animated version. It was accomplished with the help of Tubik Studio motion designer Kirill. The designer and the client took considerable amount of time and discussion optimizing the physics of the ball to look and feel as natural as possible.

 

swiftybeaver animated logo tubik studio design

 

And one more important task to move on with was design of an app icon. To prove its efficiency, designers tested it on different devices and in different sizes to ensure that it didn’t lose its recognizability or didn’t get dirty in smaller size.

 

swiftybeaver icon variants tubik studio

 

Logo design for SwiftyBeaver was one more case proving that there are no unimportant details in branding. It was one more project full of elaborate sketching, thorough work on the slightest hues and gradients, numerous variants with different length, width and placement of the elements to make a catchy, harmonic and stylish logo that will represent the nature of its product.


Welcome to see other works by Arthur Avakyan on Dribbble and Behance

Welcome to see designs by Tubik Studio on Dribbble and Behance