Product

Uplyfe is an AI-powered health app that reacts to your behavior in nutrition and exercise and provides personalized recommendations. The app is designed to help users improve their health, as well as prevent or manage non-communicable diseases (NCDs). Founded by specialists with medical and healthcare backgrounds, the product shares the philosophy that a healthy lifestyle is the best medicine. The product team is based in Switzerland.

Research and Design Approach

Creating a brand image, the design team has to consider all the major ways the brand employs to communicate with its users and customers. Even an excellent logo design may not work effectively if it’s designed in a creative vacuum without a clear understanding of where and how the brand will use it, what environment it will be integrated into, and how it will be distributed. That’s why the first stage of design is all about deep research, asking tons of questions, and building up a great deal of communication between the brand team and the design team. This process is vital as not only do designers get a more comprehensive view, but also, brand holders start looking at their product from different perspectives and asking themselves new questions. You can read more about the design process for branding in one of the earlier articles:  together with the client, we discuss and define ‘the soul’ of a client’s brand. That helps us to create strong branding and identity, ‘the face,’ for products and companies. From the brand model to the design system, we build the identity that translates the product values.

The essential point to take into account about Uplyfe’s brand image was that, in a nutshell, it is not a product solving a narrow circle of specific health problems but a comprehensive eco-system of building a healthy life, adapting its recommendations to users’ goals and performance. What’s more, it’s based on a scientific approach but simple and accessible for the broad target audiences of different ages, from youngsters to the elderly. The app aims at being used by both people with NCDs and healthy people who want to improve their lives. As the team is based in Switzerland and that’s its core market at the moment, the research phase included the analysis of what kind of health services and apps are demanded and popular in this area.

To define the design approach, user personas were developed and analyzed as well as mood boards were created and discussed to determine the compelling visual design perspectives.

Based on that, our team created a complex brand design for Uplyfe.

Brand Graphics

Logo

The final logo design is a combination mark made up of a symbol and a typographic part presenting a brand name. The elegant and curvy symbol is balanced by the simple, solid, and highly readable font chosen for the text part. The color palette is based on a combination of pure colors that provide good contrast and work well both in digital and analog spaces.

As for the symbol, it employs a triangular shape. According to the psychology of shapes, a triangle is an energetic and dynamic shape always associated with motion and direction. The lines are placed so that human eyes automatically move to the triangle’s top or in the direction it is placed. An upright triangle brings feelings of stability and balance.

Also, the symbol intentionally doesn’t feature any visual triggers or prompts that are typical for the medical theme. The major goal in identity design for Uplyfe was to step aside direct associations with medical treatment, hospitals, and the like, as the application goes beyond that and is positioned as a helper in supporting a healthy lifestyle in general. What’s more, for many people with NCDs, their states of health are a matter of everyday life, like, for example, those who have diabetes, so the app would rather avoid day-by-day connection to that from the medical perspective and focus on helping users make their life better in those conditions. As well, a part of the target audience consists of people who have no specific health issues but would like to enhance their general physical conditions, so the logo directly connected to the medical theme could create confusion about the nature of the Uplyfe service and lead to losing a part of the audience. Instead of associations with medical treatment, the logo had to transfer the strong message of a bright, healthy, and well-balanced life.

To increase the logo’s flexibility for different visual design goals, the designer developed a set of variations, including a black-and-white version, monochrome variants on light and dark backgrounds, and options with a gradient background based on the corporate palette.

Digital touchpoints: app graphics, favicon, logo animation

But brand design goes much further than well-crafted and tested logo design. Together with the client, we defined the touchpoints and channels via which the brand communicates with its customers to create an appealing and balanced visual style covering them all. This way, the brand image looks and feels consistent, and brand recognizability increases.

First, let’s take a look at how branding was integrated into the digital product. Here’s the logo animation for the splash screen: it gives a clear visual connection with the brand from the first seconds and, at the same time, makes waiting bright and dynamic while the app is loading. Also, below, you can see how the branded app icon looks for the Uplyfe application.

And here’s a glance at the favicon for the app landing page. Favicon, also known as a URL icon or bookmark icon, is a particular type of symbol representing the product or brand in the URL line of the browser and in the bookmark tab. It allows users to get a quick visual connection with it while they are browsing. Although small and not prominent, this interface element is essential for effective web promotion; it contributes much to web usability and good recognizability of the brand’s visual identity.

