{"componentChunkName":"component---src-templates-project-js","path":"/portfolio/mailtarget/","result":{"data":{"sitePage":{"id":"SitePage /portfolio/mailtarget/"}},"pageContext":{"url":"/portfolio/mailtarget/","relativePath":"portfolio/mailtarget.md","relativeDir":"portfolio","base":"mailtarget.md","name":"mailtarget","frontmatter":{"title":"Case Study: Reimagine the new experience of marketing campaigns tools","date":"2018-04-20","image":"https://cdn.sanity.io/images/b2nbllp8/production/42a70fec50fc62a392cfa06c5396e8189cc9a6a1-2944x1684.png","image_alt":"Designed interactive email marketing tools and worked with the technology teams to build products for Marketers. In the first year, Mtarget was able to reach more than 700 paid clients.","seo":{"description":"Designed interactive email marketing tools and worked with the technology teams to build products for Marketers. In the first year, Mtarget was able to reach more than 700 paid clients.","extra":[{"keyName":"property","name":"og:type","value":"website"},{"keyName":"property","name":"og:title","value":"Reimagine the new experience of marketing campaigns tools"},{"keyName":"property","name":"og:description","value":"Designed interactive email marketing tools and worked with the technology teams to build products for Marketers. In the first year, Mtarget was able to reach more than 700 paid clients."},{"keyName":"property","name":"og:image","relativeUrl":true,"value":"images/3.jpg"},{"name":"twitter:card","value":"summary_large_image"},{"name":"twitter:title","value":"Reimagine the new experience of marketing campaigns tools"},{"name":"twitter:description","value":"Designed interactive email marketing tools and worked with the technology teams to build products for Marketers. In the first year, Mtarget was able to reach more than 700 paid clients."},{"name":"twitter:image","relativeUrl":true,"value":"images/3.jpg"}],"title":"Reimagine the new experience of marketing campaigns tools","type":"stackbit_page_meta"},"stackbit_url_path":"/portfolio/mailtarget","subtitle":"Designed interactive email marketing tools and worked with the technology teams to build products for Marketers. In the first year, Mtarget was able to reach more than 700 paid clients.","template":"project","thumb_image":"https://cdn.sanity.io/images/b2nbllp8/production/8fee104cddc69ef453d4ec1b21b61bcb0aa7fb87-800x600.png","thumb_image_alt":"Mtarget logo"},"html":"<table>\n  <thead>\n    <tr>\n      <th>Role</th>\n      <th>Team</th>\n      <th>Time</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Interface Design, Product Strategy, Design System</td>\n      <td>Working with the CEO and 5-8 engineers (as the team grew)</td>\n      <td>Nov 2016 – Apr 2018</td>\n    </tr>\n  </tbody>\n</table>\n<h1>The beginning</h1>\n<p>Email is always underestimated. However, email is the oldest marketing channel and has been proven for a long time. Therefore email remains one of the best alternatives for marketing campaigns. Unfortunately making a marketing campaign is not as easy as imagined. The tools available are quite complicated and difficult to use. MailTarget which its main product is a marketing tool was created to facilitate individuals, SMEs and large companies in conducting marketing campaigns.</p>\n<h1>Insights</h1>\n<p>To gain insight I conducted a competitive analysis of 16 popular marketing tools. Some of the main points that are used as assessment parameters are how to write and send an email, how the dashboard works, how to analyze email report data, how to create an automation campaign and the general problem in the marketing campaigns.</p>\n<p>Results of the analysis indicated that the user have difficulty to create and customized email. Other than that, users have trouble to read an email report and don’t know what should they do after reading email report. For more detail, you can see the list of the table below:</p>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/mtarget/mtarget-ca-doc-public.png\"></p>\n<div style=\"text-align: center;margin: -24px 0px 40px 0px;\"><em>Note: Some results from the analysis cannot be shared because they are limited company NDA policy.</em></div>\n<h1>The challenge</h1>\n<p>How to create a powerful marketing tool that is easy to use by the user so that they can conduct a marketing campaign effortlessly. Besides, as an early startup, we need rapid development to create the product and ship it to the users as soon as possible.</p>\n<h1>Principle</h1>\n<p>To create a product, we need to set some of the principles. It can be used for us to guide when we want to build a feature at MailTarget. In this case, the principle divided into three sections. The main principle, support principle and development principle.</p>\n<div style=\"padding: 24px; margin: 24px 0px; background-color: #F3F4F6; border-radius: 16px; color: #111827;\">\n<h4>🥇 The main principle</h4>\n<br>\n<p><strong>Reduce the steps to make it easy to use</strong><br>\nThe design should be straightforward and fewer steps, so the users being able to understand how the tool is work.</p>\n<p><strong>Effortless to find what they need</strong><br>\nDon’t give the users unnecessary information, so the users don’t try to hard to get what they need.</p>\n<p><strong>Suggest action point continue to the next steps</strong><br>\nThe design should give suggestion action point, so the users being able to continue to the next steps without thinking more and they are able to think other important things.</p>\n</div>\n<div style=\"padding: 24px; margin: 24px 0px; background-color: #F3F4F6; border-radius: 16px; color: #111827;\">\n<h4>🥈 The support principle</h4>\n<br>\n<p><strong>Always ready, always there</strong><br>\nThe users should feel accompanied when they using the tools, so if there is any trouble they will get support as soon as possible.</p>\n<p><strong>Step by step, little by little</strong><br>\nThe users should feel able to help step by step when they using the tools to reach the goals.</p>\n</div>\n<div style=\"padding: 24px; margin: 24px 0px; background-color: #F3F4F6; border-radius: 16px; color: #111827;\">\n<h4>🥉 The development principle</h4>\n<br>\n<p><strong>Build fast, fail fast</strong><br>\nThe team is able to release the feature as soon as possible, so they able to get feedback fast from the users.</p>\n<p><strong>Easy to design, easy to develop</strong><br>\nThe team is able to design and develop without complicated way, so they able to release fast to the users.</p>\n</div>\n<h1>Design</h1>\n<h2>Email Marketing</h2>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/mtarget/mtarget-doc-email-wireframe.png\"></p>\n<p>The users being able to edit the content of email directly inside the editor (what you see is what you get). So the users being able to make changes without imagining how the email can be looked. There are also available many components for supporting the users to make it easy when they create an email.</p>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/mtarget/mtarget-doc-email-high.png\"></p>\n<p>Besides that, the steps for making an email designed with concise. Less than 5 steps, the users being able to send email to hundred or million subscribers.</p>\n<h2>Email Report</h2>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/mtarget/mtarget-doc-report-wireframe.png\"></p>\n<p>The report designed with concise and meaningful. So when the users read the report they being able to know easily about performance the email which they sent.</p>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/mtarget/mtarget-doc-report-high.png\"></p>\n<p>Besides that, in each section, there is a recommended action for users. For example, users being able to give tags for contacts who opened an email to follow up for the next email.</p>\n<h2>Email automation</h2>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/mtarget/mtarget-doc-automation-wireframe.png\"></p>\n<p>Email automation designed straightforward and match with what user wants to do. For example, users being able to create a marketing campaign by themself like “Download ebook via email” in just a few steps.</p>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/mtarget/mtarget-doc-automation-high.png\"></p>\n<p>To make it easier, I designed a pre-configured template feature for email marketing and email automation. Accordingly, users being able to use the template to make the marketing campaign fast and effortless.</p>\n<h2>Support feature</h2>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/mtarget/mtarget-doc-support-wireframe.png\"></p>\n<p>As a Saas company, support is an important thing for users. I designed guide feature for first time user from registration until sent an email campaign.</p>\n<p>Besides that, I also designed tutorial and integrated chat feature from crisp which always accessible from all pages. So the users feel accompanied by MailTarget team anytime.</p>\n<h2>Design system</h2>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/mtarget/mtarget-doc-design-system.png\"></p>\n<p>As a startup that was just built, release product as soon as possible is a must. The design should be designed fast and then engineers should develop and build fast too, so the product is able to release soon. Therefore we build a design system. By using it, we are able to focus on the business and how to implement it.</p>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/mtarget/mtarget-public-design-system-foundation.png\"></p>\n<br>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/mtarget/mtarget-public-design-system-component.png\"></p>\n<h1>Result</h1>\n<p>As an early startup, MailTarget was able to reach more than 700 paid clients in the first year. The details about that can be read at <a href=\"https://dailysocial.id/post/mailtarget-receives-seed-funding-from-azure-ventures-and-angel-investor\">dailysocial.id</a>.</p>\n<p>Making products from scratch is admittedly difficult. After it was released, I knew so many things were not going well and had to be improved.</p>\n<p>Making products that are easy to use is not an easy matter. Define the principle in the early of the project to makes it easy to understand is absolutely a necessity.</p>","pages":[{"url":"/about/","relativePath":"about.md","relativeDir":"","base":"about.md","name":"about","frontmatter":{"title":"About Us","image":"https://cdn.sanity.io/images/b2nbllp8/production/7bb13bae1d8436e32c6b31bc8229f32d37ee2c7b-1280x853.jpg","image_alt":"A man taking a picture","seo":{"description":"This is the about us page","extra":[{"keyName":"property","name":"og:type","value":"website"},{"keyName":"property","name":"og:title","value":"About Us"},{"keyName":"property","name":"og:description","value":"This is the about us page"},{"keyName":"property","name":"og:image","relativeUrl":true,"value":"images/about.jpg"},{"name":"twitter:card","value":"summary_large_image"},{"name":"twitter:title","value":"About Us"},{"name":"twitter:description","value":"This is the about us page"},{"name":"twitter:image","relativeUrl":true,"value":"images/about.jpg"}],"title":"About Us","type":"stackbit_page_meta"},"stackbit_url_path":"/about","subtitle":"This is a short page about us and our work.","template":"page"},"html":"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel venenatis augue. Suspendisse tincidunt, nibh eget sodales eleifend, lectus magna elementum lorem, ut bibendum tellus turpis quis risus. Vivamus sagittis enim est, et semper lectus hendrerit ut.</p>\n<blockquote>\n<p>The world always seems brighter when you’ve just made something that wasn’t there before. - Neil Gaiman</p>\n</blockquote>\n<p>In sollicitudin imperdiet turpis quis accumsan. Pellentesque euismod turpis et nisi fermentum accumsan. Sed mollis vehicula augue sit amet accumsan. Nunc mollis, risus sed ullamcorper bibendum, odio est molestie tellus, venenatis rutrum mauris nibh at nibh. In a auctor leo, eu pretium ante. Quisque faucibus tincidunt fringilla. Donec tempor accumsan ante, in cursus metus tincidunt at. Proin sit amet ligula sed libero consequat consectetur eu tincidunt nulla. </p>\n<p><em>Thank You for reading!</em></p>"},{"url":"/contact/","relativePath":"contact.md","relativeDir":"","base":"contact.md","name":"contact","frontmatter":{"title":"Contact","hide_title":false,"sections":[{"content":"Hi! Thank you so much for your interest in working together. Please fill the contact form below or send me an email at [rezafaizarahman at gmail dot com](mailto:rezafaizarahman@gmail.com).","form_action":"/thank-you","form_fields":[{"default_value":"Your name","input_type":"text","is_required":true,"label":"Name","name":"name","type":"form_field"},{"default_value":"Your email address","input_type":"email","is_required":true,"label":"Email","name":"email","type":"form_field"},{"default_value":"Please select","input_type":"select","label":"Subject","name":"subject","options":["Job opportunity","Discussion","Error on the site"],"type":"form_field"},{"default_value":"Your message","input_type":"textarea","label":"Message","name":"message","type":"form_field"},{"input_type":"checkbox","label":"I understand that this form is storing my submitted information so I can be contacted.","name":"consent","type":"form_field"}],"form_id":"contactForm","section_id":"contact-form","submit_label":"Send Message","type":"section_form"}],"seo":{"description":"This is the contact page","extra":[{"keyName":"property","name":"og:type","value":"website"},{"keyName":"property","name":"og:title","value":"Contact"},{"keyName":"property","name":"og:description","value":"This is the contact page"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"Contact"},{"name":"twitter:description","value":"This is the contact page"}],"title":"Contact","type":"stackbit_page_meta"},"stackbit_url_path":"/contact","template":"advanced"},"html":""},{"url":"/","relativePath":"index.md","relativeDir":"","base":"index.md","name":"index","frontmatter":{"title":"Reza Faiz Atta Rahman | Portfolio | Work | Blog","hide_title":true,"sections":[{"actions":[{"label":"Get in touch","style":"link","type":"action","url":"/contact"}],"content":"I’m a designer with 5+ years of experience in interaction design, research, and design system.\n\nI'm currently designing experiment products at Xendit. Previously, I've worked with ShopBack, Bukalapak, CoLearn, and MTarget to design and scale up their products.\n","section_id":"hero","title":"Hi, I'm Reza 🙌","type":"section_hero"},{"layout_style":"mosaic","projects_number":6,"section_id":"latest-projects","subtitle":"An optional subtitle of the section","title":"Portfolio","type":"section_portfolio","view_all_label":"View All","view_all_url":"portfolio"},{"actions":[{"label":"View All","style":"button","type":"action","url":"blog"}],"col_number":"three","posts_number":3,"section_id":"latest-posts","subtitle":"An optional subtitle of the section","title":"Latest Exercise","type":"section_posts"}],"seo":{"description":"Reza Faiz Atta Rahman | Portfolio | Work | Blog","extra":[{"keyName":"property","name":"og:type","value":"website"},{"keyName":"property","name":"og:title","value":"Reza Faiz Atta Rahman | Portfolio | Work | Blog"},{"keyName":"property","name":"og:description","value":"Reza Faiz Atta Rahman | Portfolio | Work | Blog"},{"keyName":"property","name":"og:image","relativeUrl":true,"value":"images/exto_preview.png"},{"name":"twitter:card","value":"summary_large_image"},{"name":"twitter:title","value":"Reza Faiz Atta Rahman | Portfolio | Work | Blog"},{"name":"twitter:description","value":"Reza Faiz Atta Rahman | Portfolio | Work | Blog"},{"name":"twitter:image","relativeUrl":true,"value":"images/exto_preview.png"}],"title":"Reza Faiz Atta Rahman | Portfolio | Work | Blog","type":"stackbit_page_meta"},"stackbit_url_path":"/","template":"advanced"},"html":""},{"url":"/style-guide/","relativePath":"style-guide.md","relativeDir":"","base":"style-guide.md","name":"style-guide","frontmatter":{"title":"Style Guide","seo":{"description":"A reference for suggested typographic treatment and styles for your content","extra":[{"keyName":"property","name":"og:type","value":"website"},{"keyName":"property","name":"og:title","value":"Theme Style Guide"},{"keyName":"property","name":"og:description","value":"A reference for suggested typographic treatment and styles for your content"},{"keyName":"property","name":"og:image","relativeUrl":true,"value":"images/exto_preview.png"},{"name":"twitter:card","value":"summary_large_image"},{"name":"twitter:title","value":"Theme Style Guide"},{"name":"twitter:description","value":"A reference for suggested typographic treatment and styles for your content"},{"name":"twitter:image","relativeUrl":true,"value":"images/exto_preview.png"}],"title":"Theme Style Guide","type":"stackbit_page_meta"},"stackbit_url_path":"/style-guide","subtitle":"The style guide provides you with a blueprint of default post and page styles. The style guide is also a great reference for suggested typographic treatment and styles for your content.","template":"page"},"html":"<p><strong>This is a paragraph</strong>. Pellentesque habitant morbi <em>tristique senectus et netus et malesuada</em> fames ac turpis egestas. Vestibulum <a href=\"https://www.google.com\">tortor quam</a>, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit <mark>amet est et sapien ullamcorper</mark> pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.</p>\n<h1>This is an H1</h1>\n<p>Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, this is marked text ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis. Fusce et ipsum et nulla tristique facilisis.</p>\n<h2>This is an H2</h2>\n<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.</p>\n<h3>This is an H3</h3>\n<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.</p>\n<h4>This is an H4</h4>\n<p>Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis.</p>\n<h2>Quoting</h2>\n<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>\n<blockquote>\n<p>Creativity is allowing yourself to make mistakes. Design is knowing which ones to keep. <cite>Scott Adams</cite></p>\n</blockquote>\n<p>Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.</p>\n<hr>\n<h2>Unordered Lists</h2>\n<ul>\n<li>Donec non tortor in arcu mollis feugiat</li>\n<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</li>\n<li>Donec id eros eget quam aliquam gravida</li>\n<li>Vivamus convallis urna id felis</li>\n<li>Nulla porta tempus sapien</li>\n</ul>\n<h2>Ordered Lists</h2>\n<ol>\n<li>Donec non tortor in arcu mollis feugiat</li>\n<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</li>\n<li>Donec id eros eget quam aliquam gravida</li>\n<li>Vivamus convallis urna id felis</li>\n<li>Nulla porta tempus sapien</li>\n</ol>\n<h2>Code Blocks</h2>\n<p>Blocks of code are either fenced by lines with three back-ticks, or are indented with four spaces.</p>\n<pre><code>&#x3C;!-- Some example CSS code -->\nbody {\n  color:red;\n}\n</code></pre>\n<h2>Tables</h2>\n<table>\n    <caption>Table with thead, tfoot, and tbody</caption>\n  <thead>\n    <tr>\n      <th>Header content 1</th>\n      <th>Header content 2</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Body content 1</td>\n      <td>Body content 2</td>\n    </tr>\n  </tbody>\n  <tfoot>\n    <tr>\n      <td>Footer content 1</td>\n      <td>Footer content 2</td>\n    </tr>\n  </tfoot>\n</table>"},{"url":"/thank-you/","relativePath":"thank-you.md","relativeDir":"","base":"thank-you.md","name":"thank-you","frontmatter":{"title":"Thank You!","image":"https://cdn.sanity.io/images/b2nbllp8/production/24523a3ab6895d34e7191af7780f9e1f31c8f3c9-1350x900.jpg","image_alt":"Thank You Led Signage","stackbit_url_path":"/thank-you","template":"page"},"html":"<p>Thank you for contacting us! We will get back in touch with you soon.</p>\n<p><strong>Have a great day!</strong></p>"},{"url":"/blog/book/","relativePath":"blog/book.md","relativeDir":"blog","base":"book.md","name":"book","frontmatter":{"title":"Book Subscription App - Exploration","date":"2019-11-04","image":"https://cdn.sanity.io/images/b2nbllp8/production/b5cc739f86f6a64b1b6a575bf4a5fe6676a267f4-1600x1200.png","image_alt":"Book Subscription App - Exploration","seo":{"extra":[{"keyName":"property","name":"og:type","value":"article"},{"keyName":"property","name":"og:title","value":"Book Subscription App - Exploration"},{"keyName":"property","name":"og:description","value":"Diam sit amet nisl suscipit adipiscing bibendum est ultricies integer"},{"keyName":"property","name":"og:image","relativeUrl":true,"value":"images/6.jpg"},{"name":"twitter:card","value":"summary_large_image"},{"name":"twitter:title","value":"Book Subscription App - Exploration"},{"name":"twitter:description","value":"Diam sit amet nisl suscipit adipiscing bibendum est ultricies integer"},{"name":"twitter:image","relativeUrl":true,"value":"images/6.jpg"}],"title":"Book Subscription App - Exploration","type":"stackbit_page_meta"},"stackbit_url_path":"/blog/book","template":"post","thumb_image":"https://cdn.sanity.io/images/b2nbllp8/production/b5cc739f86f6a64b1b6a575bf4a5fe6676a267f4-1600x1200.png","thumb_image_alt":"Book Subscription App - Exploration"},"html":"<p>An exploration about Book subscription app. There are three pages, first is home, a preview of the book and minimize mode when you read the book.</p>\n<p>Credits:</p>\n<ul>\n<li>Image content from <a href=\"https://www.goodreads.com\">https://www.goodreads.com</a></li>\n</ul>"},{"url":"/blog/","relativePath":"blog/index.md","relativeDir":"blog","base":"index.md","name":"index","frontmatter":{"title":"Exercise","col_number":"three","hide_title":false,"seo":{"description":"Explorations in visual design and storytelling to practice control over perspective.","extra":[{"keyName":"property","name":"og:type","value":"website"},{"keyName":"property","name":"og:title","value":"Exercise"},{"keyName":"property","name":"og:description","value":"Explorations in visual design and storytelling to practice control over perspective."},{"keyName":"property","name":"og:image","relativeUrl":true,"value":"images/12.jpg"},{"name":"twitter:card","value":"summary_large_image"},{"name":"twitter:title","value":"Exercise"},{"name":"twitter:description","value":"Explorations in visual design and storytelling to practice control over perspective."},{"name":"twitter:image","relativeUrl":true,"value":"images/12.jpg"}],"title":"Exercise","type":"stackbit_page_meta"},"stackbit_url_path":"/blog/","subtitle":"Explorations in visual design and storytelling to practice control over perspective.","template":"blog"},"html":""},{"url":"/blog/kuasa/","relativePath":"blog/kuasa.md","relativeDir":"blog","base":"kuasa.md","name":"kuasa","frontmatter":{"title":"Kuasa - Online learning platform - Landing Page","date":"2020-03-21","image":"https://cdn.sanity.io/images/b2nbllp8/production/305d3ae94f7d7410db96aeafd3993cc74e9a35c0-1600x1200.png","image_alt":"Kuasa - Online learning platform - Landing Page","seo":{"extra":[{"keyName":"property","name":"og:type","value":"article"},{"keyName":"property","name":"og:title","value":"Kuasa - Online learning platform - Landing Page"},{"keyName":"property","name":"og:description","value":"Vis accumsan feugiat adipiscing nisl amet adipiscing accumsan blandit accumsan sapien blandit"},{"keyName":"property","name":"og:image","relativeUrl":true,"value":"images/11.jpg"},{"name":"twitter:card","value":"summary_large_image"},{"name":"twitter:title","value":"Kuasa - Online learning platform - Landing Page"},{"name":"twitter:description","value":"Vis accumsan feugiat adipiscing nisl amet adipiscing accumsan blandit accumsan sapien blandit"},{"name":"twitter:image","relativeUrl":true,"value":"images/11.jpg"}],"title":"Kuasa - Online learning platform - Landing Page","type":"stackbit_page_meta"},"stackbit_url_path":"/blog/kuasa","template":"post","thumb_image":"https://cdn.sanity.io/images/b2nbllp8/production/305d3ae94f7d7410db96aeafd3993cc74e9a35c0-1600x1200.png","thumb_image_alt":"Kuasa - Online learning platform - Landing Page"},"html":"<p>Hey folks! 🙌</p>\n<p>This is the latest exploration I am working on today. It's a web design for a learn new things and be a master. This web app is for the people who want to empowering themself.</p>\n<p>Implemented with features such as discover categories, detail course, challenges, etc.</p>\n<p>More screens will be shared soon. Until then, enjoy the shot!</p>"},{"url":"/blog/meditation/","relativePath":"blog/meditation.md","relativeDir":"blog","base":"meditation.md","name":"meditation","frontmatter":{"title":"Meditation App - Exploration","date":"2020-03-05","image":"https://cdn.sanity.io/images/b2nbllp8/production/f1b80e584161929e58fceb369da4b60b29699b1a-1000x750.png","image_alt":"Meditation App - Exploration","seo":{"extra":[{"keyName":"property","name":"og:type","value":"article"},{"keyName":"property","name":"og:title","value":"Meditation App - Exploration"},{"keyName":"property","name":"og:description","value":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt"},{"keyName":"property","name":"og:image","relativeUrl":true,"value":"images/5.jpg"},{"name":"twitter:card","value":"summary_large_image"},{"name":"twitter:title","value":"Meditation App - Exploration"},{"name":"twitter:description","value":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt"},{"name":"twitter:image","relativeUrl":true,"value":"images/5.jpg"}],"title":"Meditation App - Exploration","type":"stackbit_page_meta"},"stackbit_url_path":"/blog/meditation","subtitle":"Meditation App - Exploration","template":"post","thumb_image":"https://cdn.sanity.io/images/b2nbllp8/production/f1b80e584161929e58fceb369da4b60b29699b1a-1000x750.png","thumb_image_alt":"Meditation App - Exploration"},"html":"<p>Hey-ho!</p>\n<p>This is the latest exploration I am working on. It's a meditation app to support your life better. I also using open peeps illustration to make it more delightful.</p>\n<p>🧧Duplicate the design on <a href=\"https://www.figma.com/community/file/817475855650777519/Meditation-App-%7C-Semedi---Exploration\">Figma</a>.</p>"},{"url":"/blog/pawon/","relativePath":"blog/pawon.md","relativeDir":"blog","base":"pawon.md","name":"pawon","frontmatter":{"title":"Pawon - Indonesian recipe ideas - UI Design","date":"2020-03-19","image":"https://cdn.sanity.io/images/b2nbllp8/production/b7bce9aadb403364fad0198da0ec597c3a3187a5-1000x750.png","image_alt":"Pawon - Indonesian recipe ideas - UI Design","seo":{"description":"Pawon - Indonesian recipe ideas - UI Design","extra":[{"keyName":"property","name":"og:type","value":"article"},{"keyName":"property","name":"og:title","value":"Understanding Street Photography"},{"keyName":"property","name":"og:description","value":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt"},{"keyName":"property","name":"og:image","relativeUrl":true,"value":"images/8.jpg"},{"name":"twitter:card","value":"summary_large_image"},{"name":"twitter:title","value":"Understanding Street Photography"},{"name":"twitter:description","value":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt"},{"name":"twitter:image","relativeUrl":true,"value":"images/8.jpg"}],"title":"Pawon - Indonesian recipe ideas - UI Design","type":"stackbit_page_meta"},"stackbit_url_path":"/blog/pawon","subtitle":"Pawon - Indonesian recipe ideas - UI Design","template":"post","thumb_image":"https://cdn.sanity.io/images/b2nbllp8/production/b7bce9aadb403364fad0198da0ec597c3a3187a5-1000x750.png","thumb_image_alt":"Pawon - Indonesian recipe ideas - UI Design"},"html":"<p>Heyho 🙌</p>\n<p>This is the latest exploration I am working on today. It's an app design for a recipe to guiding you when cooking. This application for the people who like to cook.</p>\n<p>Implemented with features such as discover recipes based on Indonesian region, featured recipes with stories style, etc.</p>\n<p>Duplicate the design on <a href=\"https://www.figma.com/community/file/822578191198308001/Pawon---Indonesian-recipe-ideas---UI-Design\">Figma</a>.</p>"},{"url":"/blog/rdio/","relativePath":"blog/rdio.md","relativeDir":"blog","base":"rdio.md","name":"rdio","frontmatter":{"title":"Music Streaming Landing Page - Exploration","date":"2020-03-18","image":"https://cdn.sanity.io/images/b2nbllp8/production/118a2a6be0ab95a8517ecdd3dd6b6eee628f2eb5-1600x1200.png","image_alt":"Music Streaming Landing Page - Exploration","seo":{"description":"Music Streaming Landing Page - Exploration","extra":[{"keyName":"property","name":"og:type","value":"article"},{"keyName":"property","name":"og:title","value":"Music Streaming Landing Page - Exploration"},{"keyName":"property","name":"og:description","value":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore"},{"keyName":"property","name":"og:image","relativeUrl":true,"value":"images/13.jpg"},{"name":"twitter:card","value":"summary_large_image"},{"name":"twitter:title","value":"Music Streaming Landing Page - Exploration"},{"name":"twitter:description","value":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore"},{"name":"twitter:image","relativeUrl":true,"value":"images/13.jpg"}],"title":"Music Streaming Landing Page - Exploration","type":"stackbit_page_meta"},"stackbit_url_path":"/blog/rdio","subtitle":"Music Streaming Landing Page - Exploration","template":"post","thumb_image":"https://cdn.sanity.io/images/b2nbllp8/production/118a2a6be0ab95a8517ecdd3dd6b6eee628f2eb5-1600x1200.png","thumb_image_alt":"Music Streaming Landing Page - Exploration"},"html":"<p>Hey folks!</p>\n<p>This is the latest exploration I am working on. This is a landing page of music streaming service. Combined two different font in the same section makes the point more prominent.</p>\n<p>🧧Duplicate the design on <a href=\"https://www.figma.com/community/file/822208257356121745/Music-streaming-landing-page-%7C-Rsound---Exploration\">Figma</a>.</p>"},{"url":"/blog/redesign-shopee/","relativePath":"blog/redesign-shopee.md","relativeDir":"blog","base":"redesign-shopee.md","name":"redesign-shopee","frontmatter":{"title":"Redesign Shopping Experience at Shopee","date":"2020-05-23","seo":{"extra":[{"keyName":"property","name":"og:type","value":"article"},{"keyName":"property","name":"og:title","value":"Redesign Shopping Experience at Shopee — English"},{"keyName":"property","name":"og:description","value":"Id massa aliquet arcu accumsan lorem amet accumsan commodo odio cubilia ac eu interdum placerat"},{"keyName":"property","name":"og:image","relativeUrl":true,"value":"images/10.jpg"},{"name":"twitter:card","value":"summary_large_image"},{"name":"twitter:title","value":"Redesign Shopping Experience at Shopee — English"},{"name":"twitter:description","value":"Id massa aliquet arcu accumsan lorem amet accumsan commodo odio cubilia ac eu interdum placerat"},{"name":"twitter:image","relativeUrl":true,"value":"images/10.jpg"}],"title":"Redesign Shopping Experience at Shopee — English","type":"stackbit_page_meta"},"stackbit_url_path":"/blog/redesign-shopee","template":"post","thumb_image":"https://cdn.sanity.io/images/b2nbllp8/production/33d6e174d944b1cfc15b796582aa5bc61b5e4b90-800x601.png","thumb_image_alt":"Redesign Shopping Experience at Shopee — English"},"html":"<p>Shopee is the leading e-commerce platform in Southeast Asia and Taiwan. This is the story of how I exercise to redesign the Shopping Experience at Shopee.</p>\n<p><a href=\"https://paper.dropbox.com/doc/Redesign-Shopping-Experience-at-Shopee-English--BL5tmQLidLTJeWm3bJFwAAaMAQ-qNAUJVnpyKlGvY4FxDEWM\">Read more</a></p>"},{"url":"/blog/spectrum/","relativePath":"blog/spectrum.md","relativeDir":"blog","base":"spectrum.md","name":"spectrum","frontmatter":{"title":"Introducing Spectrum's Unofficial Mobile App","date":"2020-04-01","image":"https://cdn.sanity.io/images/b2nbllp8/production/107ae072e8728f31137f20ca5fb73c259e769550-1000x750.png","image_alt":"A pile of books on the table","seo":{"description":"Introducing Spectrum's Unofficial Mobile App","extra":[{"keyName":"property","name":"og:type","value":"article"},{"keyName":"property","name":"og:title","value":"Introducing Spectrum's Unofficial Mobile App"},{"keyName":"property","name":"og:description","value":"Introducing Spectrum's Unofficial Mobile App"},{"keyName":"property","name":"og:image","relativeUrl":true,"value":"images/12.jpg"},{"name":"twitter:card","value":"summary_large_image"},{"name":"twitter:title","value":"Introducing Spectrum's Unofficial Mobile App"},{"name":"twitter:description","value":"Introducing Spectrum's Unofficial Mobile App"},{"name":"twitter:image","relativeUrl":true,"value":"images/12.jpg"}],"title":"Introducing Spectrum's Unofficial Mobile App","type":"stackbit_page_meta"},"stackbit_url_path":"/blog/spectrum","subtitle":"Introducing Spectrum's Unofficial Mobile App","template":"post","thumb_image":"https://cdn.sanity.io/images/b2nbllp8/production/107ae072e8728f31137f20ca5fb73c259e769550-1000x750.png","thumb_image_alt":"Introducing Spectrum's Unofficial Mobile App"},"html":"<p>Introducing Spectrum's Unofficial Mobile App</p>\n<p>Spectrum is a community platform for the future. This is an unofficial mobile design of the Spectrum App.\nEffortlessly to explore topics and communities from your mobile phone. No need to get annoying distractions every time.</p>\n<p><a href=\"https://www.figma.com/community/file/827272014244021089/Spectrum.chat-Mobile-(Unofficial)---Communities-Online-Platform---UI-Design\">Try prototype and duplicate now.</a></p>"},{"url":"/portfolio/bazaar/","relativePath":"portfolio/bazaar.md","relativeDir":"portfolio","base":"bazaar.md","name":"bazaar","frontmatter":{"title":"Bazaar Design System (Coming Soon)","date":"2019-02-26","image":"https://cdn.sanity.io/images/b2nbllp8/production/168c93d9882481457eb7a8506f3f0a992cfecd02-800x600.png","image_alt":"Bazaar Design System (Coming Soon)","seo":{"description":"Establish Bukalapak’s design system within 6 months to make the product experience more cohesive & scalable. Initiated design toolkits and collaborated with designers to accomplish workflow problems to be effective.","extra":[{"keyName":"property","name":"og:type","value":"website"},{"keyName":"property","name":"og:title","value":"Bazaar Design System"},{"keyName":"property","name":"og:description","value":"Establish Bukalapak’s design system within 6 months to make the product experience more cohesive & scalable. Initiated design toolkits and collaborated with designers to accomplish workflow problems to be effective."},{"keyName":"property","name":"og:image","relativeUrl":true,"value":"images/4.jpg"},{"name":"twitter:card","value":"summary_large_image"},{"name":"twitter:title","value":"Bazaar Design System"},{"name":"twitter:description","value":"Establish Bukalapak’s design system within 6 months to make the product experience more cohesive & scalable. Initiated design toolkits and collaborated with designers to accomplish workflow problems to be effective."},{"name":"twitter:image","relativeUrl":true,"value":"images/4.jpg"}],"title":"Bazaar Design System","type":"stackbit_page_meta"},"stackbit_url_path":"/portfolio/bazaar","subtitle":"Establish Bukalapak’s design system within 6 months to make the product experience more cohesive & scalable. Initiated design toolkits and collaborated with designers to accomplish workflow problems to be effective.","template":"project","thumb_image":"https://cdn.sanity.io/images/b2nbllp8/production/168c93d9882481457eb7a8506f3f0a992cfecd02-800x600.png","thumb_image_alt":"Bazaar Design System (Coming Soon)"},"html":"<table>\n  <thead>\n    <tr>\n      <th>Role</th>\n      <th>Team</th>\n      <th>Time</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Design System</td>\n      <td>Working with Design, Engineer and Product Team</td>\n      <td>Nov 2018 – Jan 2020</td>\n    </tr>\n  </tbody>\n</table>\n<p>Establish Bukalapak’s design system within 6 months to make the product experience more cohesive &#x26; scalable. Initiated design toolkits and collaborated with designers to accomplish workflow problems to be effective.</p>"},{"url":"/portfolio/boengkoes/","relativePath":"portfolio/boengkoes.md","relativeDir":"portfolio","base":"boengkoes.md","name":"boengkoes","frontmatter":{"title":"Boengkoes, local Souvenirs Delivery App (Coming Soon)","date":"2017-12-08","image":"https://cdn.sanity.io/images/b2nbllp8/production/c397625c09ff1203f9e7cf367b0792a994b617e2-800x600.png","seo":{"description":"Designed a platform that empowers local souvenirs business to generate new ways to connect with travelers around Indonesia.","extra":[],"title":"Boengkoes, local Souvenirs Delivery App","type":"stackbit_page_meta"},"stackbit_url_path":"portfolio/boengkoes","subtitle":"Designed a platform that empowers local souvenirs business to generate new ways to connect with travelers around Indonesia.","template":"project","thumb_image":"https://cdn.sanity.io/images/b2nbllp8/production/c397625c09ff1203f9e7cf367b0792a994b617e2-800x600.png"},"html":"<p>Designed a platform that empowers local souvenir businesses to generate new ways to connect with travelers around Indonesia.</p>"},{"url":"/portfolio/bukalapak/","relativePath":"portfolio/bukalapak.md","relativeDir":"portfolio","base":"bukalapak.md","name":"bukalapak","frontmatter":{"title":"Redefine Seller transaction process using the Kanban system (Coming Soon)","date":"2019-01-05","image":"https://cdn.sanity.io/images/b2nbllp8/production/2f0a0758bb4ab3008227c62879bd070ae74743de-944x639.webp","image_alt":"Redefine Seller transaction process using the Kanban system","seo":{"description":"Designed Bukalapak merchants’ dashboard focusing on seller transactions that cover the journey from processing orders to courier receipt. The new dashboard was able to Increased 15% of sellers’ speed in managing transactions.","extra":[{"keyName":"property","name":"og:type","value":"website"},{"keyName":"property","name":"og:title","value":"Redefine Seller transaction process using the Kanban system"},{"keyName":"property","name":"og:description","value":"Designed Bukalapak merchants’ dashboard focusing on seller transactions that cover the journey from processing orders to courier receipt. The new dashboard was able to Increased 15% of sellers’ speed in managing transactions."},{"keyName":"property","name":"og:image","relativeUrl":true,"value":"images/5.jpg"},{"name":"twitter:card","value":"summary_large_image"},{"name":"twitter:title","value":"Redefine Seller transaction process using the Kanban system"},{"name":"twitter:description","value":"Designed Bukalapak merchants’ dashboard focusing on seller transactions that cover the journey from processing orders to courier receipt. The new dashboard was able to Increased 15% of sellers’ speed in managing transactions."},{"name":"twitter:image","relativeUrl":true,"value":"images/5.jpg"}],"title":"Redefine Seller transaction process using the Kanban system","type":"stackbit_page_meta"},"stackbit_url_path":"/portfolio/bukalapak","subtitle":"Designed Bukalapak merchants’ dashboard focusing on seller transactions that cover the journey from processing orders to courier receipt. The new dashboard was able to Increased 15% of sellers’ speed in managing transactions.","template":"project","thumb_image":"https://cdn.sanity.io/images/b2nbllp8/production/8cf9d77fa02610a08ee62329c6d1109bd11a1437-800x600.png","thumb_image_alt":"Redefine Seller transaction process using the Kanban system"},"html":"<table>\n  <thead>\n    <tr>\n      <th>Role</th>\n      <th>Team</th>\n      <th>Time</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Interface Design, Product Strategy, Prototyping</td>\n      <td>Working with Design, Engineer and Product Team</td>\n      <td>Apr 2018 – Nov 2018</td>\n    </tr>\n  </tbody>\n</table>\n<p>Designed Bukalapak merchants’ dashboard focusing on seller transactions that cover the journey from processing orders to courier receipt. The new dashboard was able to Increased 15% of sellers’ speed in managing transactions.</p>\n<iframe src=\"https://www.youtube.com/embed/-pdZkK_ZS0s\" allow=\"encrypted-media\" allowfullscreen=\"\" scrolling=\"no\" style=\"border: 0px; top: 0px; left: 0px; margin: 0px auto 35px; width: 100%; height: 100%; min-height: 510px; max-width: 680px;\"></iframe>"},{"url":"/portfolio/colearn/","relativePath":"portfolio/colearn.md","relativeDir":"portfolio","base":"colearn.md","name":"colearn","frontmatter":{"title":"Case Study: Democratizing the Future of Education in Indonesia","date":"2020-04-08","image":"https://cdn.sanity.io/images/b2nbllp8/production/56379eeec57aabc0678ec0f5729af2cb9804fec6-2928x1669.png","image_alt":"CoLearn's Screen","seo":{"description":"Designed an AI-powered \"automated doubt-solving\" and interactive class learning feature to help students study in the COVID-19 situation. Today, CoLearn is one of Indonesia's fastest-growing education technology companies, used by more than 2,5 million students. In 2020, Google Play selected CoLearn as the best app category for personal growth.","extra":[{"keyName":"property","name":"og:type","value":"website"},{"keyName":"property","name":"og:title","value":"Democratizing the Future of Education in Indonesia "},{"keyName":"property","name":"og:description","value":"Designed an AI-powered \"automated doubt-solving\" and interactive class learning feature to help students study in the COVID-19 situation. Today, CoLearn is one of Indonesia's fastest-growing education technology companies, used by more than 2,5 million students. In 2020, Google Play selected CoLearn as the best app category for personal growth."},{"keyName":"property","name":"og:image","relativeUrl":true,"value":"images/2.jpg"},{"name":"twitter:card","value":"summary_large_image"},{"name":"twitter:title","value":"Democratizing the Future of Education in Indonesia "},{"name":"twitter:description","value":"Designed an AI-powered \"automated doubt-solving\" and interactive class learning feature to help students study in the COVID-19 situation. Today, CoLearn is one of Indonesia's fastest-growing education technology companies, used by more than 2,5 million students. In 2020, Google Play selected CoLearn as the best app category for personal growth."},{"name":"twitter:image","relativeUrl":true,"value":"images/2.jpg"}],"title":"Democratizing the Future of Education in Indonesia","type":"stackbit_page_meta"},"stackbit_url_path":"/portfolio/colearn","subtitle":"Designed an AI-powered \"automated doubt-solving\" and interactive class learning feature to help students study in the COVID-19 situation. Today, CoLearn is one of Indonesia's fastest-growing education technology companies, used by more than 2,5 million students. In 2020, Google Play selected CoLearn as the best app category for personal growth.","template":"project","thumb_image":"https://cdn.sanity.io/images/b2nbllp8/production/b9f9f7a0da6f6ad8b57f3d9a167eeffc699a0c6c-800x600.png","thumb_image_alt":"CoLearn Logo"},"html":"<table>\n  <thead>\n    <tr>\n      <th>Role</th>\n      <th>Team</th>\n      <th>Time</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Interface Design, Product Strategy, Design System</td>\n      <td>Working with PM, Head of design, UX Writer, Graphic Designer and the C-Level</td>\n      <td>April 2020 - August 2020</td>\n    </tr>\n  </tbody>\n</table>\n<p>I designed an AI-powered \"automated doubt-solving\" and interactive class learning feature to help students study in the COVID-19 situation. Today, CoLearn is one of Indonesia's fastest-growing education technology companies, used by more than 2,5 million students. In 2020, Google Play selected CoLearn as the best app category for personal growth. </p>\n<h1>Problem Space</h1>\n<p>Colearn is an EdTech company that uses AI technology to help students understand math problems.</p>\n<p>Colearn started the business by collaborating with the offline tuition center to escalate Indonesia's education. Unfortunately, the offline tuition model has many challenges, like cost and time, which are only accessible to some students. Besides that, everything offline has become inefficient and scary because of COVID-19.</p>\n<p>As a Product Designer, I help CoLearn transform its business from a tuition center platform to an automated and scalable learning tool in Indonesia.</p>\n<h1>Think</h1>\n<p>One of the challenges to transform the business is we only have a limited time. I collaborate with the Customer Insight team to validate the early-stage changes to save time.</p>\n<p>We start by doing 1:1 interviews online with some students from various Indonesian cities. The goal is to understand how their learning experiences so far. Through the interview, we found three main points:</p>\n<div style=\"padding: 24px; margin: 24px 0px; background-color: #EFF6FF; border-radius: 16px; color: #111827;\">\n<h4>🔍 Three main insights</h4>\n<br>\n<ul>\n<li>The student has a problem finding the trusted resources to understand math lessons.</li>\n<li>The student has trouble finding a high-quality teacher to improve overall academic outcomes. </li>\n<li>The student has a problem practicing their skills because the available exam questions are limited. </li>\n</ul>\n</div>\n<h1>Explore</h1>\n<p>We try to explore the problem by creating a customer journey. We defined how the student will interact with the CoLearn.</p>\n<p><img src=\"https://rezadotdesigndotblog.files.wordpress.com/2021/04/colearn-users-journey-map-practice-platform.png?w=1024\"></p>\n<div style=\"text-align: center;margin: -24px 0px 40px 0px;\"><em>User’s Journey Map for Practice Platform feature</em></div>\n<p>We convert to a main flow from the customer journey then create the wireframe to confirm the idea. In this stage, we decide to make four main features:</p>\n<div style=\"padding: 24px; margin: 24px 0px; background-color: rgba(30, 64, 175, 1); border-radius: 16px; color: white;\">\n<h4>🎛 Four main feature</h4>\n<br>\n<p><strong>Tutor (Tutor finder feature)</strong><br>\nStudents can find and ask teachers when they have difficulty learning.</p>\n<p><strong>Bimbel</strong><br>\nStudents can find nearby tuition centers and join for long-term learning. It will give deeper understanding instead of only learn when they have difficulty. </p>\n<p><strong>Practice</strong><br>\nStudents can practice answering exam questions to improve their skills at any time. </p>\n<p><strong>Colearn+</strong><br>\nStudents can learn from inspirational people, so the student can have a role model to dream. </p>\n</div>\n<p><img src=\"https://rezadotdesigndotblog.files.wordpress.com/2021/04/colearn-main-flow.png?w=1024\"></p>\n<div style=\"text-align: center;margin: -24px 0px 40px 0px;\"><em>Main Flow - CoLearn 2.0</em></div>\n<h1>Build</h1>\n<h2>Wireframe</h2>\n<p>We create the wireframe base on the main flow that we make before. We try to confirm our hypothesis: Are the student problems solved by those features or not.</p>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/colearn/wireframe-1.png\"></p>\n<br>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/colearn/wireframe-2.png\"></p>\n<br>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/colearn/wireframe-3.png\"></p>\n<p>To start, we research with some students to test our wireframe. We hypothesize that students will not go to the tuition center anymore. So, we do A/B testing by creating two versions of the prototype; With the Bimbel feature and Without the Bimbel part.</p>\n<p>The research results are pretty surprising to us. Some of the features we explored before didn't meet student needs. Here is the insight:</p>\n<div style=\"padding: 24px; margin: 24px 0px; background-color: #EFF6FF; border-radius: 16px; color: #111827;\">\n<h4>🔍 Three main insights</h4>\n<br>\n<ul>\n<li>Most of them are not interested in going to a tuition center. But they need long-term learning to understand more. </li>\n<li>We found students having trouble asking several questions because they need to book the teacher then ask the schedule first, even though students need to solve the problem as soon as possible, in an instant way.</li>\n<li>We found students already have many role models to get inspired by, for example, from YouTube. So, we are not focusing on this part for now.</li>\n</ul>\n</div>\n<p>From those insights, we're thinking of merging and change some features. We come up with three main parts:</p>\n<div style=\"padding: 24px; margin: 24px 0px; background-color: rgba(30, 64, 175, 1); border-radius: 16px; color: white;\">\n<h4>🎛 Three main feature</h4>\n<br>\n<p><strong>Live Class</strong><br>\nStudents can join interactive live classes for long-term learning. It will give the student a deeper understanding. The Live Class is only limited to a small group to provide a personal experience. </p>\n<p><strong>Ask(automated doubt solving)</strong><br>\nStudents can solve the problem by taking a photo. This one is our main feature to support students learning math subjects. </p>\n<p><strong>Practice</strong><br>\nStudents can practice answering exam questions to improve their skills at any time.</p>\n</div>\n<h2>High-fidelity</h2>\n<h3>Live Class</h3>\n<h4>Learn concepts, practice together, and prepare for exams in a live and interactive class.</h4>\n<p>Live classes are designed to increase self-confidence to understand concepts. Teachers will teach live and interactively.</p>\n<p>This aims to make it easier for students to understand the concepts, practice questions, and prepare for exams.</p>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/colearn/live-1.png\"></p>\n<br>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/colearn/live-2.png\"></p>\n<h3>Ask(automated doubt solving)</h3>\n<h4>Get step-by-step video solutions to your math problems instantly.</h4>\n<p>The Ask feature is designed to make it easier for students to learn from their difficulties. So that students can understand concepts deeper and quickly.</p>\n<p>Students only need to take a photo of the question they don't understand. CoLearn will answer the questions automatically by providing video solutions. This feature is built using image recognition and natural language processing technology. </p>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/colearn/ads-1.png\"></p>\n<br>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/colearn/ads-2.png\"></p>\n<br>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/colearn/ads-3.png\"></p>\n<h3>Practice</h3>\n<h4>Prepare for the exams by practice answer the questions from various subjects.</h4>\n<p>The Practice feature is designed to improve students' skills in answering questions from various subjects to understand them better.</p>\n<p>Students can exercise themself to answer simulated exams like the original. After finish it, they will immediately receive the report to understand where to improve. </p>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/colearn/practice-1.png\"></p>\n<br>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/colearn/practice-2.png\"></p>\n<h3>WhatsApp Chatbot</h3>\n<h4>Increase user growth by bringing it from the most common channels</h4>\n<p>More than 80% of internet users in Indonesia use WhatsApp. Instead of promoting social media to download the app, we've been thinking of creating other channels to increase user growth.  </p>\n<p>Collaborating with the UX Writer, we design the WhatsApp chatbot feature. We use the Botsociety for the prototyping to make it easy to testing and share with stakeholders.</p>\n<h3>Design System</h3>\n<h4>Creating a cohesive and scalable design system</h4>\n<p>We created a design system to establish consistency and speed up the design and development process. We set out to create a design system that's simple, clear, and visually fun for the student.</p>\n<p>We start to define a foundation like colors, typography, elevation, icon, and grid. As a foundation, we describe making it easy to use across platforms like Web, iOS, and Android. Accordingly, the team can build a faster and more accessible interface.</p>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/colearn/token-1.png\"></p>\n<br>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/colearn/token-2.png\"></p>\n<p>Apart from Foundation, we build the Core UI components such as Avatar, Tag, Button, Form, and Alert. As the app continues to grow, we also create some new components as templates, such as Top Bar, Bottom Bar, and Feedback.</p>\n<p>By creating the design system, we want to make it easier for everything. Starting from designers themselves, engineers, and most students who use it.</p>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/colearn/component-1.png\"></p>\n<br>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/colearn/component-2.png\"></p>\n<br>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/colearn/component-3.png\"></p>\n<br>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/colearn/component-4.png\"></p>\n<div style=\"padding: 24px; margin: 24px 0px; background-color: #111827; border-radius: 16px; color: white;\">\n<h4>🏆 Launch</h4>\n<br>\n<p>In August 2020, the new CoLearn was launched. After 3 months of my involvement in the transformation, it was great to see the design brought to life and help students learn every day. </p>\n<p>Since it was released, the unique student registration growing over 2.5 million as of March 2021.  </p>\n<p>The most influential impact on success is on students. We've got some feedback from the student if they enjoyed and were helped by CoLearn.</p>\n</div>\n<blockquote>\n<p>Amazing! CoLearn is very helpful. Besides taking photos of questions, joining the Live Class is definitely fun. Taught basic concepts. Love Mathematics more and more!\" -Retta, Student</p>\n</blockquote>\n<blockquote>\n<p>\"Aaaa, so cool. CoLearn helped in doing practice for the UTBK (national exams). The discussion is also digested, then summarized into simple. The video is also short, so it's not complicated. Satisfied to have an application like this.\" -Sofiana, Student</p>\n</blockquote>"},{"url":"/portfolio/","relativePath":"portfolio/index.md","relativeDir":"portfolio","base":"index.md","name":"index","frontmatter":{"title":"Portfolio","layout_style":"mosaic","seo":{"description":"This is the portfolio page","extra":[{"keyName":"property","name":"og:type","value":"website"},{"keyName":"property","name":"og:title","value":"Portfolio"},{"keyName":"property","name":"og:description","value":"This is the portfolio page"},{"keyName":"property","name":"og:image","relativeUrl":true,"value":"images/1.jpg"},{"name":"twitter:card","value":"summary_large_image"},{"name":"twitter:title","value":"Portfolio"},{"name":"twitter:description","value":"This is the portfolio page"},{"name":"twitter:image","relativeUrl":true,"value":"images/1.jpg"}],"title":"Portfolio","type":"stackbit_page_meta"},"stackbit_url_path":"/portfolio/","subtitle":"This is an optional subtitle for the portfolio page.","template":"portfolio"},"html":""},{"url":"/portfolio/mailtarget/","relativePath":"portfolio/mailtarget.md","relativeDir":"portfolio","base":"mailtarget.md","name":"mailtarget","frontmatter":{"title":"Case Study: Reimagine the new experience of marketing campaigns tools","date":"2018-04-20","image":"https://cdn.sanity.io/images/b2nbllp8/production/42a70fec50fc62a392cfa06c5396e8189cc9a6a1-2944x1684.png","image_alt":"Designed interactive email marketing tools and worked with the technology teams to build products for Marketers. In the first year, Mtarget was able to reach more than 700 paid clients.","seo":{"description":"Designed interactive email marketing tools and worked with the technology teams to build products for Marketers. In the first year, Mtarget was able to reach more than 700 paid clients.","extra":[{"keyName":"property","name":"og:type","value":"website"},{"keyName":"property","name":"og:title","value":"Reimagine the new experience of marketing campaigns tools"},{"keyName":"property","name":"og:description","value":"Designed interactive email marketing tools and worked with the technology teams to build products for Marketers. In the first year, Mtarget was able to reach more than 700 paid clients."},{"keyName":"property","name":"og:image","relativeUrl":true,"value":"images/3.jpg"},{"name":"twitter:card","value":"summary_large_image"},{"name":"twitter:title","value":"Reimagine the new experience of marketing campaigns tools"},{"name":"twitter:description","value":"Designed interactive email marketing tools and worked with the technology teams to build products for Marketers. In the first year, Mtarget was able to reach more than 700 paid clients."},{"name":"twitter:image","relativeUrl":true,"value":"images/3.jpg"}],"title":"Reimagine the new experience of marketing campaigns tools","type":"stackbit_page_meta"},"stackbit_url_path":"/portfolio/mailtarget","subtitle":"Designed interactive email marketing tools and worked with the technology teams to build products for Marketers. In the first year, Mtarget was able to reach more than 700 paid clients.","template":"project","thumb_image":"https://cdn.sanity.io/images/b2nbllp8/production/8fee104cddc69ef453d4ec1b21b61bcb0aa7fb87-800x600.png","thumb_image_alt":"Mtarget logo"},"html":"<table>\n  <thead>\n    <tr>\n      <th>Role</th>\n      <th>Team</th>\n      <th>Time</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Interface Design, Product Strategy, Design System</td>\n      <td>Working with the CEO and 5-8 engineers (as the team grew)</td>\n      <td>Nov 2016 – Apr 2018</td>\n    </tr>\n  </tbody>\n</table>\n<h1>The beginning</h1>\n<p>Email is always underestimated. However, email is the oldest marketing channel and has been proven for a long time. Therefore email remains one of the best alternatives for marketing campaigns. Unfortunately making a marketing campaign is not as easy as imagined. The tools available are quite complicated and difficult to use. MailTarget which its main product is a marketing tool was created to facilitate individuals, SMEs and large companies in conducting marketing campaigns.</p>\n<h1>Insights</h1>\n<p>To gain insight I conducted a competitive analysis of 16 popular marketing tools. Some of the main points that are used as assessment parameters are how to write and send an email, how the dashboard works, how to analyze email report data, how to create an automation campaign and the general problem in the marketing campaigns.</p>\n<p>Results of the analysis indicated that the user have difficulty to create and customized email. Other than that, users have trouble to read an email report and don’t know what should they do after reading email report. For more detail, you can see the list of the table below:</p>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/mtarget/mtarget-ca-doc-public.png\"></p>\n<div style=\"text-align: center;margin: -24px 0px 40px 0px;\"><em>Note: Some results from the analysis cannot be shared because they are limited company NDA policy.</em></div>\n<h1>The challenge</h1>\n<p>How to create a powerful marketing tool that is easy to use by the user so that they can conduct a marketing campaign effortlessly. Besides, as an early startup, we need rapid development to create the product and ship it to the users as soon as possible.</p>\n<h1>Principle</h1>\n<p>To create a product, we need to set some of the principles. It can be used for us to guide when we want to build a feature at MailTarget. In this case, the principle divided into three sections. The main principle, support principle and development principle.</p>\n<div style=\"padding: 24px; margin: 24px 0px; background-color: #F3F4F6; border-radius: 16px; color: #111827;\">\n<h4>🥇 The main principle</h4>\n<br>\n<p><strong>Reduce the steps to make it easy to use</strong><br>\nThe design should be straightforward and fewer steps, so the users being able to understand how the tool is work.</p>\n<p><strong>Effortless to find what they need</strong><br>\nDon’t give the users unnecessary information, so the users don’t try to hard to get what they need.</p>\n<p><strong>Suggest action point continue to the next steps</strong><br>\nThe design should give suggestion action point, so the users being able to continue to the next steps without thinking more and they are able to think other important things.</p>\n</div>\n<div style=\"padding: 24px; margin: 24px 0px; background-color: #F3F4F6; border-radius: 16px; color: #111827;\">\n<h4>🥈 The support principle</h4>\n<br>\n<p><strong>Always ready, always there</strong><br>\nThe users should feel accompanied when they using the tools, so if there is any trouble they will get support as soon as possible.</p>\n<p><strong>Step by step, little by little</strong><br>\nThe users should feel able to help step by step when they using the tools to reach the goals.</p>\n</div>\n<div style=\"padding: 24px; margin: 24px 0px; background-color: #F3F4F6; border-radius: 16px; color: #111827;\">\n<h4>🥉 The development principle</h4>\n<br>\n<p><strong>Build fast, fail fast</strong><br>\nThe team is able to release the feature as soon as possible, so they able to get feedback fast from the users.</p>\n<p><strong>Easy to design, easy to develop</strong><br>\nThe team is able to design and develop without complicated way, so they able to release fast to the users.</p>\n</div>\n<h1>Design</h1>\n<h2>Email Marketing</h2>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/mtarget/mtarget-doc-email-wireframe.png\"></p>\n<p>The users being able to edit the content of email directly inside the editor (what you see is what you get). So the users being able to make changes without imagining how the email can be looked. There are also available many components for supporting the users to make it easy when they create an email.</p>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/mtarget/mtarget-doc-email-high.png\"></p>\n<p>Besides that, the steps for making an email designed with concise. Less than 5 steps, the users being able to send email to hundred or million subscribers.</p>\n<h2>Email Report</h2>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/mtarget/mtarget-doc-report-wireframe.png\"></p>\n<p>The report designed with concise and meaningful. So when the users read the report they being able to know easily about performance the email which they sent.</p>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/mtarget/mtarget-doc-report-high.png\"></p>\n<p>Besides that, in each section, there is a recommended action for users. For example, users being able to give tags for contacts who opened an email to follow up for the next email.</p>\n<h2>Email automation</h2>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/mtarget/mtarget-doc-automation-wireframe.png\"></p>\n<p>Email automation designed straightforward and match with what user wants to do. For example, users being able to create a marketing campaign by themself like “Download ebook via email” in just a few steps.</p>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/mtarget/mtarget-doc-automation-high.png\"></p>\n<p>To make it easier, I designed a pre-configured template feature for email marketing and email automation. Accordingly, users being able to use the template to make the marketing campaign fast and effortless.</p>\n<h2>Support feature</h2>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/mtarget/mtarget-doc-support-wireframe.png\"></p>\n<p>As a Saas company, support is an important thing for users. I designed guide feature for first time user from registration until sent an email campaign.</p>\n<p>Besides that, I also designed tutorial and integrated chat feature from crisp which always accessible from all pages. So the users feel accompanied by MailTarget team anytime.</p>\n<h2>Design system</h2>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/mtarget/mtarget-doc-design-system.png\"></p>\n<p>As a startup that was just built, release product as soon as possible is a must. The design should be designed fast and then engineers should develop and build fast too, so the product is able to release soon. Therefore we build a design system. By using it, we are able to focus on the business and how to implement it.</p>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/mtarget/mtarget-public-design-system-foundation.png\"></p>\n<br>\n<p><img src=\"https://rezafaizarahman.github.io/cloudup/portfolio/mtarget/mtarget-public-design-system-component.png\"></p>\n<h1>Result</h1>\n<p>As an early startup, MailTarget was able to reach more than 700 paid clients in the first year. The details about that can be read at <a href=\"https://dailysocial.id/post/mailtarget-receives-seed-funding-from-azure-ventures-and-angel-investor\">dailysocial.id</a>.</p>\n<p>Making products from scratch is admittedly difficult. After it was released, I knew so many things were not going well and had to be improved.</p>\n<p>Making products that are easy to use is not an easy matter. Define the principle in the early of the project to makes it easy to understand is absolutely a necessity.</p>"},{"url":"/portfolio/shopback/","relativePath":"portfolio/shopback.md","relativeDir":"portfolio","base":"shopback.md","name":"shopback","frontmatter":{"title":"ShopBack Design System (Coming Soon)","date":"2020-08-11","image":"https://cdn.sanity.io/images/b2nbllp8/production/098f45e547fa740376607874ded72ded797aca97-3936x2256.png","image_alt":"ShopBack Design System","seo":{"description":"ShopBack is the largest rewards and discovery platform in Asia-Pacific. I’m responsible for evolving and centralizing a cross-platform design system for an expansive suite of global products.","extra":[{"keyName":"property","name":"og:type","value":"website"},{"keyName":"property","name":"og:title","value":"Project Title 1"},{"keyName":"property","name":"og:description","value":"This is the project 1 description"},{"keyName":"property","name":"og:image","relativeUrl":true,"value":"images/1.jpg"},{"name":"twitter:card","value":"summary_large_image"},{"name":"twitter:title","value":"Project Title 1"},{"name":"twitter:description","value":"This is the project 1 description"},{"name":"twitter:image","relativeUrl":true,"value":"images/1.jpg"}],"title":"ShopBack Design System","type":"stackbit_page_meta"},"stackbit_url_path":"/portfolio/shopback","subtitle":"ShopBack Design System","template":"project","thumb_image":"https://cdn.sanity.io/images/b2nbllp8/production/bbf02f2d167c2f21f5698cf54a31d277a9bf15dd-800x600.png","thumb_image_alt":"ShopBack Logo"},"html":"<table>\n  <thead>\n    <tr>\n      <th>Role</th>\n      <th>Team</th>\n      <th>Time</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Design System</td>\n      <td>Working with Design, Engineer and Product Team</td>\n      <td>August 2020 - Present</td>\n    </tr>\n  </tbody>\n</table>\n<p>ShopBack is the largest rewards and discovery platform in Asia-Pacific. I’m responsible for evolving and centralizing a cross-platform design system for an expansive suite of global products.</p>"}],"site":{"siteMetadata":{"accent_color":"blue","color_scheme":"light","domain":"https://unique-sun-51122.netlify.app","favicon":"https://cdn.sanity.io/images/b2nbllp8/production/0a34b276feb755bae2612b516cf80549896b3657-74x14.svg","footer":{"content":"&copy; 2021 Reza Faiz Atta Rahman","has_social":true,"links":[],"social_links":[{"icon":"linkedin","label":"LinkedIn","new_window":true,"style":"link","type":"action","url":"https://www.linkedin.com/in/rezafaizarahman/"},{"label":"Figma","new_window":true,"style":"link","type":"action","url":"https://figma.com/@reza"},{"icon":"dribbble","label":"Dribbble","new_window":true,"style":"link","type":"action","url":"https://dribbble.com/rezafaizarahman"},{"icon":"twitter","label":"Twitter","new_window":true,"style":"link","type":"action","url":"https://twitter.com/rezafaizarahman"}],"type":"footer"},"header":{"has_nav":true,"logo_img":"https://cdn.sanity.io/images/b2nbllp8/production/0a34b276feb755bae2612b516cf80549896b3657-74x14.svg","logo_img_alt":"Reza Faiz Atta Rahman | Portfolio | Work | Blog","nav_links":[{"label":"Portfolio","style":"link","type":"action","url":"/portfolio/"},{"label":"Exercise","style":"link","type":"action","url":"/blog/"},{"label":"About","new_window":true,"style":"link","type":"action","url":"https://read.cv/reza"},{"label":"Resume","new_window":true,"style":"link","type":"action","url":"http://link.reza.fyi/resume"},{"label":"Contact","style":"link","type":"action","url":"/contact/"}],"title":"reza","type":"header"},"title":"Reza Faiz Atta Rahman | Portfolio | Work | Blog"},"pathPrefix":"","data":{}},"menus":{}}},"staticQueryHashes":[]}