feed.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/">
    <title>Taha Mousavi</title>
    <link href="https://tahamousavi.github.io/feed.xml" rel="self" />
    <link href="https://tahamousavi.github.io" />
    <updated>2024-11-23T18:52:08+03:30</updated>
    <author>
        <name>Taha Mousavi</name>
    </author>
    <id>https://tahamousavi.github.io</id>

    <entry>
        <title>About Me</title>
        <author>
            <name>Taha Mousavi</name>
        </author>
        <link href="https://tahamousavi.github.io/about-me.html"/>
        <id>https://tahamousavi.github.io/about-me.html</id>

        <updated>2024-11-23T18:52:08+03:30</updated>
            <summary>
                <![CDATA[
                    My name is Taha (طه) Mousavi, and I am a 39-year-old designer based in Iran. With 14 years of professional&hellip;
                ]]>
            </summary>
        <content type="html">
            <![CDATA[
                <h3><figure class="post__image post__image--center"><img  src="https://tahamousavi.github.io/media/posts/17/Taha-Mousavi.JPG" alt="Taha Mousavi" width="1280" height="860"></figure></h3>
<h3><span data-preserver-spaces="true">My name is Taha (طه) Mousavi, and I am a 39-year-old designer based in Iran. With 14 years of professional experience, I have collaborated with some of Iran's most successful startups and brands, including <a target="_blank" href="https://www.linkedin.com/company/divarofficial/about/" class="editor-rtfLink" rel="noopener">Divar</a>, <a href="https://www.linkedin.com/company/mia.re/about/" target="_blank" rel="noopener noreferrer">Miare</a>, <a target="_blank" href="https://www.linkedin.com/company/tapsi/about/" class="editor-rtfLink" rel="noopener">TAPSI</a>, <a target="_blank" href="https://www.linkedin.com/company/torob/about/" class="editor-rtfLink" rel="noopener">Torob</a>, and <a target="_blank" href="https://www.linkedin.com/company/porsline/about/" class="editor-rtfLink" rel="noopener">Porsline</a>.</span></h3>
<p> </p>
<p><strong><a href="https://tahamousavi.github.io/Taha Mousavi CV 2024.pdf" target="_blank" rel="noopener noreferrer" download>[ Download CV ]</a>     </strong><strong><a href="https://www.linkedin.com/in/tahamousavi" target="_blank" rel="noopener noreferrer">[ Linkedin Profile ]</a></strong></p>
<p> </p>
<p> </p>
<p> </p>
            ]]>
        </content>
    </entry>
    <entry>
        <title>Data-Driven Product Design at Torob</title>
        <author>
            <name>Taha Mousavi</name>
        </author>
        <link href="https://tahamousavi.github.io/torob.html"/>
        <id>https://tahamousavi.github.io/torob.html</id>
        <media:content url="https://tahamousavi.github.io/media/posts/3/Torob-cover.webp" medium="image" />
            <category term="Product Design"/>

        <updated>2022-12-23T22:00:40+03:30</updated>
            <summary>
                <![CDATA[
                        <img src="https://tahamousavi.github.io/media/posts/3/Torob-cover.webp" alt="" />
                    Company: Torob Products: Torob Website and Android App My role: Product Designer Team: 4 Engineers, Founder, Myself 2020 – 2021&hellip;
                ]]>
            </summary>
        <content type="html">
            <![CDATA[
                    <p><img src="https://tahamousavi.github.io/media/posts/3/Torob-cover.webp" class="type:primaryImage" alt="" /></p>
                <div id=":iv" class="Ar Au Ao">
<div id=":ir" class="Am Al editable LW-avf tS-tW tS-tY" tabindex="1" role="textbox"  spellcheck="false" aria-label="Message Body" aria-multiline="true">
<p><strong><span data-preserver-spaces="true">Company:</span></strong><span data-preserver-spaces="true"> <a href="https://www.linkedin.com/company/torob/">Torob</a></span><br><strong><span data-preserver-spaces="true">Products:</span></strong><span data-preserver-spaces="true"> Torob <a href="https://torob.com">Website</a><a href="#INTERNAL_LINK#/post/null" target="_blank" rel="noopener noreferrer"></a> and <a href="https://play.google.com/store/apps/details?id=ir.torob&amp;hl=en&amp;gl=US" target="_blank" rel="noopener noreferrer">Android App</a></span><br><strong><span data-preserver-spaces="true">My role:</span></strong><span data-preserver-spaces="true"> Product Designer</span><br><strong><span data-preserver-spaces="true">Team:</span></strong><span data-preserver-spaces="true"> 4 Engineers, Founder, Myself </span><br>2020 – 2021 (2 years)</p>
<h2><span data-preserver-spaces="true">Introduction</span></h2>
<p><span data-preserver-spaces="true">Torob is a shopping search engine that allows users to find the best price of products in online stores in Iran. Users can compare prices and shipping options. </span><span data-preserver-spaces="true">In the following, I've described my works at Torob in chronological order.</span></p>
<p><strong>Case 1.</strong><span data-preserver-spaces="true"> Redesigning Interface Of Website and Android App </span><br><strong>Case 2.</strong><span data-preserver-spaces="true"> Improving Search Experience</span><br><strong>Case 3.</strong><span data-preserver-spaces="true"> Renovating First Impression Experience</span></p>
<p><span data-preserver-spaces="true">In these cases, 4 great engineers make it possible to follow a data-driven design approach in creating a brand new Torob.</span></p>
<h2><span data-preserver-spaces="true">Case 1. Redesigning Interface Of Website And Android App</span></h2>
<p><span data-preserver-spaces="true">My first work at Torob was redesigning the interface of the Android app and website. There were some known problems in the user interface which affect the users' experience and key metrics of the business. </span></p>
<h3><span data-preserver-spaces="true">Problems</span></h3>
<p><strong><span data-preserver-spaces="true">Visual Inconsistency</span></strong><span data-preserver-spaces="true">: Torob didn't have a style guide for design and development and it caused a wide inconsistency in the website and Android app. On some pages, it was confusing for users to find desired links and main actions.</span></p>
<p><strong><span data-preserver-spaces="true">Poor Navigation:</span></strong><span data-preserver-spaces="true"> Putting navigation in the back of the hamburger menu made it hard to find that.</span></p>
<p><strong><span data-preserver-spaces="true">Sketchy Responsive Design:</span></strong><span data-preserver-spaces="true"> Half of Torob traffic comes from Google via mobile devices. The landing pages for this huge traffic were not optimized for fast loading and needed a more light and clear design.</span></p>
<p><strong><span data-preserver-spaces="true">Poor Readability:</span></strong><span data-preserver-spaces="true"> Some important text had low contrast and a small font size.</span></p>
<p><strong><span data-preserver-spaces="true">Overuse Of Brand Color:</span></strong><span data-preserver-spaces="true"> The over use of red color made it hard for users to detect main actions and cause a feeling of errors on pages.</span></p>
</div>
</div>
<figure class="post__image"><img  src="https://tahamousavi.github.io/media/posts/3/Torob-old-design-mobile.webp" alt="" width="1600" height="1200"></figure>
<h3><span data-preserver-spaces="true">Solutions and Tests</span></h3>
<p><strong><span data-preserver-spaces="true">1. Developing UI Kit: </span></strong><span data-preserver-spaces="true">We developed a UI kit for Torob to help us to keep consistency through all products. After designing fundamental UI elements, we designed pages with high fidelity and keep developing them for new features and adapting them for Android application.</span></p>
<figure class="post__image"><img  src="https://tahamousavi.github.io/media/posts/3/Torob-design-system.webp" alt="" width="1600" height="1200"></figure>
<p><strong><span data-preserver-spaces="true">2. Visual And Navigation Improvement: </span></strong><span data-preserver-spaces="true">We replaced the hamburger menu with the bottom navigation bar and used a less saturated red color for main actions. The Below image shows visual change on the product page in mobile view and desktop.</span></p>
<figure class="post__image post__image--wide" ><img src="https://tahamousavi.github.io/media/posts/3/Torob-product-page-mobile.webp" alt="" width="1600" height="1200">
<figcaption >The product page on mobile</figcaption>
</figure>
<figure class="post__image post__image--wide" ><img src="https://tahamousavi.github.io/media/posts/3/Torob-product-page-desktop-3.webp" alt="" width="1600" height="1500">
<figcaption >The product page on desktop</figcaption>
</figure>
<p> </p>
<p>The following images show the new look of the browse page in the mobile and website.</p>
<figure class="post__image post__image--wide" ><img src="https://tahamousavi.github.io/media/posts/3/Torob-browse-mobile.webp" alt="" width="1600" height="1200">
<figcaption >The browse page on mobile</figcaption>
</figure>
<figure class="post__image post__image--wide" ><img src="https://tahamousavi.github.io/media/posts/3/Torob-browse-desktop-2.webp" alt="" width="1600" height="1500">
<figcaption >The browse page on small desktop</figcaption>
</figure>
<p> </p>
<p class="p1"><strong><span data-preserver-spaces="true">3. Improved Responsive Design: </span></strong><span data-preserver-spaces="true">Torob website is seen by a wide range of different devices. The “Product Pages” are the most important page on the Torob website. 80% of users see at least one product page in their sessions and 95% of Google searches are directed to these pages. So we considered a wide different screen sizes in the design to ensure a seamless experience for all users.</span></p>
<figure class="post__image"><img  src="https://tahamousavi.github.io/media/posts/3/Torob-Product-page-at-different-device-size.webp" alt="" width="1600" height="1200"></figure>
<p><strong><span data-preserver-spaces="true">4. A/B Tests: </span></strong><span data-preserver-spaces="true">We did a lot of A/B tests on visual designs to ensure the new design didn't have negative effects on critical metrics. For example, in the following chart, you can see a test on the store card on the product page. We wanted to know the effect of linking the store name to its profile on Buy Button clicks. It was a tiny visual change of the store's name but it caused a 14% drop in clicks.</span></p>
<figure class="post__image" ><img src="https://tahamousavi.github.io/media/posts/3/Torob-shop-link-ab-test.webp" alt="" width="1600" height="1290">
<figcaption >A/B test on adding store profile link</figcaption>
</figure>
<p><span data-preserver-spaces="true">We did other similar tests like Buy Button color, adding the city of the store, adding shipping info which help us to make better decisions on the design process.</span></p>
<figure class="post__image" ><img src="https://tahamousavi.github.io/media/posts/3/Torob-web-app-installation-modal-ab-test.webp" alt="" width="1600" height="1500">
<figcaption >A/B test on web app installation modal</figcaption>
</figure>
<p><strong><span data-preserver-spaces="true">5. Gradual Release: </span></strong><span data-preserver-spaces="true">We tested the new design of Torob on the desktop website which had about 15% of all traffics and monitored critical metrics for 2 weeks. After that, we released it for all web users. We had the same approach for the Android app and used Google Play Staged Rollouts to release new designs gradually. During releases, we worked closely with the customers' care team to follow the comments of users on the Play store and social networks.</span></p>
<p><strong><span data-preserver-spaces="true">6. Collecting Data: </span></strong><span data-preserver-spaces="true">We needed data to understand users' behaviors and measure the effects of new designs. We used Amplitude for short-term testing and our database for collecting long-term data. Also, we did some surveys to understand personas and continuously observe users' behavior to adapt design based on their needs.</span></p>
<p><strong><span data-preserver-spaces="true">6.1.</span></strong><span data-preserver-spaces="true"> In the below chart you can see how users reach their desired products through the different sections of the Android app and website. From this data, we understood every platform observes different persona and users have different behaviors on them. So we should consider different designs for every platforms.</span></p>
<figure class="post__image"><span data-preserver-spaces="true"><img  src="https://tahamousavi.github.io/media/posts/3/Torob-clicks-on-different-platforms.webp" alt="" width="1600" height="1200"></figure></span></p>
<p><strong><span data-preserver-spaces="true">6.2.</span></strong><span data-preserver-spaces="true"><strong> Similar Product:</strong> We found how a small change in UI can have a dramatic effect on business metrics and users experience. Similar products was a section at the bottom of every product page. Previously the Similar section showed limited numbers of products and we tested an infinite scroll section. In the below chart you can see its dramatic effect on Buy Button's clicks on overall web and app platform which is directly related to revenue. The new design also had a positive effect on sessions time.</span></p>
<figure class="post__image" ><img src="https://tahamousavi.github.io/media/posts/3/Torob-Similar-design.webp" alt="" width="1600" height="1200">
<figcaption >Effect of the new design of the Similar product section</figcaption>
</figure>
<h2><span data-preserver-spaces="true">Case 2: Redesigning Search Experience</span></h2>
<h3><span data-preserver-spaces="true">Introduction </span></h3>
<p><span data-preserver-spaces="true">Data from our first studies (as explained in case 1) showed more than 65% of products visits did through searches. So we decided to consider Search as the first step for UX improvements after UI redesign. The following figure shows the old design of the Search Tab in the Android app. It showed an infinite list of top visited products from the previous day and by typing in the search box, the users saw Suggestions by categories and text. During initial studies, we found some problems and issues and tried to solve them.</span></p>
<figure class="post__image"><img  src="https://tahamousavi.github.io/media/posts/3/Torob-old-search-design.webp" alt="" width="1600" height="1200"></figure>
<h3><span data-preserver-spaces="true">Problems</span></h3>
<p><strong><span data-preserver-spaces="true">No reaction to new products, events, and trends</span></strong><span data-preserver-spaces="true">: We found the Torob app doesn’t show any reaction to new products and trends in the market. Torob missed or showed delayed reaction to short events like Black Friday or seasonal auctions. For example, we trace PS5 in the first days of its release and found that users couldn’t see any trace of it in the app except by searching the exact name of it. Also, the list of top visited products in Search Tab didn't show any trace of new products except for some new mobile phones. Because mobile phones were the most visited category in Torob and always got top places in the most visits products. At that moment, the current algorithm just considered absolute values of all product visits, so it couldn't detect trends and growth of new terms in the search. </span></p>
<p><strong><span data-preserver-spaces="true">Poor UX of Repeated Searches:</span></strong><span data-preserver-spaces="true"> Considering similar services and best practices of big shopping websites showed users do a lot of similar searches during different sessions. Torob didn't have any facilities for repeated searches in the old design.</span></p>
<h3><span data-preserver-spaces="true">Solutions and tests</span></h3>
<p><span data-preserver-spaces="true">We decided to use users' search queries and product visits to detect trends and growth of new queries and show them to users. It could show users that Torob is an alive and up-to-date place for trends. As seen in the following figure, we replaced the list of top visited products with two sections. The first section represent products from the most visited categories through search and the second section displayed top and trend queries from the previous day. </span></p>
<p><span data-preserver-spaces="true">To improve the experience of repeated search, we added two new sections to the user's searches history: the history of products that the user visited through searches and the history of user queries. </span></p>
<figure class="post__image post__image--wide"><img  src="https://tahamousavi.github.io/media/posts/3/Torob-new-search-design.webp" alt="" width="1600" height="1200"></figure>
<p><span data-preserver-spaces="true">To test the new features, we released a test version with a new design for a limited group of users by Google Play and using Amplitude to measure events. We define two events for every search type:</span></p>
<ol>
<li><strong><span data-preserver-spaces="true">Product Visit (PV):</span></strong><span data-preserver-spaces="true"> Opening a product page</span></li>
<li><strong><span data-preserver-spaces="true">Buy Button (BB):</span></strong><span data-preserver-spaces="true"> Clicks on Buy Button on the products page. This button is the main action in the product page that redirects users to the seller website and Torob charges sellers for clicks on this button.</span></li>
</ol>
<p><span data-preserver-spaces="true">The following charts show data for 30 days of the test version which was released for 10 percent of users. In every chart data is grouped by different search types that defined in this way:</span></p>
<ol>
<li><strong><span data-preserver-spaces="true">Direct:</span></strong><span data-preserver-spaces="true"> User hit the enter key after typing in the search field and don’t choose any suggestions.</span></li>
<li><strong><span data-preserver-spaces="true">Suggestion:</span></strong><span data-preserver-spaces="true"> User chooses a suggestion after typing in the search field.</span></li>
<li><strong><span data-preserver-spaces="true">History:</span></strong><span data-preserver-spaces="true"> User clicked on his/her history search.</span></li>
<li><strong><span data-preserver-spaces="true">Top product:</span></strong><span data-preserver-spaces="true"> User clicked on top product images.</span></li>
<li><strong><span data-preserver-spaces="true">Top query:</span></strong><span data-preserver-spaces="true"> User clicked on top queries text.</span></li>
<li><strong><span data-preserver-spaces="true">Voice:</span></strong><span data-preserver-spaces="true"> User searched by voice command.</span></li>
</ol>
<p><span data-preserver-spaces="true">The chart below shows </span><strong><span data-preserver-spaces="true">Product Visit (PV)</span></strong><span data-preserver-spaces="true"> based on search types.</span></p>
<figure class="post__image" ><img src="https://tahamousavi.github.io/media/posts/3/Screen-Shot-2021-08-18-at-4.22.15-PM.png" alt="" width="2178" height="1036">
<figcaption ><span class=" author-d-4z65zz66zl57z75zyiz66zfr2fz87zwz89znuiz90zz76zz68z7z86zz78z0oz74zyz85zxz74zjkn6gtnpz79zvz80z7z65zz82zz81zz87z">Product Visit</span> <span class=" author-d-4z65zz66zl57z75zyiz66zfr2fz87zwz89znuiz90zz76zz68z7z86zz78z0oz74zyz85zxz74zjkn6gtnpz79zvz80z7z65zz82zz81zz87z h-lparen">(PV)</span><span class=" author-d-4z65zz66zl57z75zyiz66zfr2fz87zwz89znuiz90zz76zz68z7z86zz78z0oz74zyz85zxz74zjkn6gtnpz79zvz80z7z65zz82zz81zz87z"> grouped by search types</span></figcaption>
</figure>
<p>This chart shows total events of clicks on the Buy Button (BB) grouped by search type.</p>
<figure class="post__image" ><img src="https://tahamousavi.github.io/media/posts/3/Screen-Shot-2021-08-18-at-4.19.47-PM.png" alt="" width="2178" height="1036">
<figcaption ><span class=" author-d-4z65zz66zl57z75zyiz66zfr2fz87zwz89znuiz90zz76zz68z7z86zz78z0oz74zyz85zxz74zjkn6gtnpz79zvz80z7z65zz82zz81zz87z">Click on Buy Button</span> <span class=" author-d-4z65zz66zl57z75zyiz66zfr2fz87zwz89znuiz90zz76zz68z7z86zz78z0oz74zyz85zxz74zjkn6gtnpz79zvz80z7z65zz82zz81zz87z h-lparen">(BB)</span><span class=" author-d-4z65zz66zl57z75zyiz66zfr2fz87zwz89znuiz90zz76zz68z7z86zz78z0oz74zyz85zxz74zjkn6gtnpz79zvz80z7z65zz82zz81zz87z"> grouped by search types</span></figcaption>
</figure>
<p>Top Query and Top Product has only about 5% of total product visits but if we look at the conversion rate (CR) of search type (BB/PP, ratio of click per visit) in the below chart, there is not a great gap between search types. CR shows how many product visits converted to clicks on Buy Button.</p>
<figure class="post__image" ><img src="https://tahamousavi.github.io/media/posts/3/Screen-Shot-2021-08-18-at-4.17.36-PM.png" alt="" width="2178" height="1036">
<figcaption ><span class=" author-d-4z65zz66zl57z75zyiz66zfr2fz87zwz89znuiz90zz76zz68z7z86zz78z0oz74zyz85zxz74zjkn6gtnpz79zvz80z7z65zz82zz81zz87z">Total percentage of conversion rate for search types</span></figcaption>
</figure>
<figure class="post__image" ><img src="https://tahamousavi.github.io/media/posts/3/Screen-Shot-2021-08-18-at-4.27.35-PM.png" alt="" width="2178" height="1036">
<figcaption ><span class=" author-d-4z65zz66zl57z75zyiz66zfr2fz87zwz89znuiz90zz76zz68z7z86zz78z0oz74zyz85zxz74zjkn6gtnpz79zvz80z7z65zz82zz81zz87z">Daily percentage of conversion rate for search types</span></figcaption>
</figure>
<h3><span data-preserver-spaces="true">Results</span></h3>
<p><strong><span data-preserver-spaces="true">Rise In Queries:</span></strong><span data-preserver-spaces="true"> We got a more than 5% stable rise in total queries after releasing for all users. Top Queries and user search History had the main parts in this rise.</span></p>
<p><strong><span data-preserver-spaces="true">Reaction To New Products:</span></strong><span data-preserver-spaces="true"> Now Torob shows reactions about new products by Top Queries. User finds it quickly after opening the app and it encourages them to know more about new products. It has a positive effect on the retention of users and encourages them to come back for knowing about new products.</span></p>
<p><strong><span data-preserver-spaces="true">UX Improvement Of Repeated Search: </span></strong><span data-preserver-spaces="true">The number of Product Visits via the history of user searches shows a great improvement in UX of search. It showed that Torob users do a lot of repeated searches which previously was forced to type them every time. </span></p>
<p><span data-preserver-spaces="true">Last but not least achievement was about marketing. We found Top Queries very helpful for the marketing team. In case 4, I explained more about a co-op between the product and marketing team and its effect on Torob revenue and the experience of users.</span></p>
<p> </p>
<h2><span data-preserver-spaces="true">Case 3. Renovating First Impression Experience</span></h2>
<figure class="post__image"><img  src="https://tahamousavi.github.io/media/posts/3/Torob-android-old-offer.webp" alt="" width="1600" height="1200"></figure>
<h3><span data-preserver-spaces="true">Problems</span></h3>
<p><strong><span data-preserver-spaces="true">‌Poor Onboarding:</span></strong><span data-preserver-spaces="true"> The Offer page was the first thing that users saw after opening the Android app. There was a long list of products promoted by sellers (commercial row) and there were not any clues for users about searching and price comparison which are the main mission of Torob.</span></p>
<p><strong><span data-preserver-spaces="true">Poor Experience For Window Shopper Persona:</span></strong><span data-preserver-spaces="true"> Based on our surveys and data from the Offer page, we detect a Persona who likes exploring the app and don't intend to buy a specific product. We called this persona Window Shopper. Torob didn't show new products and trends on the app which had a bad effect on this persona.</span></p>
<h3><span data-preserver-spaces="true">Solutions and Tests</span></h3>
<p><strong><span data-preserver-spaces="true">1. Hand-Picked Content On First Page:</span></strong><span data-preserver-spaces="true"> In co-op with the marketing team, we consider different ideas and decided to add some new rows on the Offer page which presented a collection of new and favorite products on the Offer page. We wanted to measure the effect of these hand-picked content on Window Shopper persona behavior. The results were pretty good and it cause a rise in clicks (directly related to revenue) and session time on the Offer page. Therefore we designed a panel for the marketing team to facilitate hand-picking products and collecting deeper data to measure the effect of any row on the Offer page</span></p>
<figure class="post__image post__image--wide" ><img src="https://tahamousavi.github.io/media/posts/3/Torob-android-new-offer.png" alt="" width="1600" height="1200">
<figcaption >The new Offer tab design</figcaption>
</figure>
<p><strong><span data-preserver-spaces="true">2. Automatic Generated Content On First Page:</span></strong><span data-preserver-spaces="true"> As another test, we added some rows to the first page based on the Top Queries which is explained in Case 2. We found in some layouts we got 2 times more clicks in comparison to other rows. The below chart shows daily clicks on every row on the Offer Page and the red line 🌶 shows the effect of Top Queries related rows. So we created some automatic lists of products based on Top Queries and Top Views which could be presented like hand-picked content on the first page.</span></p>
<figure class="post__image"><img  src="https://tahamousavi.github.io/media/posts/3/Torob-offer-design-row-data.png" alt="" width="1600" height="994"></figure>
<p><strong>3. Spotlight On Search: </strong>The main experience of Torob was searching but in the first page of app, we just represented it by a small icon. We needed to put a spotlight on search. As explained in case 2, we had a successful experience on redesigning search tab. So we decided to test switching Search tab with Offer tab. We merge the best practices of Search tab with hand-picked content and leave commercial rows on Offer tab.</p>
<figure class="post__image post__image--wide" ><img src="https://tahamousavi.github.io/media/posts/3/Torob-android-switch-search-tab.png" alt="" width="1600" height="1300">
<figcaption >Switching Search with Offer tab. And a bigger space for presenting search.</figcaption>
</figure>
<h3><span data-preserver-spaces="true">Results </span></h3>
<p><strong><span data-preserver-spaces="true">1. Increase Of Revenue:</span></strong><span data-preserver-spaces="true"> The chart below shows clicks on the Buy Button grouped by different sections of the Android app. The Buy Button has a direct relation to revenue. Here you can see the effect of the new design on the Offer page. The number of clicks on the Buy Button on the Offer Page increased 3 times on average. Also, it had a positive effect on search and similar sections. So the new design increased overall clicks and revenue in the Android app.</span></p>
<figure class="post__image" ><img src="https://tahamousavi.github.io/media/posts/3/Torob-offer-design.png" alt="" width="1600" height="1200">
<figcaption >Rise of clicks of Buy Button on Offer tab</figcaption>
</figure>
<p><strong><span data-preserver-spaces="true">2. Improving The On-Boarding Of New Users:</span></strong><span data-preserver-spaces="true"> The new version cause a slight rise in retention and session time.</span></p>
<p><strong><span data-preserver-spaces="true">3. A New Playground For Marketing: </span></strong><span data-preserver-spaces="true">The new design allowed the marketing team to be more creative in creating the contents of the app. It allowed them to show reactions to trends and new products and presented them in more attractive ways for the Window Shopper persona. </span></p>
<p> </p>
            ]]>
        </content>
    </entry>
    <entry>
        <title>Designing Food Delivery at Miare</title>
        <author>
            <name>Taha Mousavi</name>
        </author>
        <link href="https://tahamousavi.github.io/miare.html"/>
        <id>https://tahamousavi.github.io/miare.html</id>
        <media:content url="https://tahamousavi.github.io/media/posts/15/miare-cover.webp" medium="image" />
            <category term="Product Design"/>

        <updated>2022-04-23T13:46:02+04:30</updated>
            <summary>
                <![CDATA[
                        <img src="https://tahamousavi.github.io/media/posts/15/miare-cover.webp" alt="" />
                    Company: Miare Products: Restaurant Web App, Courier Android App, Fleet Monitoring Panels, Design System My role: Product Designer and User&hellip;
                ]]>
            </summary>
        <content type="html">
            <![CDATA[
                    <p><img src="https://tahamousavi.github.io/media/posts/15/miare-cover.webp" class="type:primaryImage" alt="" /></p>
                <p><strong><span data-preserver-spaces="true">Company:</span></strong><span data-preserver-spaces="true"> <a href="https://www.linkedin.com/company/mia.re/about/" target="_blank" rel="noopener noreferrer">Miare</a></span><br><strong><span data-preserver-spaces="true">Products:</span></strong><span data-preserver-spaces="true"> Restaurant Web App, Courier Android App, Fleet Monitoring Panels, <a href="https://github.com/miare-ir/Milingo" target="_blank" rel="noopener noreferrer">Design System</a></span><br><strong><span data-preserver-spaces="true">My role:</span></strong><span data-preserver-spaces="true"> Product Designer and User Researcher</span><br><strong><span data-preserver-spaces="true">Team:</span></strong><span data-preserver-spaces="true"> 4 Engineers, 2 Co-Founders, CTO, Myself </span><br><span data-preserver-spaces="true">2018 - 2021 (4 years)</span></p>
<h2><span data-preserver-spaces="true">Introduction</span></h2>
<p><span data-preserver-spaces="true">Miare is an on-demand delivery solution for restaurants. On the startup team, We designed the interface and experience of four products from scratch; Restaurant web app, Courier android app, and two web panels for live fleet monitoring.</span></p>
<p><span data-preserver-spaces="true">Miare was a fast-growing startup and we encountered many challenges and complex problems in products and business. So from the first days, we had a problem-solving mindset, did several usability tests, and got a data-driven approach in product design and developments. </span></p>
<p>In the following, I have described my process of designing products in Miare:</p>
<p><strong>Case 1.</strong> Field Search and MVPs<br><strong>Case 2.</strong> Designing Restaurant Desktop and Mobile Web App<br><strong>Case 3.</strong> Designing Courier Android App<br><strong>Case 4.</strong> Designing <span data-preserver-spaces="true">Fleet Monitoring Panel</span></p>
<p> </p>
<hr>
<h3>Case 1.</h3>
<h2>Field Search and MVPs</h2>
<p> </p>
<h3><span data-preserver-spaces="true">Field Search</span></h3>
<p><span data-preserver-spaces="true">First of all, I needed to get familiar with the delivery and restaurants business. Besides examining similar products; We did some field searches by visiting several restaurants, interviewing staff and managers, and observing the delivery process in pick times. It helped me to get familiar with business more quickly. </span></p>
<div class="gallery-wrapper"><div class="gallery"  data-is-empty="false" data-columns="2">
<figure class="gallery__item"><a href="https://tahamousavi.github.io/media/posts/15/gallery/IMG_0286.JPG" data-size="800x600"><img src="https://tahamousavi.github.io/media/posts/15/gallery/IMG_0286-thumbnail.JPG" alt="" width="720" height="540"></a></figure>
<figure class="gallery__item"><a href="https://tahamousavi.github.io/media/posts/15/gallery/IMG_0290.JPG" data-size="800x600"><img src="https://tahamousavi.github.io/media/posts/15/gallery/IMG_0290-thumbnail.JPG" alt="" width="720" height="540"></a></figure>
<figure class="gallery__item"><a href="https://tahamousavi.github.io/media/posts/15/gallery/IMG_0310.JPG" data-size="800x600"><img src="https://tahamousavi.github.io/media/posts/15/gallery/IMG_0310-thumbnail.JPG" alt="" width="720" height="540"></a></figure>
<figure class="gallery__item"><a href="https://tahamousavi.github.io/media/posts/15/gallery/IMG_0331-2.JPG" data-size="800x600"><img src="https://tahamousavi.github.io/media/posts/15/gallery/IMG_0331-2-thumbnail.JPG" alt="" width="720" height="540"></a></figure>
</div></div>
<h3>MVPs</h3>
<p><span data-preserver-spaces="true">We had two MVPs app for the restaurants and couriers which were used for initial tests of business. After some successful tests, We needed a more completed features app for initial lunching. </span></p>
<figure class="post__image"><img  src="https://tahamousavi.github.io/media/posts/15/Miare-Courier-mvp-app-n1.webp" alt="" width="1600" height="960"></figure>
<figure class="post__image"><img  src="https://tahamousavi.github.io/media/posts/15/Miare-Courier-mvp-app-n2.webp" alt="" width="1600" height="960"></figure>
<h3><figure class="post__image"><img  src="https://tahamousavi.github.io/media/posts/15/Miare-restaurant-mvp-panel-2.webp" alt="" width="1600" height="960"></figure></h3>
<hr>
<h3> </h3>
<h3><span data-preserver-spaces="true">Case 2.</span></h3>
<h2><span data-preserver-spaces="true">Designing Restaurant Desktop and Mobile Web App</span></h2>
<p> </p>
<h3><span data-preserver-spaces="true">Problems</span></h3>
<p><strong>Device limitations</strong><br><span data-preserver-spaces="true">Most restaurants used old desktop computers with low process power and low-resolution screens. Also, most small restaurants didn't have a desktop computer.</span></p>
<div class="gallery-wrapper"><div class="gallery"  data-is-empty="false" data-columns="2">
<figure class="gallery__item"><a href="https://tahamousavi.github.io/media/posts/15/gallery/mo-Vtx8w.jpeg" data-size="800x600"><img src="https://tahamousavi.github.io/media/posts/15/gallery/mo-Vtx8w-thumbnail.jpeg" alt="" width="720" height="540"></a>
<figcaption>Miare MVP on a restaurant desktop computer</figcaption>
</figure>
<figure class="gallery__item"><a href="https://tahamousavi.github.io/media/posts/15/gallery/y02YC4DM.jpg" data-size="800x600"><img src="https://tahamousavi.github.io/media/posts/15/gallery/y02YC4DM-thumbnail.jpg" alt="" width="720" height="540"></a>
<figcaption>Customers contacts on paper</figcaption>
</figure>
</div></div>
<p><strong>Pick-Times</strong><br><span data-preserver-spaces="true">At pick times the big restaurants have noisy and crowded environment. The staffs are very busy and do not have enough time to spend with another new and complicated software.</span></p>
<figure class="post__image" ><img src="https://tahamousavi.github.io/media/posts/15/TJ9S0EDq.jpeg" alt="" width="800" height="600">
<figcaption >Pick times</figcaption>
</figure>
<p><strong>Fast-Growing, Fast-Changes</strong><br><span data-preserver-spaces="true">A fast-growing business needs a flexible interface that can support the new needs and changes. There should be enough space for new features and the cost of changes should not be expensive. </span></p>
<h3><span data-preserver-spaces="true">Solution</span></h3>
<p><strong>Responsive Design and AA Standards</strong><br><span data-preserver-spaces="true">We designed a responsive web app for restaurants. Applying the AA standards to interface design helped us care about good contrast and font size in old and low-resolution screens.</span><br><br><strong>Progressive Disclosure Pattern</strong><br><span data-preserver-spaces="true">We build interfaces around the core experiences of the app and put advanced features on the other disclosure levels. It shorted the learning path and helped staff to use the app with a very low cognitive load in pick-times.</span></p>
<figure class="post__image post__image--wide"><img  src="https://tahamousavi.github.io/media/posts/15/Miare-restaurant-new-design-desktop.webp" alt="" width="1600" height="1200"></figure>
<p> </p>
<h3><figure class="post__image post__image--wide"><img  src="https://tahamousavi.github.io/media/posts/15/Miare-restaurant-new-design-desktop-Copy.webp" alt="" width="1600" height="1200"></figure></h3>
<p> </p>
<hr>
<h3><span data-preserver-spaces="true">Case 3.</span></h3>
<h2><span data-preserver-spaces="true">Designing Courier Android App</span></h2>
<p>In the field search, I got familiar with a small part of a courier's daily life. Working as a courier in the big cities is challenging and dangerous. Handling bad weather and traffic jams and taking care of yourself and your motorbike is a small part of a courier's everyday life. We should consider these hard conditions in the design of the app and try to create minimum friction in the process of delivery.</p>
<h3>Problems</h3>
<p><strong>Using the app in hard conditions</strong><br>Couriers don't use the app in a controlled environment. they use it outdoors under different weather conditions and get directions and notifications while driving.</p>
<p><strong>Low education and experiences</strong><br>Our surveys showed that most couriers didn't have a diploma or had challenges in understanding numbers and doing simple math. Some couriers didn't have experience in delivery jobs. So they didn't familiar with concepts like GPS and maps.<br><br><strong>Technical challenges</strong><br>Most of the couriers didn't have up-to-date android phones. Old OS, low-resolution screens, and low-speed internet connection were some of the technical challenges that should be considered in the design.</p>
<h3>Solutions</h3>
<p><strong>Accessible interface</strong><br>We used high contrast and large font in the visual design of the app interface. It helped us to have good readability on sunny days and low-resolution screens. Minimal design and big buttons improve the reachability of the interface in driving.</p>
<figure class="post__image post__image--wide"><img  src="https://tahamousavi.github.io/media/posts/15/Miare-delivery-flow-in-courier-app.webp" alt="" width="1600" height="1100"></figure>
<p><strong>Usability tests</strong><br>We made some prototypes and did several usability test sessions with couriers to consider the new design. At first, we did some tests in indoor conditions and after that, we run a test in a zone of the city with a small group of couriers.</p>
<div class="gallery-wrapper"><div class="gallery"  data-is-empty="false" data-columns="2">
<figure class="gallery__item"><a href="https://tahamousavi.github.io/media/posts/15/gallery/photo_2021-12-14_15-39-53.jpg" data-size="1280x719"><img src="https://tahamousavi.github.io/media/posts/15/gallery/photo_2021-12-14_15-39-53-thumbnail.jpg" alt="" width="720" height="404"></a></figure>
<figure class="gallery__item"><a href="https://tahamousavi.github.io/media/posts/15/gallery/photo_2021-12-14_15-39-54.jpg" data-size="1280x719"><img src="https://tahamousavi.github.io/media/posts/15/gallery/photo_2021-12-14_15-39-54-thumbnail.jpg" alt="" width="720" height="404"></a></figure>
<figure class="gallery__item"><a href="https://tahamousavi.github.io/media/posts/15/gallery/photo_2021-12-14_15-39-59.jpg" data-size="1280x719"><img src="https://tahamousavi.github.io/media/posts/15/gallery/photo_2021-12-14_15-39-59-thumbnail.jpg" alt="" width="720" height="404"></a></figure>
<figure class="gallery__item"><a href="https://tahamousavi.github.io/media/posts/15/gallery/photo_2021-12-14_15-47-26.jpg" data-size="1280x719"><img src="https://tahamousavi.github.io/media/posts/15/gallery/photo_2021-12-14_15-47-26-thumbnail.jpg" alt="" width="720" height="404"></a></figure>
</div></div>
<p><strong>Trial delivery trip</strong><br>We designed some trial trips to help the couriers in their onboarding process. It was like a mini game. Every zone in the city has its specific trips, and the courier should complete trips by checking out near restaurants to complete trial trips. During trips, they have got familiar with basic concepts and can easily talk to a supervisor to get help. </p>
<figure class="post__image post__image--wide"><img  src="https://tahamousavi.github.io/media/posts/15/Miare-Trial-delivery-trips.webp" alt="" width="1600" height="1100"></figure>
<p><strong>Following new couriers</strong><br>We visually distinguished new couriers on the fleet monitoring panel to help supervisors detect them easier and guide them based on their experiences (Number of working days and completed trips)</p>
<p><strong>Checkup screen</strong><br>To handle some technical challenges and minimize errors, we added a checkup screen to consider several parameters before a courier goes online. And if there were any errors, we showed related guides and solutions to the courier.</p>
<figure class="post__image post__image--wide"><img  src="https://tahamousavi.github.io/media/posts/15/Miare-checkup-screen.webp" alt="" width="1600" height="1792"></figure>
<p> </p>
<hr>
<h3> </h3>
<h3>Case 4.</h3>
<h2>Designing <span data-preserver-spaces="true">Fleet Monitoring Panel</span></h2>
<p> </p>
<p>🚧 I will write it soon. 🚧</p>
<p> </p>
<p> </p>
            ]]>
        </content>
    </entry>
    <entry>
        <title>Kashi: A Design System Developed In React</title>
        <author>
            <name>Taha Mousavi</name>
        </author>
        <link href="https://tahamousavi.github.io/kashi.html"/>
        <id>https://tahamousavi.github.io/kashi.html</id>
        <media:content url="https://tahamousavi.github.io/media/posts/16/Kashi-design-language-cover.webp" medium="image" />
            <category term="Product Design"/>

        <updated>2022-12-24T12:10:04+03:30</updated>
            <summary>
                <![CDATA[
                        <img src="https://tahamousavi.github.io/media/posts/16/Kashi-design-language-cover.webp" alt="Kashi: A Design Language" />
                    Company: Miare Product: Kashi (code name: Milingo) My role: UI designer, Product Manager Team: 4 Engineers, Myself 2019 - 2020&hellip;
                ]]>
            </summary>
        <content type="html">
            <![CDATA[
                    <p><img src="https://tahamousavi.github.io/media/posts/16/Kashi-design-language-cover.webp" class="type:primaryImage" alt="Kashi: A Design Language" /></p>
                <p><strong><span data-preserver-spaces="true">Company:</span></strong><span data-preserver-spaces="true"> <a href="https://www.linkedin.com/company/mia.re/about/" target="_blank" rel="noopener noreferrer">Miare</a></span><br><strong><span data-preserver-spaces="true">Product:</span></strong><span data-preserver-spaces="true"> <a href="https://github.com/miare-ir/Milingo" target="_blank" rel="noopener noreferrer">Kashi</a> (code name: Milingo)</span><br><strong><span data-preserver-spaces="true">My role:</span></strong><span data-preserver-spaces="true"> UI designer, Product Manager</span><br><strong><span data-preserver-spaces="true">Team:</span></strong><span data-preserver-spaces="true"> 4 Engineers, Myself </span><br><span data-preserver-spaces="true">2019 - 2020</span></p>
<p><a href="https://github.com/miare-ir/Milingo" target="_blank" rel="noopener noreferrer">[Source code]</a>  <a href="https://miare-ir.github.io/Milingo" target="_blank" rel="noopener noreferrer">[Live demo on Storybook]</a></p>
<h2>Introduction</h2>
<p>Kashi is a design system. It is developed to support the interface design of Miare products. As I explained <a href="https://tahamousavi.github.io/miare.html" target="_blank" rel="noopener noreferrer">here</a>, after developing MVPs and the primary version of the restaurant panel, we decided to develop a design system to keep consistency through all future products. The source code of Kashi is open and developed in React.</p>
<p>Kashi is the equivalent of Tile (glazed brick) in the Persian language. Tiling is a prominent ornamental element in Iranian architecture. The name of Kashi is inspired by these wonderful decorations in the below images which are made by putting thousands pieces of tile together. Kashi (Tile) is like an atom in Atomic Design methodology.</p>
<figure class="post__image" ><img src="https://tahamousavi.github.io/media/posts/16/mostafa-meraji-fJAdX7tU-Co-unsplash.jpg" alt="" width="1920" height="1280">
<figcaption >Tiling of The Shah Mosque in Isfahan. Photo by Mostafa Meraji</figcaption>
</figure>
<figure class="post__image" ><img src="https://tahamousavi.github.io/media/posts/16/faruk-kaymak-CNVvDjVDiVI-unsplash.jpg" alt="" width="1920" height="1194">
<figcaption >Tiling of Sheikh Lotfollah Mosque, Isfahan. Photo by <a href="https://unsplash.com/@fkaymak?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" target="_blank" rel="noopener noreferrer">Faruk Kaymak</a></figcaption>
</figure>
<h2> </h2>
<h2>Storybook</h2>
<p>A live demo of React components is available on <a href="https://miare-ir.github.io/Milingo">Storybook</a>.</p>
<figure class="post__image post__image--wide"><img  src="https://tahamousavi.github.io/media/posts/16/Kasi-storybook.webp" alt="" width="1600" height="1200"></figure>
<p> </p>
<h2>Styles</h2>
<p> </p>
<h3 class="align-left">Typography</h3>
<figure class="post__image post__image--wide"><img  src="https://tahamousavi.github.io/media/posts/16/Kasi-Typography-2.webp" alt="" width="1600" height="1494"></figure>
<h3> </h3>
<h3>Colors</h3>
<figure class="post__image post__image--wide"><img  src="https://tahamousavi.github.io/media/posts/16/Kasi-colors-2.webp" alt="" width="1600" height="2480"></figure>
<h3> </h3>
<h3>Spacing</h3>
<figure class="post__image post__image--wide"><img  src="https://tahamousavi.github.io/media/posts/16/Kasi-Spacing.webp" alt="" width="1600" height="824"></figure>
<h2> </h2>
<p> </p>
<h2>Components</h2>
<p> </p>
<h3>Button</h3>
<figure class="post__image post__image--wide"><img  src="https://tahamousavi.github.io/media/posts/16/Kasi-button.webp" alt="" width="1600" height="1532"></figure>
<h3> </h3>
<h3>Radio Button, Checkbox, Select, Tag</h3>
<figure class="post__image post__image--wide"><img  src="https://tahamousavi.github.io/media/posts/16/Kasi-component-n1.webp" alt="" width="1600" height="1265"></figure>
<p> </p>
<h3>Text Field</h3>
<figure class="post__image post__image--wide"><img  src="https://tahamousavi.github.io/media/posts/16/Kasi-Textfield-2.webp" alt="" width="1600" height="983"></figure>
<p> </p>
<h3>Table</h3>
<figure class="post__image post__image--wide"><img  src="https://tahamousavi.github.io/media/posts/16/Kashi-table.webp" alt="" width="1600" height="1158"></figure>
<p> </p>
<figure class="post__image post__image--wide"><img  src="https://tahamousavi.github.io/media/posts/16/Kashi-action-table.webp" alt="" width="1600" height="1405"></figure>
<p> </p>
<p> </p>
            ]]>
        </content>
    </entry>
    <entry>
        <title>Specto: A Three Day Challenge By Swift UI Jam</title>
        <author>
            <name>Taha Mousavi</name>
        </author>
        <link href="https://tahamousavi.github.io/specto.html"/>
        <id>https://tahamousavi.github.io/specto.html</id>
        <media:content url="https://tahamousavi.github.io/media/posts/18/specto-banner.jpeg" medium="image" />
            <category term="Product Design"/>

        <updated>2022-12-23T23:24:10+03:30</updated>
            <summary>
                <![CDATA[
                        <img src="https://tahamousavi.github.io/media/posts/18/specto-banner.jpeg" alt="" />
                    Specto is an audio visualizer application that also transcribes user input using Apple speech recognition API. Each recording session is tagged&hellip;
                ]]>
            </summary>
        <content type="html">
            <![CDATA[
                    <p><img src="https://tahamousavi.github.io/media/posts/18/specto-banner.jpeg" class="type:primaryImage" alt="" /></p>
                <p><strong>Specto</strong> is an audio visualizer application that also transcribes user input using Apple speech recognition API. Each recording session is tagged with highlighted keywords by the TextRank algorithm. Designed and developed by Taha Mousavi, Abbas Mousavi and Moeen Zamani for <a href="https://swiftuijam.com/" target="_blank" rel="noopener noreferrer">SwiftUI Jam</a>, Feb 2021.</p>
<p><a href="https://github.com/moeenz/Specto" target="_blank" rel="noopener noreferrer">[Source Code on Github]</a></p>
<p dir="auto">In 3 days, I worked on Finding creative ways to visualize recorded voice and naming the recorded voice files.</p>
<h3 dir="auto">Visualization</h3>
<p dir="auto">For visualization, I suggested using the FFT method for detecting frequencies and using that for creating a pattern on a vinyl disc. After several tests and improvements, Abbas and Moeen found an optimum and beautiful method to implement it.</p>
<figure class="post__image post__image--center"><img  src="https://tahamousavi.github.io/media/posts/18/wireframe-2.jpeg" alt="" width="4032" height="3024"></figure>
<p dir="auto"> </p>
<div class="gallery-wrapper"><div class="gallery"  data-is-empty="false" data-columns="3">
<figure class="gallery__item"><a href="https://tahamousavi.github.io/media/posts/18/gallery/IMG_5311.jpg" data-size="1125x2436"><img src="https://tahamousavi.github.io/media/posts/18/gallery/IMG_5311-thumbnail.jpg" alt="" width="720" height="1559"></a></figure>
<figure class="gallery__item"><a href="https://tahamousavi.github.io/media/posts/18/gallery/IMG_0336.jpg" data-size="1091x1911"><img src="https://tahamousavi.github.io/media/posts/18/gallery/IMG_0336-thumbnail.jpg" alt="" width="720" height="1261"></a></figure>
<figure class="gallery__item"><a href="https://tahamousavi.github.io/media/posts/18/gallery/Image-2-11-21-at-11.18-PM.jpg" data-size="544x931"><img src="https://tahamousavi.github.io/media/posts/18/gallery/Image-2-11-21-at-11.18-PM-thumbnail.jpg" alt="" width="544" height="931"></a></figure>
<figure class="gallery__item"><a href="https://tahamousavi.github.io/media/posts/18/gallery/Simulator-Screen-Shot-iPhone-12-Pro-Max-2021-02-17-at-01.00.35.jpg" data-size="1284x2778"><img src="https://tahamousavi.github.io/media/posts/18/gallery/Simulator-Screen-Shot-iPhone-12-Pro-Max-2021-02-17-at-01.00.35-thumbnail.jpg" alt="" width="720" height="1558"></a></figure>
<figure class="gallery__item"><a href="https://tahamousavi.github.io/media/posts/18/gallery/Simulator-Screen-Shot-iPhone-12-Pro-Max-2021-02-18-at-00.46.12.jpg" data-size="1284x2778"><img src="https://tahamousavi.github.io/media/posts/18/gallery/Simulator-Screen-Shot-iPhone-12-Pro-Max-2021-02-18-at-00.46.12-thumbnail.jpg" alt="" width="720" height="1558"></a></figure>
<figure class="gallery__item"><a href="https://tahamousavi.github.io/media/posts/18/gallery/gallery-concept.png" data-size="750x1334"><img src="https://tahamousavi.github.io/media/posts/18/gallery/gallery-concept-thumbnail.png" alt="" width="720" height="1281"></a></figure>
</div></div>
<figure class="post__video"><iframe width="425" height="350" src="https://player.vimeo.com/video/675567001?title=0&amp;byline=0&amp;portrait=0&amp;color=8dc7dc" allowfullscreen="allowfullscreen" data-mce-fragment="1"></iframe></figure>
<figure class="post__video"><iframe width="425" height="350" src="https://player.vimeo.com/video/675566930?title=0&amp;byline=0&amp;portrait=0&amp;color=8dc7dc" allowfullscreen="allowfullscreen" data-mce-fragment="1"></iframe></figure>
<p dir="auto">We uses angular gradients to project the FFT to concentric circle paths. The whole image shows 50 FFTs calculated five times per second each with 33 components which makes 1650 visual components in total. We started with multiple curves in different colors but that implementation was slow, so we switched to angular gradients producing smoother graphics with much better performance.</p>
<p dir="auto">Here are the final results for different voice recorded. </p>
<figure class="post__image post__image--wide"><img  src="https://tahamousavi.github.io/media/posts/18/pattern-on-vinyl-disc.webp" alt="" width="1600" height="1070"></figure>
<p dir="auto"> </p>
<h3 dir="auto">Prototypes</h3>
<p dir="auto">Interactive prototypes by <strong>Principle</strong>.</p>
<figure class="post__video"><iframe width="425" height="350" src="https://player.vimeo.com/video/675566982?title=0&amp;byline=0&amp;portrait=0&amp;color=8dc7dc" allowfullscreen="allowfullscreen" data-mce-fragment="1"></iframe></figure>
<figure class="post__video"><iframe width="425" height="350" src="https://player.vimeo.com/video/675566958?title=0&amp;byline=0&amp;portrait=0&amp;color=8dc7dc" allowfullscreen="allowfullscreen" data-mce-fragment="1"></iframe></figure>
<h3 dir="auto">Naming of files</h3>
<p dir="auto">For naming the recorded file, We use highlighted keywords by the TextRank algorithm. By using different fonts and colors, Specto assigns three words to every file and creates an album cover for them.</p>
<div class="gallery-wrapper"><div class="gallery"  data-is-empty="false" data-columns="2">
<figure class="gallery__item"><a href="https://tahamousavi.github.io/media/posts/18/gallery/Hand-picked-cover-from-Unsplash.png" data-size="750x1334"><img src="https://tahamousavi.github.io/media/posts/18/gallery/Hand-picked-cover-from-Unsplash-thumbnail.png" alt="" width="720" height="1281"></a></figure>
<figure class="gallery__item"><a href="https://tahamousavi.github.io/media/posts/18/gallery/Smooth-graidient-on-cover.png" data-size="750x1334"><img src="https://tahamousavi.github.io/media/posts/18/gallery/Smooth-graidient-on-cover-thumbnail.png" alt="" width="720" height="1281"></a></figure>
</div></div>
<h3 dir="auto"> </h3>
<h3 dir="auto">App Icon</h3>
<p>App icon inspired by 45 rpm adapters.</p>
<figure class="post__image post__image--center"><img  src="https://tahamousavi.github.io/media/posts/18/IMG_5783.jpg" alt="" width="4032" height="3024"></figure>
<figure class="post__image post__image--center"><img  src="https://tahamousavi.github.io/media/posts/18/specto-app-icon-2.webp" alt="" width="1600" height="1200"></figure>
<p> </p>
<p> </p>
            ]]>
        </content>
    </entry>
    <entry>
        <title>Illustrations for Porsline</title>
        <author>
            <name>Taha Mousavi</name>
        </author>
        <link href="https://tahamousavi.github.io/commissioned-illustrations.html"/>
        <id>https://tahamousavi.github.io/commissioned-illustrations.html</id>
        <media:content url="https://tahamousavi.github.io/media/posts/9/Porsline-illustration.jpeg" medium="image" />
            <category term="Visuals"/>

        <updated>2024-02-22T17:39:00+03:30</updated>
            <summary>
                <![CDATA[
                        <img src="https://tahamousavi.github.io/media/posts/9/Porsline-illustration.jpeg" alt="" />
                    Porsline I developed some characters and an illustration style for Porsline company for a SaaS product. These illustrations showed on&hellip;
                ]]>
            </summary>
        <content type="html">
            <![CDATA[
                    <p><img src="https://tahamousavi.github.io/media/posts/9/Porsline-illustration.jpeg" class="type:primaryImage" alt="" /></p>
                <h2> </h2>
<h2>Porsline</h2>
<p>I developed some characters and an illustration style for Porsline company for a SaaS product. These illustrations showed on messages, tutorials, Landing pages and empty state of pages.</p>
<p>Client: Porsline<br><span data-preserver-spaces="true">2019 - 2021</span></p>
<figure class="post__image post__image--wide" ><img src="https://tahamousavi.github.io/media/posts/9/porsline-illustration-upgrade.webp" alt="" width="1600" height="1024">
<figcaption >Upgrade to premium version</figcaption>
</figure>
<p> </p>
<figure class="post__image post__image--wide" ><img src="https://tahamousavi.github.io/media/posts/9/porsline-illustration-no-image-in-gallery.webp" alt="" width="1600" height="1024">
<figcaption >"No image in the gallery."</figcaption>
</figure>
<p> </p>
<figure class="post__image post__image--wide" ><img src="https://tahamousavi.github.io/media/posts/9/Hotels.jpg" alt="" width="2880" height="1212">
<figcaption >Landing page - Hospitality</figcaption>
</figure>
<p> </p>
<figure ><figure class="post__image post__image--wide"><img  src="https://tahamousavi.github.io/media/posts/9/HR.jpg" alt="Landing page - Human resource" width="2880" height="1212"></figure>
<figcaption >Landing page - Human resource</figcaption>
</figure>
<p> </p>
<figure ><figure class="post__image post__image--wide"><img  src="https://tahamousavi.github.io/media/posts/9/Hospital.jpg" alt="" width="2880" height="1212"></figure>
<figcaption >Landing page - Healthcare</figcaption>
</figure>
<p> </p>
<figure ><figure class="post__image post__image--wide"><img  src="https://tahamousavi.github.io/media/posts/9/Market-research.jpg" alt="" width="2880" height="1212"></figure>
<figcaption >Landing page - Market research</figcaption>
</figure>
<p> </p>
<figure ><figure class="post__image post__image--wide"><img  src="https://tahamousavi.github.io/media/posts/9/Customer-experience.jpg" alt="" width="2880" height="1212"></figure>
<figcaption >Landing page - Customer experience</figcaption>
</figure>
<p> </p>
<figure class="post__image post__image--wide"><img  src="https://tahamousavi.github.io/media/posts/9/porsline-Old-browser-details-2.webp" alt="" width="1600" height="1884"></figure>
<figure class="post__image post__image--wide" ><img src="https://tahamousavi.github.io/media/posts/9/porsline-Old-browser.webp" alt="" width="2400" height="1536">
<figcaption >Outdated browser message</figcaption>
</figure>
<p> </p>
<hr>
<p> </p>
            ]]>
        </content>
    </entry>
    <entry>
        <title>Animated Hologram</title>
        <author>
            <name>Taha Mousavi</name>
        </author>
        <link href="https://tahamousavi.github.io/torob-hologram.html"/>
        <id>https://tahamousavi.github.io/torob-hologram.html</id>
        <media:content url="https://tahamousavi.github.io/media/posts/21/Hologram-cover2x.jpg" medium="image" />
            <category term="Visuals"/>

        <updated>2024-11-23T13:14:29+03:30</updated>
            <summary>
                <![CDATA[
                        <img src="https://tahamousavi.github.io/media/posts/21/Hologram-cover2x.jpg" alt="" />
                    Designing an eye catching animated warranty sign for Torob company with SVG and CSS. See the Pen Animated Star Hologram&hellip;
                ]]>
            </summary>
        <content type="html">
            <![CDATA[
                    <p><img src="https://tahamousavi.github.io/media/posts/21/Hologram-cover2x.jpg" class="type:primaryImage" alt="" /></p>
                <p>Designing an eye catching animated warranty sign for Torob company with SVG and CSS.<br><br></p>
<p class="codepen" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-height="300" data-default-tab="html,result" data-slug-hash="MWxogYK" data-user="Taha-Mousavi-the-scripter">See the Pen <a href="https://codepen.io/Taha-Mousavi-the-scripter/pen/MWxogYK"> Animated Star Hologram</a> by Taha Mousavi (<a href="https://codepen.io/Taha-Mousavi-the-scripter">@Taha-Mousavi-the-scripter</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<p>
<script async="" src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
</p>
            ]]>
        </content>
    </entry>
    <entry>
        <title>Illustrations for Torob</title>
        <author>
            <name>Taha Mousavi</name>
        </author>
        <link href="https://tahamousavi.github.io/commissioned-illustrations-2.html"/>
        <id>https://tahamousavi.github.io/commissioned-illustrations-2.html</id>
        <media:content url="https://tahamousavi.github.io/media/posts/20/Commissioned-Illustrations-cover.webp" medium="image" />
            <category term="Visuals"/>

        <updated>2024-02-22T17:38:36+03:30</updated>
            <summary>
                <![CDATA[
                        <img src="https://tahamousavi.github.io/media/posts/20/Commissioned-Illustrations-cover.webp" alt="" />
                    Torob Yummy Radish is an illustration style commissioned by Torob* to create a landing page for the business panel. And&hellip;
                ]]>
            </summary>
        <content type="html">
            <![CDATA[
                    <p><img src="https://tahamousavi.github.io/media/posts/20/Commissioned-Illustrations-cover.webp" class="type:primaryImage" alt="" /></p>
                <h2>Torob</h2>
<p>Yummy Radish is an illustration style commissioned by Torob* to create a landing page for the business panel. And some illustrations on the website for the empty state of pages. <br><em>* Torob means radish in Persian language</em></p>
<p>Client: Torob<br>2019 - 2021</p>
<figure class="post__image post__image--wide" ><img src="https://tahamousavi.github.io/media/posts/20/torob-illustration-part-1.webp" alt="" width="1600" height="1200">
<figcaption >Illustration for business panel landing page</figcaption>
</figure>
<p> </p>
<figure class="post__image post__image--wide" ><img src="https://tahamousavi.github.io/media/posts/20/torob-illustration-shot-1-3.png" alt="" width="1600" height="1200">
<figcaption >Screenshot of business panel landing page</figcaption>
</figure>
<p> </p>
<figure class="post__image post__image--wide" ><img src="https://tahamousavi.github.io/media/posts/20/torob-illustration-shot-2.png" alt="" width="1600" height="1200">
<figcaption >Screenshot of business panel landing page</figcaption>
</figure>
<p> </p>
<figure class="post__image post__image--wide" ><img src="https://tahamousavi.github.io/media/posts/20/torob-illustration-part-2.webp" alt="" width="1600" height="1200">
<figcaption >Illustration for empty stats on website</figcaption>
</figure>
<p> </p>
<figure class="post__image post__image--wide" ><img src="https://tahamousavi.github.io/media/posts/20/torob-illustration-shot-3-2.png" alt="" width="1600" height="1200">
<figcaption >Empty state of favorite products page on website</figcaption>
</figure>
<p> </p>
<hr>
<p> </p>
            ]]>
        </content>
    </entry>
    <entry>
        <title>Personal Drawing</title>
        <author>
            <name>Taha Mousavi</name>
        </author>
        <link href="https://tahamousavi.github.io/personal-drawing.html"/>
        <id>https://tahamousavi.github.io/personal-drawing.html</id>
        <media:content url="https://tahamousavi.github.io/media/posts/8/Untitled-1.webp" medium="image" />
            <category term="Visuals"/>

        <updated>2024-02-22T17:03:27+03:30</updated>
            <summary></summary>
        <content type="html">
            <![CDATA[
                    <p><img src="https://tahamousavi.github.io/media/posts/8/Untitled-1.webp" class="type:primaryImage" alt="" /></p>
                <figure class="post__image post__image--wide"><img  src="https://tahamousavi.github.io/media/posts/8/Untitled-4.webp" alt="" width="1600" height="1212"></figure>
<p> </p>
<p> </p>
<p> </p>
<figure class="post__image post__image--wide"><img  src="https://tahamousavi.github.io/media/posts/8/Untitled-3.webp" alt="" width="1600" height="1200"></figure>
<p> </p>
<p> </p>
<p> </p>
<figure class="post__image post__image--wide"><img  src="https://tahamousavi.github.io/media/posts/8/Untitled-2.webp" alt="" width="1600" height="1083"></figure>
<p> </p>
<p> </p>
<p> </p>
<figure class="post__image post__image--wide"><img  src="https://tahamousavi.github.io/media/posts/8/Untitled-5.webp" alt="" width="1600" height="1080"></figure>
<p> </p>
<p> </p>
<p> </p>
<figure class="post__image post__image--wide"><img  src="https://tahamousavi.github.io/media/posts/8/Untitled-7.webp" alt="" width="1600" height="1200"></figure>
<p> </p>
<p> </p>
<p> </p>
<figure class="post__image post__image--wide"><img  src="https://tahamousavi.github.io/media/posts/8/Untitled-9.gif" alt="" width="480" height="360"></figure>
<p> </p>
<p> </p>
<p> </p>
<figure class="post__image post__image--wide"><img  src="https://tahamousavi.github.io/media/posts/8/Untitled-8.webp" alt="" width="1600" height="1200"></figure>
<p> </p>
<p> </p>
<p> </p>
<figure class="post__image post__image--wide"><img  src="https://tahamousavi.github.io/media/posts/8/Untitled-1-2.webp" alt="" width="1600" height="1200"></figure>
<p> </p>
<p> </p>
<p> </p>
            ]]>
        </content>
    </entry>
</feed>