The concept of the custom branded illustration was also developed to experiment with the general style of brand graphics that could be used for social networks, banners, and other marketing goals.

Going further, the extensive set of neat icons, both in corporate colors and in monochrome versions, was designed to support visual consistency for diverse branding and user experience goals behind the application and its pages in social networks.

Landing page design

One more important channel of app promotion is a landing page. For mobile applications, it is a web page created to set another touchpoint that informs users about the nature and benefits of the app, engages them to try it, and provides shortcuts to downloading it. Moreover, sticking to the brand style and color palette, the landing page strengthens the brand image’s web presence and recognizability.

Here are different design concepts for the landing page of the Uplyfe application.

Landing page employing dark background, prominent app demonstration screens, and bright color accents

Landing page design based on light, airy background and big custom illustration in brand style

Landing page design concepts with atmospheric background photo content setting the visual connection with the theme of healthy life. The photo also works as a gaze-directing directional cue: on the slide with yoga, the woman’s fingers direct users’ eyes to the CTA element in the header.

Social networks

Naturally, digital products are mainly promoted via digital channels of communication, so the next step of brand design for Uplyfe was considering its consistent identity in social networks.

Here’s how the Facebook page for the app looked. The concept features custom header images based on graphics combining abstract shapes and recognizable objects like a microscope, providing a quick visual connection with the brand style, the theme, and the goals of the service. Also, another illustration is shown as an example of theme graphics for posts.

Here’s how the same approach is adjusted for the Twitter page.

And here’s a look at the brand image concept on Instagram and Facebook for mobile. The system of icons works effectively as the covers for Instagram highlights. Also, the general style of brand graphics for Instagram posts is offered to make them consistent, attractive, and recognizable, sharing the brand mission and valuable information for the followers.

Printed stuff: business cards, posters, lightboxes, billboards

Talking about the more tangible side of branding, here’s how the business card design looked.

What’s more, the style, curvature, and shapes used in the process of design exploration for icons let the designer develop the design system for brand posters and other stuff or merch that could be involved in marketing.

Another direction to take into account was the design of outdoor advertising to spread the word about the application in various urban spaces, such as billboards with motivational taglines or lightbox ads informing about the app’s benefits.

This project demonstrates how the comprehensive design approach covers different aspects of the ways the brand uses to connect with its customers and how much more should be done to develop an attractive and informative brand identity than just logo design.

New design case studies are coming soon; keep up with the updates.

More Design Case Studies

Here’s a set of more case studies sharing the design solutions and approaches for some of the design projects done by the tubik team.

FarmSense. Brand Identity and Website Design for Agricultural Technology

Synthesized. Website Design for DataOps Platform

ProAgenda. Identity and Website Design for Golf Management Service

BlockStock. Brand Identity and Website for Minecraft Models Resource

Carricare. Identity and UX Design for Safe Delivery Service

ShipDaddy. Identity and Web Design for Shipping Service

Illuminating Radioactivity. Interactive Web Design for Education

Lumen. Website for Museum of Mountain Photography

GNO Blankets. Branding and Web Design for Ecommerce

Designer AI. Dashboard and Graphics for Fashion Service

Shpin’s Wine. Identity Design for Family-Run Winery

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение Branding Case Study: Identity Design for Health Application появились сначала на Design4Users.

Since you can’t just close your current business, reopen, and expect to return to your previous company’s size immediately, you must strategically choose how and when to rebrand. We’re going to tell you how you can successfully execute your company’s rebranding as a whole and specifically on social media. Keep reading to learn more!

Update Your Logo

When you choose to completely rebrand your company on social media and as a whole, you should consider updating your logo. You don’t necessarily need to get rid of the old one – and sometimes it’s better if you keep parts of it. Instead, you might choose to update your old logo into something more modern by following current graphic design trends. Paying attention to these trends can help bring your logo and, therefore, your brand from the 90s (or earlier) up to speed with the current year.

You’ll want to consider the color palette used in your logo, as well as the use of text, lines, and shapes. For the best possible logo design, you’ll want something easy to remember and associate with your brand, fits your company as a whole, and is relatively timeless – you don’t want to have to change/update logos every other year!

Bakery logo design

The case study of logo redesign for a landscape company

Opt for Professionals

One of the easy ways to begin the rebranding process is to hire a social media marketing agency. This type of agency differs from other marketing agencies because it focuses specifically on your brand’s social media presence and positioning your company as an industry leader on the world’s fastest-growing group of social networks.

