Web Design, Mobile Apps, Online Marketing in Indonesia, Singapore

November 23, 2023 • Knowledge, Figma

Designing UI Using Design Token with Figma Variables

Recently, Figma has released a major update that makes it easier for designers to create more flexible designs. If you are already familiar with it, the most talked-about feature is Variables. In the summer of 2023, Figma announced its latest feature, Figma Variables, which is similar to the function of design tokens and can be used directly in Figma. Figma Variables is currently in the Beta testing phase and is only available if you are on an educational or paid plan. This article will discuss how we use Variables and design tokens to make color usage more effective in design. Let's go!   Context & Problem We have a multi-brand design system that we use to design mobile applications. All styles from the brands are incorporated into one design called Timedoor Design System. When we initially created this design system, we did not consider making a flexible color system for different brands. However, after studying several famous design systems such as Material, IBM, and Ant Design System, we discovered that one of the fundamental elements to start a design system is to have a strong foundation, one of which is Design Tokens. Therefore, we have decided to create design tokens for the Timedoor Design System to simplify its usage, starting with Design Token Color.   Color Token Structure In the migration towards variables in Figma, we start by defining the color structure that will be used for all brands designed using the design system.   1. Primitive Tokens Primitive tokens are a collection of raw colors that will later be incorporated into semantic tokens. Examples of primitive tokens in colors are blue, purple, or green. We select several colors to be used as examples based on their function and brand colors. We create a primitives token structure with a shades structure as shown below, where a single raw color will be transformed into 11 derivative colors to facilitate the use of colors in the semantic scheme to be created.   2. Semantic Tokens Semantic tokens are a collection of variables that provide functionality to primitive tokens. Primitive tokens will reference each semantic token as needed. Examples of semantic tokens include primary color, secondary color, success color, and others. In the Timedoor Design System, we group semantic colors according to their functions, such as primary color, secondary color, background color, text color, and so on, as shown in the example below. As can be seen, primitive colors will be reused in semantic colors to maintain color consistency in design. In these semantic tokens, we also directly define themes, namely light and dark themes, both of which still use the same primitive color sources.   3. Contextual Tokens (Optional) Contextual tokens are usually used directly in the UI components being created. However, in the Timedoor Design System, we have decided to only use them up to semantic tokens, considering time and the number of people in the team. Contextual tokens will reuse the previously defined semantic colors. Examples of using contextual tokens include button-primary-default, button-primary-hover, and others.   How variables work in our design system Let's see how to apply color variables in the multi-brand design system that our team has created.   1. We separate the color file from the component file Separating files in the design system is useful for improving the efficiency of using colors, making it easier to update if there are any required updates to color variables or the components themselves. After separating the files, the color files will be published so that they can be used independently by the component files later.   2. Using color variables in components Example of using color token variables in a button component. The button container uses the color primary/main and the content inside uses the color primary/content. [caption id="attachment_6283" align="alignnone" width="768"] Example using color token in button component[/caption]   3. Components that already use semantic color tokens can utilize modes In semantic token, we have set it up so that designs that use color variables can change color according to the created modes, namely light and dark. Here is an example of using a color theme on a button component. [caption id="attachment_6284" align="alignnone" width="768"] Button component on light mode[/caption] [caption id="attachment_6287" align="alignnone" width="768"] Button component on dark mode[/caption]   In both of the above modes, the button component still uses the same semantic tokens, which are primary/main and primary/content. However, due to the different modes, the primitive token changes, making the design more flexible in terms of color usage.   Example using color token variables on our project One of the use cases of variables in our project is where we have 3 themes that already use primitive tokens and semantic tokens.   Conclusion Building a well-structured design system takes time and continuous iteration. Therefore, we try to establish a strong foundation in the design system we are building by applying design tokens through the variables feature in Figma. So don't be afraid to experiment so that we can learn from those experiments that have already happened in our design system. Thank you for reading. If you have any more questions or want to go deeper into this topic, just reach us via our website or another social links. Happy designing!

Read more

May 18, 2023 • Knowledge

