Tag Archives: logo design

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

design4users blog by Tubik

Design4Users Blog. Official Release.

Here in Tubik Studio we have had the opportunity to create a considerable number of design stories, all so different and so unique. It gave us the chance to feel all the benefits and pitfalls of design provided in terms of outsource partnership. To go further and get even closer to final users, to feel all the pains of our clients and all the variety of steps needed for creating an efficient product out of thin air, we have decided to take the next step and launch our own digital products.

 

Today we are happy to announce the release of our first product called Design4Users. It is a content-driven professional platform fully created by the studio team from the ideation and concept phase, to creating branding, developing content strategy and communication model, designing logic and layout (UX), original interface and navigation (UI), providing full-cycle of front-end development and creating responsive webdesign, careful testing and thoughtful content writing.

 

D4U design4users blog

 

Welcome to get a bit more details about the project.

 

Mission and background

 

Design4Users is a blog devoted to diverse design issues solving users’ problems. It’s mission is establishing a solid highly informative platform for designers, customers, managers, product creators and marketologists focused on the aspects of user-friendly design trends, process, organization, collaboration, resources and tips.

 

One more objective of the blog is promoting and inspiring young designers and sharing expertise of well-known masters in the sphere.

 

Initially, the blog was created as small in-studio platform for sharing useful information on current projects as well as helpful resources, tools, design hacks, inspirational collections etc. Still, growing and active Tubik Blog readers community encouraged us to transform it in the open platform and share our knowledge, practical experience, tips on tools and sources, projects and concepts we find inspiring. And all of them have one thing in common: they are concentrated on design for problem solving, on helping users and making their life brighter, easier, more productive, more profitable and more beautiful.

 

design4users logo

 

Description and functionality

 

The website is organized around several basic categories reflecting different design directions.

 

design4users blog

 

Categories

 

Design: the broadest category focused on general design trends and strategies. It also features reviews for design books and tools, sets of quotes, historical retrospective on design trends, recommendations about useful resources and articles, stories about designers and projects, advice on organization and management of design processes and efficient collaboration with clients etc.

 

Branding: the category considering various issues of design for branding and marketing, creating identity, logo design, copywriting and brand naming, marketing research and content management tips.

 

UI/UX: the category focused on the comprehensive presentation of design processes via practical case studies and articles about design for digital products like websites and mobile applications. Covers all the variety of topics about user interfaces, user experience, user research, usability testing, interaction design, applying psychology and analytics in design process, organizing effective teamwork for complex design projects.

 

Product: the category offering articles and reviews on full cycle of product design, development and promotion, tips on creating user-friendly problem-solving products, cases of improving lifestyle, professional processes and achieving business goals for products by means of design.

 

Print: the category concentrated on all the variety of design directions and techniques for editorials and books, aspects of graphic design, illustration, typography and lettering, small print forms like postcards, invitations, posters etc.

 

wordpress theme design tubikstudio

 

All the categories can feature posts marked as original D4U sections.

 

  • D4U Inspiration: thematic collections of design works, quotes, videos
  • D4U Interview: interviews with people connected to design sphere, inspiring leaders, newcoming stars etc.
  • D4U Review: books and tools reviews
  • D4U Expertise: presentations of recognized experts in design sphere, their biographies, works, tips, videos and publications.
  • D4U Reading List: collections of recommended articles about from various resources published weekly
  • D4U History: posts about prominent cases and works in the sphere of design in historic retrospective.
  • D4U Case Study: practical case studies giving details on creative process for different design projects.

 

Design and Layout

 

Design of the website is accomplished with a view to effective presentation of both copy and visual materials that are provided in wide variety. Basic background of the web pages is dark, aiming at creating stylish harmony and balance for featured images in preview sections and contract with the light background for the article body supporting better usability and readability of copy blocks.

 

Home page features two blocks of articles: the most popular according to the total number of views and recent, showing the chronological feed of posting.

 

design4users Tubik Studio

 

The users are provided with the ability to switch to another category immediately from the top menu, footer menu and dynamic menu moving in the process of scrolling and making navigation easy. The articles are supported with tags and recommendations on further reading.

 

Subscription is fast and simple, enabling users to get the fresh updates immediately after publishing in their inboxes. Also, readers are able to share the content to the variety of social networks right from the article in split seconds.

 

Welcome to see more details about design for the website in extended Behance presentation

 

Creators

 

Design4Users is the content project fully created, designed and developed by Tubik Studio. Being a comprehensive team experienced in variety of design directions and knowing all the stones on the path, we have decided to set a platform uniting creators via knowledge, practice and inspiration for the sake of design for users.

 

Tubik Studio design team

 

Supplements

 

For those who are interested to get more about the website structure and content in more interactive way, welcome to watch Design4USers Video Tour.

 

 

If you wish to see details and contact information about Design4Users, welcome to check out the Press Kit.

In the next post, we will provide the case study on design process for the website. Stay tuned and join us via Design4Users!


Welcome to see designs by Tubik Studio on Dribbble and Behance

Welcome to Design4Users

Welcome to connect with Design4Users on Facebook and Twitter

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