There are currently more than 3.8 billion social media users in the world, this means that the (proper) use of social media for your rebranding strategy is a must. Social media is where people turn to find and give recommendations, learn about new products, and share their experiences with a brand.

As you begin the process of rebranding, a social media marketing agency can step in and ensure that your social presence is as visible as possible. They can also help people understand why you are choosing to rebrand, reach new potential customers, and help you learn the right way to engage with your followers.

Consider Improving Marketing with Video Content

If your brand has never incorporated the use of videos into their marketing strategy, now is the time to do so. Opting to include video marketing in your rebranding strategy will help your company appeal to a wide range of customers while offering a variety of content. Using video content allows potential customers to see your product or service being used, hear a customer or expert testimonials, and visualize how they might benefit from choosing your brand.

When you decide to use video content in your marketing strategy, you will want to find the best video hosting site available to upload, store, play, and share videos on the internet. Ideally, the video host you choose will give users a great watching experience while giving your company the ability to customize the video player.

A great video marketing strategy is particularly effective when rebranding your company because it can help people visualize the changes you are working to make, how you’re becoming better, and even why you’re making a choice to improve. It also will give your company exciting new content to share and promote your rebranding efforts.

The example of explainer video for OffCents

Example of a showcase video by Tubik that can be used to promote and show services via social networks

Improve Your User Experience & Customer Service

While your company can focus on its social media presence, marketing strategy, and logo design, all of these will mean nothing if your website’s user experience and product’s customer service are lacking or completely non-existent. Your website must be intuitive and quick to load all pages. The visual aspects are important, but how it functions matters even more. If a customer gets lost on your website or can’t figure out how to purchase your product, your rebranding efforts are almost null.

Furthermore, having a user-friendly website only counts for so much if your company has poor customer service. Poor customer service will wreck a company’s rebranding strategy and its new reputation faster than almost any other potential problem. Having terrible customer service be the cause of bad reviews and negative word-of-mouth; it will turn potential customers against you before they give you a second look.

So how can you fix a customer service issue? Make sure that your company’s contact information is visible and easy to find; consider offering a live-chat option or at least quickly respond to any emails/messages within 24 hours. Engage with your followers on social media by liking and replying to their comments – it shows your team cares!

Additionally, try to ensure that your customer service representatives are empowered to help customers and solve problems without their supervisor’s approval – this will help quickly resolve issues without the annoyance of long holds/lengthy response times. This small step can go a long way toward improving and keeping a great reputation when it comes to your brand’s new image.

The rebranding of your company will only be successful if you can retain old customers and attract new ones. It is difficult, if not impossible, to do this without excellent customer service, and whether these aspects are positive or negative, will spread like wildfire on social media!

What Will Your Company Look Like After Rebranding?

If you are curious as to what your company and sales will be like after you’ve entirely rebranded your company on social media, the answer is actually up to you! If you put forth the time and effort to rebrand the business and stick with positive changes completely, you’ll likely see an increase in sales and customer retention. Unfortunately, the opposite is also true if you choose to allow your company to revert to the way it was before the rebranding process.

The key to successfully rebranding your company on social media will be to demonstrate all changes and allow people to see it for themselves. When this happens, your conversions will improve, and people will naturally want to be part of your success!

About Author: this is the guest post by Hazel Pan, a copywriter whose expertise includes Funnel Copywriting & Inbound Marketing.

Welcome to read more about the importance of design for digital marketing, review the creative stages of branding design, and learn how to use mascots in marketing and user experience design.

Сообщение How to Execute Successful Rebranding of Your Business on Social Media появились сначала на Design4Users.

Moreover, the target audience is not the only point to concentrate on. Type of content can also become a key factor in making the social network go around photos and images, videos, short or long copy blocks, links, recommendations, or something else. Anyway, although diverse social networks spring up like mushrooms, in most cases, they still find their user and readers, especially if UI/UX is thought out from the very first stages of design.

Book Swap App 

Having practical experience in design for various social networking websites and applications here in Tubik, we decided to share some of our ideas on things important to consider in the process of creating a product targeted at communication. As this topic is really wide and it’s impossible to mention everything in one post, today, we only start this conversation having gathered the general positions the designer needs to take into account while working on this kind of product.

UX screens for social network Echo

Features of a social network