Leveraging ChatGPT for SEO-Friendly Article Creation

Introduction In the digital age, content is king. But not just any content - it needs to be high-quality, relevant, and optimized for search engines. This is where Search Engine Optimization (SEO) comes into play. SEO is a set of strategies and techniques used to boost a website's visibility in search engine results, thereby increasing traffic and potential business opportunities. One of the tools that can help in creating SEO-friendly content is ChatGPT, an artificial intelligence model developed by OpenAI. This article will guide you on how to leverage ChatGPT to create content that not only engages your audience but also ranks well in search engine results.   Understanding SEO and Its Importance SEO is a crucial component of digital marketing. It involves optimizing your online content so that a search engine likes to show it as a top result for searches of a certain keyword. SEO is important because it increases your website's visibility, which can lead to more potential customers and leads for your business. Key elements of SEO include keyword optimization, creating high-quality and relevant content, using meta tags effectively, and building high-quality backlinks. All these elements work together to improve your site's ranking on search engine results pages (SERPs), making it easier for potential customers to find your business.   Introduction to ChatGPT ChatGPT is a language model developed by OpenAI. It uses machine learning algorithms to generate human-like text based on the input it receives. ChatGPT can be used for a variety of tasks, including drafting emails, writing code, creating written content, and even tutoring in a range of subjects. One of the key benefits of using AI like ChatGPT in content creation is its efficiency and consistency. It can generate high-quality content quickly, saving you time and effort. Furthermore, it can provide new insights and perspectives, enhancing the quality of your content.   Using ChatGPT for Keyword Research and Optimization Keyword research is a fundamental aspect of SEO. It involves identifying popular words and phrases people enter into search engines. These keywords can then be used to optimize your content, making it more likely to be discovered by users. ChatGPT can be a valuable tool in this process. You can use it to generate ideas for keywords related to your topic. For example, if you're writing an article about digital marketing, you can ask ChatGPT to suggest related keywords. It might suggest terms like "social media marketing," "content marketing," "SEO," and "email marketing." Once you have your keywords, you can use ChatGPT to help incorporate them naturally into your content. Remember, keyword stuffing - the practice of overloading your content with keywords - can lead to penalties from search engines. ChatGPT can help ensure your keywords are used in a way that is natural and relevant to your content.   Creating High-Quality, Relevant Content with ChatGPT Creating high-quality, relevant content is one of the most effective SEO strategies. Search engines favor content that provides value to users, and high-quality content is more likely to attract backlinks, which can further boost your SEO. ChatGPT can assist in creating such content. You can use it to generate ideas for blog posts, articles, or other forms of content. You can also use it to draft the content itself. For example, you can provide ChatGPT with a brief outline of your article, and it can generate a detailed draft based on that outline. Remember, while ChatGPT can generate high-quality content, it's always important to review and edit the content to ensure it meets your standards and accurately represents your brand.   Using ChatGPT to Generate Meta Descriptions and Meta Tags Meta descriptions and meta tags play a crucial role in SEO. They provide search engines with information about your page's content, which can help improve your visibility in search results. ChatGPT can be used to generate effective meta descriptions and meta tags. For meta descriptions, you can provide a brief summary of your content and ask ChatGPT to refine it. For meta tags, you can ask ChatGPT to suggest relevant keywords based on your content. Remember, while meta tags are not as influential as they once were, they still play a role in SEO. They can help search engines understand your content and can improve click-through rates from search results. Using ChatGPT to Optimize Content Structure for SEO. The structure of your content can also impact your SEO. This includes elements like headings, subheadings, and the overall layout of your content. ChatGPT can assist in optimizing your content structure for SEO. You can use it to generate headings and subheadings that incorporate your keywords. You can also use it to create an outline for your content, ensuring it is structured in a way that is easy for both users and search engines to navigate.   Building High-Quality Backlinks with ChatGPT Backlinks - links from other websites to your own - are a key factor in SEO. They can significantly improve your site's visibility in search results. However, not all backlinks are created equal. High-quality backlinks from reputable websites are much more valuable than low-quality backlinks from obscure sites. ChatGPT can assist in your backlink building efforts. You can use it to generate ideas for guest posts, which can earn you backlinks from other websites. You can also use it to draft outreach emails, asking other websites to link to your content. Remember, while ChatGPT can assist in these tasks, building high-quality backlinks often requires a human touch. It's important to build relationships with other website owners and provide value in exchange for backlinks.   Conclusion SEO is a crucial component of digital marketing, and ChatGPT can be a valuable tool in your SEO efforts. From keyword research and optimization to content creation and backlink building, ChatGPT can assist in a variety of tasks. However, while ChatGPT can generate high-quality, SEO-friendly content, it's important to remember that it is a tool, not a replacement for human creativity and insight. Always review and edit the content generated by ChatGPT to ensure it meets your standards and accurately represents your brand. By leveraging the power of ChatGPT and following SEO best practices, you can create content that not only engages your audience but also ranks well in search engine results, driving traffic and potential business opportunities to your website." By the way, this article is also made by ChatGPT :)