Social networks, as the services concentrated on communication, usually have some basic features, which are mostly universal independently from the target audience or perhaps the content on which the communication is based. Among these basic features we would mention:

• Creation and easy editing of a personal account, preferably with the ability to protect the data it includes
• Easy search of users and content
• Categorizing the content
• Sharing with friends or followers
• Feed showing the latest updates
• Personal and group chatting and discussions
• Creating groups, public pages, or other kinds of communities
• Clear and organized notifications informing the user about activity and socialization with his/her circle of friends, followers, communities, etc.

All these features actually make the network social, so the better they are thought out, the easier and clearer it will be for users.

Dating App Concept

Vital points for efficient UX

Thinking over the design of a social network, from the very start, the designer should concentrate on several points:

– Social network is made for communication. It is not a personal exhibition, the newsreader, a set of articles, or a gallery. It is a community where a user can be both silent and loud. It is a platform where people can communicate easily at any moment they want.

– Successful, popular, and efficient social networks are all based on user-generated content. Therefore, the user should be offered multiple functions to generate that content via discussions, posts, sharing, chatting, libraries, collections, and so on and so forth. Otherwise, the risk of failure gets really high: the social network will not attract users and will not create a platform of pleasant communication.

Simple Blog App 

– Most users of social networks are people who are not highly tech. They don’t easily switch to updates and don’t read the sophisticated designer solutions beyond what they see.

– The power of habit, in this case, is often stronger than the wish of revolution. Nowadays, most people using the internet are acquainted with one or several social networks, so they have a kind of general understanding of basic functions and possible transitions. Certainly, just copying the existing social network scheme and functionality will not produce an original product; however, going too far from the common image of social networking features and creating something revolutionary new can confuse users. Keeping the balance on this thin line between habit and innovation is one of the vital tasks the designer will have to work out.

ECHO App

– Most users (if not all) are not ready to spend a lot of their time learning how the social network works. Even if they have time, they would rather spend it on doing something interesting and engaging in the network instead of working out how it functions.

– Social networks should provide useful functions and make a user aware of them. Nobody now needs the social network just for pure communication – it should give more to be attractive. Creating additional features and adding useful integrations is a good way to attract the target audience.

Social Network

Remembering and considering the mentioned positions helps the designer to conduct successful user research and build efficient user stories and flows so that the social network provides a positive user experience and is able not only to attract users but also retain them and group them around a convenient and useful platform.

Solutions for efficient UX

Some of the general solutions that could be a kind of basis for the designer working on UX for a social network, we think, are the following:

1. Easy and simple registration with a minimal number of steps needed to be done. It is advisable at the very beginning stage to provide a kind of simple, catchy, and entertaining tutorial or presentation of the basic advantages, engaging the user but not overloading with too much information.

Veggie App Concept

2. The account should be easy to fill in and should provide several modes of openness to others. The user should be sure that he or she is able to keep a low profile or close the data for strangers any time when it is wanted.

BuonApp 

3. Optimized and well-thought-out search with a clear system of filters is one of the basic factors to create a positive user experience.

4. The functionality of generating and sharing content should be clear and make the process fast.

ECHO App

5. A feed page or screen that allows one to see the updates in the network easily, sets wanted data or users visible, and gives the ability to move directly to different functional zones of the network should be carefully designed.

6. It’s important to enable a user to categorize the content according to different nature, popularity, or other characteristics.

7. Direct communication features such as discussions and chatting should be visible, clear, and available from any point of using the network.

Social Network 

8. Opportunities for engaging other users, creating groups, lists, clubs, communities, public pages, and discussions become the efficient basis for making the network really social. A good way to ease using them for users is the feature of automatic grouping along the content or other characteristics and manual (personal) grouping created by the user.

9. As social networks are always full of different information and usually filled with it dynamically, it is important to enable users to save or mark the content or people they want to remember or move out of the general flow.

10. Depending on the target audience, integrations, games, special functions, or tight connections with other networks can become the factor in making the user experience positive and increasing the level of usability.

Good Sign App Concept

Certainly, the points mentioned above are generalized, and they should be carefully revised according to the specific design task. Thorough research of the defined target audience, and understanding target users’ needs and pains will help to think over the mentioned positions in the perspective of efficient UX, which will outline some of the points as the most important factors while the others will stay behind the scenes in the specific conditions.

Originally written for Tubik Blog

Сообщение Social Network Design. UX for Communication появились сначала на Design4Users.