Read more

April 8, 2023 • Our Work

Client Interview – Sushi Bushi Japanese Restaurant

Sushi Bushi, Affordable Modern Japanese Restaurant with A Unique Way to Order!    Question: Good afternoon Mr. Sebastian. Thank you for your time. This time, we would like to ask you some questions about Sushi Bushi. First, how did you come up with the idea of establishing a sushi restaurant in Indonesia, especially in Bali? Answer: Okay... sushi is one of the favorite foods in Indonesia. However, not all people can consume it because the price is quite expensive. So, I have a mission to introduce sushi to Indonesian people at affordable prices with good quality. As a result, this sushi restaurant was formed with a middle-low segmentation.   Question: Very interesting. Now, as we know that the pandemic hit Indonesia in early 2020, is there any impact of the pandemic on your sushi restaurant business? Answer: Well, Sushi Bushi opened in 2019 exactly 6 months before covid entered Indonesia. At the beginning of its opening, Sushi Bushi received a lot positive responses from the public because we offer affordable prices, the best quality, and interesting themes. After the pandemic hit, all activities had to be from home so it decreased our of customers and sales. Thankfully, 3 months after the pandemic we were able to bounce back again.     Question: Glad to know that. As we know Bushi has a personal self-order system. Why did you choose to customize the system compared to the template system that has been used by many other restaurants and why did you choose Timedoor Indonesia as the developer of the system that you want? Answer: First of all, Sushi Bushi has its own characteristic. This characteristic is called a Personal self-ordering tablet. This is different from the self-ordering system in other restaurants. Therefore, we cannot use the same type of template system that already exists. The reason we chose Timedoor Indonesia as a partner to help us develop the system is because Timedoor has a good track record and portfolio. In addition, the most important thing is that Timedoor Indonesia is located in Bali. This location is also an important reason because we are more facilitated in communicating directly with the developer of the application/ system.     "With the digitalization of business, We can be more focused on the kitchen process"   Question:  Well, thank you for trusting us in developing a system for your business. From what we can see, Mr. Sebastian has realized the importance of using technology in business. In your opinion, how important is business digitalization, especially for the culinary industry today? Answer: With the digitalization of business, it is very helpful for entrepreneurs to solve the problem of time efficiency. We can be more focused on the kitchen process. Not only that but through this business digitalization, we also don't need to look for additional human resources. For example, with the usage of the Personal Self-Ordering Tablet, the restaurant does not need any employees to take orders at the customer's table so orders are made faster because it’s connected to the employees directly.     Question: Last but not least, how is the service that Timedoor Indonesia provides while working with Sushi Bushi? Answer: When we contacted Timedoor Indonesia for the first time, the admin was very informative in providing the information. Timedoor Indonesia made the system to all the requests of the client. Timedoor Indonesia also handles the problem immediately if something happens so the work is completed quickly.   Client Information Mr. Sebastian Sushi Bushi Jl. Sunset Road No.81X, Badung, Seminyak, Bali [email protected] 081390281127

Read more