https://roy-sherizly.com Roy Sherizly | Product Designer | UX/UI Thu, 25 Jun 2026 12:19:57 +0000 https://roy-sherizly.com en https://roy-sherizly.com/Container Sun, 03 Mar 2019 16:45:35 +0000 Roy Sherizly | Product Designer | UX/UI https://roy-sherizly.com/Container <img width="1404" height="339" width_o="1404" height_o="339" data-src="https://freight.cargo.site/t/original/i/7b526343257518ca5b4b28ad9df2c8e4b34da4eac6b8fc1752b1ab3e69fbb484/wonder_years.png" data-mid="73458655" border="0" data-scale="68" src="https://freight.cargo.site/w/1000/i/7b526343257518ca5b4b28ad9df2c8e4b34da4eac6b8fc1752b1ab3e69fbb484/wonder_years.png" /> https://roy-sherizly.com/Wix-Legends-Designing-a-Voice-First-AI-Digital-Presence Thu, 25 Jun 2026 12:19:57 +0000 Roy Sherizly | Product Designer | UX/UI https://roy-sherizly.com/Wix-Legends-Designing-a-Voice-First-AI-Digital-Presence PRODUCT DESIGN · GEN AI · UX Wix Legends: How we built a Video-First AI Digital Presence PlatformWix Legends is a new, cutting edge initiative that introduces agentic AI personas to the Wix platform, enabling users to create, customize and deploy a live digital avatar that engages visitors in real time across synchronized video, voice, and chat. This next evolution of online presence allows creators and businesses to scale their personal brand 24/7 while fully tailoring their Legend's look, behavior, and knowledge base to effortlessly automate knowledge sharing, lead capture, FAQs and more. ︎ Wix LegendsBuilding the next evolution of online presenceWix Legends marks a shift into a fully interactive and personal experience where your online presence isn't just a portfolio or a storefront - it’s a live, autonomous extension of your brand. It’s a huge opportunity to change how creators and businesses actually connect with people on the web. <img width="1412" height="1200" width_o="1412" height_o="1200" data-src="https://freight.cargo.site/t/original/i/2e1105beab8ce583aaab2d0bf54cded4177f69051a9c02495d033962641a69a9/thumbnail.png" data-mid="250177924" border="0" src="https://freight.cargo.site/w/1000/i/2e1105beab8ce583aaab2d0bf54cded4177f69051a9c02495d033962641a69a9/thumbnail.png" /> As part of the core Wix Legends team, we were given total freedom to explore a completely unmapped territory for Wix, and I was incredibly excited to be part of this project from the ground up. With no pre-existing Wix frameworks to follow, it was an incredible opportunity to help shape the product strategy, influence the tech stack, and design a futuristic conversational system completely from scratch as a standalone Wix offering. Research &amp; initial ideation In early 2025, the team began market research and exploration of existing technologies that were available to us. We benchmarked the emerging AI landscape as well as evaluated voice and audio APIs like ElevenLabs and Hume to ground the platform. As we became more familiar with the market, we began to recognize opportunities and possible differentiators for our own solution.&nbsp; <img width="460" height="160" width_o="460" height_o="160" data-src="https://freight.cargo.site/t/original/i/974ef1b071a459fd7ace380132a653d039981a2199d5c62061cf78bcf3aac9f6/Frame-6.png" data-mid="249832031" border="0" src="https://freight.cargo.site/w/460/i/974ef1b071a459fd7ace380132a653d039981a2199d5c62061cf78bcf3aac9f6/Frame-6.png" /> <img width="634" height="160" width_o="634" height_o="160" data-src="https://freight.cargo.site/t/original/i/6c7483050db7587d4c4c49af93bf8e2f08cc52b28f2babff0391d0304fad878a/Frame-1.png" data-mid="249832026" border="0" src="https://freight.cargo.site/w/634/i/6c7483050db7587d4c4c49af93bf8e2f08cc52b28f2babff0391d0304fad878a/Frame-1.png" /> <img width="496" height="160" width_o="496" height_o="160" data-src="https://freight.cargo.site/t/original/i/6a3fb4243ef8df0f89775b172c485ec8a1eca528652394357fd781d9a18224b4/Frame-2.png" data-mid="249832027" border="0" src="https://freight.cargo.site/w/496/i/6a3fb4243ef8df0f89775b172c485ec8a1eca528652394357fd781d9a18224b4/Frame-2.png" /> <img width="790" height="160" width_o="790" height_o="160" data-src="https://freight.cargo.site/t/original/i/0e7a5f64df3f156f8d41c7d4d5a20c8fe1a149b6e73b001c553f4287ef757d67/Frame-5.png" data-mid="249832030" border="0" src="https://freight.cargo.site/w/790/i/0e7a5f64df3f156f8d41c7d4d5a20c8fe1a149b6e73b001c553f4287ef757d67/Frame-5.png" /> <img width="564" height="160" width_o="564" height_o="160" data-src="https://freight.cargo.site/t/original/i/9d22d34b663ebe0946e1a48b5ef3a992dcc6f6a3c31f1a8bd05c1a75ccbb035e/Frame-4.png" data-mid="249832029" border="0" src="https://freight.cargo.site/w/564/i/9d22d34b663ebe0946e1a48b5ef3a992dcc6f6a3c31f1a8bd05c1a75ccbb035e/Frame-4.png" /> <img width="634" height="160" width_o="634" height_o="160" data-src="https://freight.cargo.site/t/original/i/29d140be4fa43c4257b3abdffdba0c833890054da87c27e36060b21480fffda7/Frame-3.png" data-mid="249832028" border="0" src="https://freight.cargo.site/w/634/i/29d140be4fa43c4257b3abdffdba0c833890054da87c27e36060b21480fffda7/Frame-3.png" /> We recognized that most existing products remained within their specific domains: video avatars, voice cloning, or basic persona “knowledge”. It became clear that a single holistic solution that put them all together was missing - this became our big differentiator and north star. With Wix’s established reach and understanding of the potential user base that would adopt this product, we were excited to get started.&nbsp; <img width="1208" height="536" width_o="1208" height_o="536" data-src="https://freight.cargo.site/t/original/i/249ff788886e26f27c08b1bfde301f7c07d127a710165fd683946046b23f4fd4/feature-comparison2.png" data-mid="251983815" border="0" src="https://freight.cargo.site/w/1000/i/249ff788886e26f27c08b1bfde301f7c07d127a710165fd683946046b23f4fd4/feature-comparison2.png" /> Fully embracing conversational UIOur ultimate goal was to give users the tools to build an interactive video avatar - a new, natural way for people to interact with AI in a more natural “face-to-face” conversation. Yet, as we began to map out the onboarding we realized that we were instinctively designing a system that didn’t adhere to these same ideas. Then it hit us: why use traditional patterns to build something that is meant to feel human? <img width="1350" height="900" width_o="1350" height_o="900" data-src="https://freight.cargo.site/t/original/i/5f1417eaedf48ac5bf248dc2c6c45976b2dfd7c0db6997783732a3d899adc473/her.png" data-mid="250136099" border="0" src="https://freight.cargo.site/w/1000/i/5f1417eaedf48ac5bf248dc2c6c45976b2dfd7c0db6997783732a3d899adc473/her.png" />“Her” (2013), Warner Bros. Pictures We instinctively threw out the traditional blueprint we had been using and moved to our own video and voice technology to power the creation and management flows, making the system just as conversational as the end product itself. Besides being a unique experience in today’s landscape, we would be teaching the user how it feels to interact with an AI avatar as they were creating one for themselves. We knew that this approach was ambitious and planned to measure its performance as we developed it further. Ditching the abstract circles and humanizing the OS We now understood that our system needed to speak and interact with the user while walking them through the experience, yet we still didn’t know how it should look, sound or feel. Examining how today's AI landscape handles voice conversation shows a clear pattern of abstract shapes and pulsating colors to represent AI during conversation, which to us felt cold and robotic and not the approach we wanted to take. <img width="4904" height="2728" width_o="4904" height_o="2728" data-src="https://freight.cargo.site/t/original/i/cf0438ec474ff5c50dbef1e15b6a4b106a827e0bf683f450811dc8cf37084810/assistant_visualizations.png" data-mid="250104924" border="0" src="https://freight.cargo.site/w/1000/i/cf0438ec474ff5c50dbef1e15b6a4b106a827e0bf683f450811dc8cf37084810/assistant_visualizations.png" /> To break away from these sterile, faceless interfaces and create an interaction that felt distinctly human, we created "Atlas" - our own custom digital interviewer and OS designed to bring true face-to-face connection to the conversational experience. The creation of Atlas had various iterations that took us through many combinations of different voices, visual looks and most importantly communication style and tone-of-voice.In parallel, we continued to incorporate Atlas into the system itself - giving her increasingly more capabilities such as extracting information automatically and leading the user through flows and answering questions. <img width="1366" height="768" width_o="1366" height_o="768" data-src="https://freight.cargo.site/t/original/i/813c72b698787666986d129dd0b20b387236c4e407a452ef525911dbe6b74421/atlas1.png" data-mid="250177739" border="0" src="https://freight.cargo.site/w/1000/i/813c72b698787666986d129dd0b20b387236c4e407a452ef525911dbe6b74421/atlas1.png" /> <img width="1366" height="768" width_o="1366" height_o="768" data-src="https://freight.cargo.site/t/original/i/617b442e67b19b8533cab2ce38f0f15bba2cce10ea1ee201427da8a6541277c0/atlas2.png" data-mid="250177738" border="0" src="https://freight.cargo.site/w/1000/i/617b442e67b19b8533cab2ce38f0f15bba2cce10ea1ee201427da8a6541277c0/atlas2.png" /> <img width="1366" height="768" width_o="1366" height_o="768" data-src="https://freight.cargo.site/t/original/i/1f300800f7f2c0a32487fd41c8a5e80e8f98a7aefed5b78519e7a69c3bb9573d/atlas3.png" data-mid="250177776" border="0" src="https://freight.cargo.site/w/1000/i/1f300800f7f2c0a32487fd41c8a5e80e8f98a7aefed5b78519e7a69c3bb9573d/atlas3.png" /> &nbsp; Because replacing traditional flows and patterns with a more conversational system was highly experimental, we ran extensive testing and usability to optimize Atlas’s voice, pacing and demeanor so she felt natural rather than rigid and robotic. Acting as the system’s “Onboarding” guide, Atlas had to juggle multiple skills simultaneously while keeping the user moving through the main goal we set for her: Introduce the platform to the user and set expectationsExtract the required information from the userAnswer general &amp; specific questions about the current screenFacilitate a natural, personal &amp; conversational experience Atlas extracting information through conversation during the onboarding. Our design risk paid off! Usability sessions and onboarding funnel data confirmed a major reduction in friction and dropoff rates compared to the original straightforward baseline. Users expressed that it was a real “wow” moment and felt unlike anything that they’ve experienced in the past.&nbsp;Atlas guides users seamlessly through the entire setup flow before transitioning into the main workspace where she remains as a persistent assistant capable of modifying settings and capturing data through casual dialogue. Designing frictionless identity cloningEarly stages of the product depended heavily on existing technologies for video cloning. The initial version required reading out scripts and sitting still through silent calibration segments which led to high failure rates, frustration and significant drop off. We quickly understood that the experience needed to go in a different direction - reducing friction and bringing the user to a “wow” moment as quickly as possible. <img width="2732" height="1536" width_o="2732" height_o="1536" data-src="https://freight.cargo.site/t/original/i/3dcbdfa9f32d9979aad1a666c2aa61be8e928dd3f223147edcf418b76406dde3/reading_script.jpg" data-mid="250136941" border="0" src="https://freight.cargo.site/w/1000/i/3dcbdfa9f32d9979aad1a666c2aa61be8e928dd3f223147edcf418b76406dde3/reading_script.jpg" />First iteration of video cloning, requiring reading a script and remaining silent for 1 min. Instead of continuing to battle with the technology, we came up with&nbsp; an ingenious idea that helped us solve these issues and completely eliminiate the aforementioned friction points. We developed an internal process that could seamlessly create your video avatar from just a single uploaded image. <img width="1404" height="768" width_o="1404" height_o="768" data-src="https://freight.cargo.site/t/original/i/97209ab973998d454841cd35034225609a25a217d29d81508d61e49be518103e/generate-image-1.png" data-mid="250174130" border="0" src="https://freight.cargo.site/w/1000/i/97209ab973998d454841cd35034225609a25a217d29d81508d61e49be518103e/generate-image-1.png" /> <img width="1402" height="768" width_o="1402" height_o="768" data-src="https://freight.cargo.site/t/original/i/d547e2b5c8d335bd4f5e1d16176f22b31fc19a51b91bb8ec8360cbb227ca7cf1/generate-image-2.png" data-mid="250174131" border="0" src="https://freight.cargo.site/w/1000/i/d547e2b5c8d335bd4f5e1d16176f22b31fc19a51b91bb8ec8360cbb227ca7cf1/generate-image-2.png" /> <img width="1402" height="768" width_o="1402" height_o="768" data-src="https://freight.cargo.site/t/original/i/89cdee80097e0839f4eaf010f47efea8c830ccb17371d056625615aca61fa981/generate-image-3.png" data-mid="250174132" border="0" src="https://freight.cargo.site/w/1000/i/89cdee80097e0839f4eaf010f47efea8c830ccb17371d056625615aca61fa981/generate-image-3.png" /> Updated video cloning flow using just a single image upload for the full creation process. Behind the scenes, our upgraded flow takes the uploaded image and generates a high-quality and “clone-optimized” image (centering, lighting etc.) that is then automatically sent for video generation, resulting in a 100% video cloning success rate. We later added the ability for users to adjust and customize the image using generative prompts, as well as generate intent-based suggestions according to their goal (i.e. a bicycle mechanic would get a related image suggestion). <img width="1404" height="769" width_o="1404" height_o="769" data-src="https://freight.cargo.site/t/original/i/c43edd6f1c309cdfe5669fd2eb00190a14c2445dd710a2503a58b93cc19a87f8/customize-1.png" data-mid="250240000" border="0" src="https://freight.cargo.site/w/1000/i/c43edd6f1c309cdfe5669fd2eb00190a14c2445dd710a2503a58b93cc19a87f8/customize-1.png" /> <img width="1404" height="769" width_o="1404" height_o="769" data-src="https://freight.cargo.site/t/original/i/000e7a59ac631e54700404bf7168556f3cc3b2d03e6b3606d10a6cd43c768842/customize-2.png" data-mid="250240001" border="0" src="https://freight.cargo.site/w/1000/i/000e7a59ac631e54700404bf7168556f3cc3b2d03e6b3606d10a6cd43c768842/customize-2.png" /> <img width="1404" height="768" width_o="1404" height_o="768" data-src="https://freight.cargo.site/t/original/i/028e9a23cf41e09a9749d136c920a1bb0a00c155d9ad8a2ec59437638f6289c9/customize-3.png" data-mid="250240002" border="0" src="https://freight.cargo.site/w/1000/i/028e9a23cf41e09a9749d136c920a1bb0a00c155d9ad8a2ec59437638f6289c9/customize-3.png" /> Generating your own custom Legend “style” based on your uploaded image. For voice cloning, Atlas would record the user seamlessly and organically during the onboarding conversation with no need to read any script. Of course, fallbacks were put in place in case the user didn’t talk (or has no mic) during onboarding. At the end of the video cloning process, we generate a short preview of your Legend before it’s sent for full generation. This gives users the chance to see and hear their Legend and continue making changes if they want. Preview of the user’s video clone (including voice) that was generated from a single uploaded image. Adapting to support Custom Personas Testing showed that many users still preferred brand characters over personal clones of themselves, so we quickly shifted our focus to accommodate creating custom personas. This required a substantial overhaul of the onboarding flow and system architecture. <img width="1800" height="1542" width_o="1800" height_o="1542" data-src="https://freight.cargo.site/t/original/i/3552485a006efb12fbb6a2e93873a7a7fc60d06cec8ecb4ace25c745f8cd418e/Stock-Grid.png" data-mid="250177627" border="0" src="https://freight.cargo.site/w/1000/i/3552485a006efb12fbb6a2e93873a7a7fc60d06cec8ecb4ace25c745f8cd418e/Stock-Grid.png" /> A selection of a few pre-made personas that we allow users to use for their Legend. The original onboarding and workspace were redesigned to support both options - creating yourself, or choosing from pre-made stock avatars. We created a variety of pre-made video and voice pairings, while also enabling users to generate entirely custom personas from scratch.&nbsp; <img width="1404" height="769" width_o="1404" height_o="769" data-src="https://freight.cargo.site/t/original/i/a59e20b950054b4a502ee969ed68ff92758419c0ceabab6c8ea6847fa5c82eae/Customize-voice.png" data-mid="250240022" border="0" src="https://freight.cargo.site/w/1000/i/a59e20b950054b4a502ee969ed68ff92758419c0ceabab6c8ea6847fa5c82eae/Customize-voice.png" /> Voice customization - choose an existing voice or create your own. This ultimately gave business owners full control over exactly what their Legend looks and sounds like - flexibility that proved crucial for user satisfaction and adoption.&nbsp; A flexible workspace experienceWhat does a conversational workspace look like? This was one of the biggest questions we had to tackle for users who finish the onboarding and want to manage their Legend. We wanted to keep the great conversational experience from the onboarding inside the workspace as well, so Atlas is always 1 click away and ready to perform any action the user needs - from changing a setting, editing information or adding knowledge. Atlas updating settings via conversation with the user.Inner workspace pages remain accessible from the side menu at any time, allowing users to see and manually adjust all their information for full control. Since this is a completely new approach to interacting with a system, we are continuously monitoring usage to optimize the experience within the workspace. <img width="1298" height="756" width_o="1298" height_o="756" data-src="https://freight.cargo.site/t/original/i/060af37f13a59b50becbdb8ca74c0737d9ff5ed368c1c8a363002dc579b45f3c/workspace3.gif" data-mid="250399378" border="0" src="https://freight.cargo.site/w/1000/i/060af37f13a59b50becbdb8ca74c0737d9ff5ed368c1c8a363002dc579b45f3c/workspace3.gif" /> Atlas within the workspace alongside inner-pages. Extracting, collecting and managing knowledgeCreating your Legend’s look &amp; feel is super fun and exciting, but we knew that adding knowledge quickly and easily was key to the success of the product, as well as showing users the actual value their Legend brings. We split our approach to 2 different methods of knowledge building:&nbsp; conversational and manual. <img width="1404" height="767" width_o="1404" height_o="767" data-src="https://freight.cargo.site/t/original/i/66842d6332fe55698a641a5215eff24729af5424db5b5bbc4070e832f35caef6/talk-to-atlas-2.png" data-mid="250397635" border="0" src="https://freight.cargo.site/w/1000/i/66842d6332fe55698a641a5215eff24729af5424db5b5bbc4070e832f35caef6/talk-to-atlas-2.png" />Atlas extracting knowledge from user conversation. Conversational: Keeping true to our product ideology, we offer an interactive and conversational way to add knowledge through Atlas. By naturally talking to Atlas from within the workspace, she automatically knows when to extract information and where best to put it. Additionally, Atlas has the ability to change settings like custom instructions, behavior settings or bio information upon request. <img width="1404" height="768" width_o="1404" height_o="768" data-src="https://freight.cargo.site/t/original/i/bbc46ec70bb344f1a67f14f5aa689b7fa88da6dc55574e29cbff1756b39fcfff/knowledge-1.png" data-mid="250397632" border="0" src="https://freight.cargo.site/w/1000/i/bbc46ec70bb344f1a67f14f5aa689b7fa88da6dc55574e29cbff1756b39fcfff/knowledge-1.png" /> <img width="1404" height="767" width_o="1404" height_o="767" data-src="https://freight.cargo.site/t/original/i/ffe41e4be7f505c5c07956a7b30dba9258bdf5a0378bb7f154b24e201a1991ec/knowledge-2.png" data-mid="250397633" border="0" src="https://freight.cargo.site/w/1000/i/ffe41e4be7f505c5c07956a7b30dba9258bdf5a0378bb7f154b24e201a1991ec/knowledge-2.png" /> Adding knowledge manually via the Knowledge page. Manual: We realized that many users have pre-existing knowledge already on hand, so we created an engine for extracting knowledge from uploaded links, files, text and images. Users simply drop in their existing assets while the system processes the materials in seconds, enabling the Legend to immediately give accurate answers to visitor questions. Creating an improvement loopBecause the Legend speaks on the user’s behalf, giving users the ability to analyze and improve its performance was crucial for us to include. How do users know that their Legend is being helpful and bringing value to visitors? Legend owners have the ability to view conversations, see what the main conversation points were and filter by intent. <img width="1404" height="769" width_o="1404" height_o="769" data-src="https://freight.cargo.site/t/original/i/37a39fa4b8b25a0a76878c94bf479a8269b774c8c8f624bdb8372272bea1ae11/conversationlist.png" data-mid="251813422" border="0" src="https://freight.cargo.site/w/1000/i/37a39fa4b8b25a0a76878c94bf479a8269b774c8c8f624bdb8372272bea1ae11/conversationlist.png" />Additionally, its possible to dive into a specific conversation to see what users are interested in and how the Legend answers. <img width="1404" height="769" width_o="1404" height_o="769" data-src="https://freight.cargo.site/t/original/i/1a3d2fe659d4d5a854e4e595f06729b136303599ed5e309a584c651509a6318c/conversation1.png" data-mid="251813423" border="0" src="https://freight.cargo.site/w/1000/i/1a3d2fe659d4d5a854e4e595f06729b136303599ed5e309a584c651509a6318c/conversation1.png" /> While its possible to manually view visitor conversation summaries to learn about satisfaction levels, we knew that we needed a dedicated system for improving the Legend’s answers.&nbsp;The “Knowledge Gap” feature dynamically summarizes user transcripts and highlights specific knowledge gaps where the Legend lacked information. Our system weighs every user message against its relevancy and whether there is enough knowledge to answer the question. If it detects a relevant missing subject, a knowledge gap is exposed to the owner as well as example questions that triggered the gap itself. This allows Legend owners to proactively feed the system new data based on real user needs, which in turn brings more value to the users talking to the Legend. This extremely powerful feedback loop gives the Legend owner a true feeling that the Legend represents them in the best way possible. The End-User Experience: Talking To a LegendPutting in the effort of creating a Legend, customizing its behavior and adding knowledge culminates with sharing your legend with your audience. We focused on giving visitors a great low-latency video experience and high conversational value. <img width="2808" height="1412" width_o="2808" height_o="1412" data-src="https://freight.cargo.site/t/original/i/9656e39843969b9af6d53619714307a3895409ef188f6cdb7a1776b73e178b63/uou.png" data-mid="250400342" border="0" src="https://freight.cargo.site/w/1000/i/9656e39843969b9af6d53619714307a3895409ef188f6cdb7a1776b73e178b63/uou.png" />Experiencing a video call with a Wix Legend.Visitors can choose whether they want a video call, voice call or just a text chat (both on mobile and desktop). Besides replying in voice and text, the Legend can expose interactable widgets such as video embeds, links, files and rich-text if it recognizes the need. These widgets are a powerful differentiator for our product and bring immense value to the end user, as well as allowing the Legend owner to share more with their visitors. <img width="1404" height="769" width_o="1404" height_o="769" data-src="https://freight.cargo.site/t/original/i/87e782d1a644b403bfdbe5033e38a2b64a8e8ca2ad7dcdcb6b609f747a59744f/open-chat.png" data-mid="251813421" border="0" src="https://freight.cargo.site/w/1000/i/87e782d1a644b403bfdbe5033e38a2b64a8e8ca2ad7dcdcb6b609f747a59744f/open-chat.png" /> <img width="1404" height="769" width_o="1404" height_o="769" data-src="https://freight.cargo.site/t/original/i/ea0bd19e5ad253b30d85c6287d16b5b63cf0aa2bcf46e18e5bf62f23d383f074/Widget.png" data-mid="251813424" border="0" src="https://freight.cargo.site/w/1000/i/ea0bd19e5ad253b30d85c6287d16b5b63cf0aa2bcf46e18e5bf62f23d383f074/Widget.png" /> Widgets exposed by the Legend during conversation open the side panel - serving as both a history and chat. What the future holds As vibe-coding and LLMs become the new norm for retrieving information and executing tasks, its clear that the next generation of&nbsp; products will look entirely different than what we know today. Making these interactions feel like realistic and natural conversational experiences remains a huge and exciting challenge for us. This is why the Wix Legends team is continuing its focus on pushing the envelope further, exposing powerful integrations and adding more robust features so that your Legend can do more for you, and your users.&nbsp; https://roy-sherizly.com/Wix-Portfolio-AI-Image-Clustering Wed, 24 Jun 2026 12:47:34 +0000 Roy Sherizly | Product Designer | UX/UI https://roy-sherizly.com/Wix-Portfolio-AI-Image-Clustering PRODUCT DESIGN · GEN AI · UX Wix Portfolio: AI Image ClusteringMillions of Wix users across the globe showcase their work online using beautiful portfolio sites. By constantly reviewing data and user feedback, we knew that building a portfolio is traditionally a high-friction, time consuming process - especially for new users. Creators are often overwhelmed by the manual labor of sorting through years of unorganized files and writing copy for every project. We caught the GenAI wave early, recognizing that machine learning could solve this tedious workflow and take portfolios live in a fraction of the time. That drove us to launch AI Image Clustering in May 2024, revolutionizing our portfolio suite. ︎&nbsp;Press release <img width="2432" height="1148" width_o="2432" height_o="1148" data-src="https://freight.cargo.site/t/original/i/5176f5afbe613bb234aa0b2de799b9351403441e6752ec9a7286d96893864ae7/c1.png" data-mid="249791476" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/5176f5afbe613bb234aa0b2de799b9351403441e6752ec9a7286d96893864ae7/c1.png" /> Recognizing the need The initial setup of a portfolio site is where most users dropped off - our data showed a clear need to streamline the creation process by eliminating manual, repetitive tasks so users could see value instantly. We knew we had a unique opportunity to integrate AI seamlessly and naturally within the product - it was a chance to create a magical "wow" moment where the heavy lifting was completely done for the user, leaving them with a finished foundation they could simply tweak if they wanted to. By tackling this core user frustration at the top of our funnel, we aimed to directly boost our main product KPIs: total projects created and sites published with a portfolio. <img width="1302" height="804" width_o="1302" height_o="804" data-src="https://freight.cargo.site/t/original/i/08f848436eedd1f7d5643c5e49e42baee0a03d948f55fe7bcafb473df4cef016/a1.png" data-mid="249791469" border="0" data-scale="91" src="https://freight.cargo.site/w/1000/i/08f848436eedd1f7d5643c5e49e42baee0a03d948f55fe7bcafb473df4cef016/a1.png" /> <img width="1302" height="804" width_o="1302" height_o="804" data-src="https://freight.cargo.site/t/original/i/6a594dc39b1127e5657cba56703b1c26d3fcd46e20c576786e5a244db1ef02bc/a2.png" data-mid="249791470" border="0" data-scale="91" src="https://freight.cargo.site/w/1000/i/6a594dc39b1127e5657cba56703b1c26d3fcd46e20c576786e5a244db1ef02bc/a2.png" /> <img width="1302" height="1010" width_o="1302" height_o="1010" data-src="https://freight.cargo.site/t/original/i/b872c75c14f75ba80e76a69c7bf5762ac3be68ff68b19fe58c32f0c185bd975b/a3.png" data-mid="249791471" border="0" data-scale="91" src="https://freight.cargo.site/w/1000/i/b872c75c14f75ba80e76a69c7bf5762ac3be68ff68b19fe58c32f0c185bd975b/a3.png" /> <img width="1302" height="1010" width_o="1302" height_o="1010" data-src="https://freight.cargo.site/t/original/i/7788cf254654a34b1e26dad8224a8fab823066ecedaf98ac6d5a54088ff7555b/a4.png" data-mid="249791472" border="0" data-scale="91" src="https://freight.cargo.site/w/1000/i/7788cf254654a34b1e26dad8224a8fab823066ecedaf98ac6d5a54088ff7555b/a4.png" /> The Solution: AI Image Clustering To eliminate the painful sorting phase entirely, I designed a seamless setup experience within the Wix Backoffice: users can simply drop a large, completely unorganized batch of images into a single upload area with no pre-sorting required. <img width="1302" height="1060" width_o="1302" height_o="1060" data-src="https://freight.cargo.site/t/original/i/dc5b69cd989150ad734c8be045b35caa62ca9c3da38672bd9cd84f493c099e7e/b2.png" data-mid="249791474" border="0" src="https://freight.cargo.site/w/1000/i/dc5b69cd989150ad734c8be045b35caa62ca9c3da38672bd9cd84f493c099e7e/b2.png" /> Our AI quickly analyzes the visual context of the images to identify relevant categories tailored specifically to portfolio sites. By combining this visual analysis with any initial description or data the user provided in the first step of the flow, the system instantly clusters the assets into distinct projects, complete with automatically generated contextual titles and descriptions. <img width="1302" height="738" width_o="1302" height_o="738" data-src="https://freight.cargo.site/t/original/i/cf4d422c35dbaa0ad048151c9df83ac61d88055b04f8335fe43837ff776e646a/b3.png" data-mid="249791475" border="0" src="https://freight.cargo.site/w/1000/i/cf4d422c35dbaa0ad048151c9df83ac61d88055b04f8335fe43837ff776e646a/b3.png" /> A major hurdle we faced was designing a flow that convinced users to upload a massive project library right away, instead of them just "testing" the feature with a small batch of a few random photos. Earning that level of user trust so early in a flow was incredibly difficult, which is why creating a seamless, low-friction upload state paired with immediate visual feedback was so critical to proving the AI’s accuracy right off the bat. Our initial approach to this was to use accurate copy, as well as allow users to go back and add more images to analyze. At the same time, it was crucial for us to give users a strong sense of ownership despite the automated generation. To balance the AI's efficiency with human control, we integrated inline text editing and a simple drag &amp; drop mechanism for rearranging images. Giving users this high level of flexibility right before leaving the flow was key, ensuring they could quickly make minor adjustments and finish with the most optimal, personal result. <img width="2432" height="1148" width_o="2432" height_o="1148" data-src="https://freight.cargo.site/t/original/i/e148c67ea03608faf4a1e6831fd8e411db7ebfabd4f3190d6930b907ac52b887/c2.png" data-mid="249791582" border="0" src="https://freight.cargo.site/w/1000/i/e148c67ea03608faf4a1e6831fd8e411db7ebfabd4f3190d6930b907ac52b887/c2.png" /> Strong Post-Setup Demand When we launched the first phase of this feature, we focused purely on new portfolios, meaning the clustering flow was only exposed during a user's initial onboarding setup. This was done intentionally as it was the fastest way to bring this capability to users and see how they responsed to it. We quickly began hearing from users asking to access this feature post-setup so they could continue to cluster and add more projects even after the initial creation. This feedback from our community was a strong indication that the experience wasn't just a novelty, but something that brought sustained, repeatable value to their workflow and served as a clear roadmap going forward. <img width="3024" height="1674" width_o="3024" height_o="1674" data-src="https://freight.cargo.site/t/original/i/79b57119321d377066c2104fef8835afd0dd6193a875fbf61e9acd3af0741117/Screenshot-2026-06-25-at-12-57-06-Wix-Studio-My-Site-1.png" data-mid="249791500" border="0" src="https://freight.cargo.site/w/1000/i/79b57119321d377066c2104fef8835afd0dd6193a875fbf61e9acd3af0741117/Screenshot-2026-06-25-at-12-57-06-Wix-Studio-My-Site-1.png" /> Supercharging SEO with One-Click Alt TextDuring our initial research and user feedback cycles, we identified another major hidden pain point: creators want their work to be discoverable, but rarely have the time or SEO know-how to write optimal Alt-text for dozens of images. Recognizing this gap, we quickly implemented and launched automated Alt-text generation alongside our new AI Image Custering feature. With a single click, users can instantly equip their entire asset library with context aware and SEO optimized descriptions. This turned a tedious optimization chore into a frictionless, one-second victory that drastically improves their site's Google search rankings. This feature was then fully integrated in Wix’s existing SEO Wizard suite. <img width="3024" height="1674" width_o="3024" height_o="1674" data-src="https://freight.cargo.site/t/original/i/2039f1ee31c65459e464358103698d5847c268a7a1d11d40a7634b137b37611b/Screenshot-2026-06-25-at-12-57-33-Wix-Studio-My-Site-1.png" data-mid="249791501" border="0" src="https://freight.cargo.site/w/1000/i/2039f1ee31c65459e464358103698d5847c268a7a1d11d40a7634b137b37611b/Screenshot-2026-06-25-at-12-57-33-Wix-Studio-My-Site-1.png" /> <img width="3024" height="1674" width_o="3024" height_o="1674" data-src="https://freight.cargo.site/t/original/i/dc452d08e1b9f52055a80e5a8404cabfe5e1745ef2c91937f1e011c450f27997/Screenshot-2026-06-25-at-12-57-41-Wix-Studio-My-Site-1.png" data-mid="249791502" border="0" src="https://freight.cargo.site/w/1000/i/dc452d08e1b9f52055a80e5a8404cabfe5e1745ef2c91937f1e011c450f27997/Screenshot-2026-06-25-at-12-57-41-Wix-Studio-My-Site-1.png" /> Moving the needle By transforming a daunting content-management chore into a smart, automated workflow, we successfully removed one of the primary barriers to portfolio adoption. The feature significantly moved the needle for our core business metrics, resulting in a substantial lift in both projects created and the total number of live published sites utilizing Wix Portfolio and was quickly opened to all users. https://roy-sherizly.com/Wix-Mobile-Designing-a-Scalable-Mobile-Ecosystem Tue, 02 Mar 2021 16:48:58 +0000 Roy Sherizly | Product Designer | UX/UI https://roy-sherizly.com/Wix-Mobile-Designing-a-Scalable-Mobile-Ecosystem PRODUCT DESIGN · WIREFRAME · UXWix Mobile: Designing a Scalable Mobile Ecosystem Millions of Wix users create and manage their online presence by creating beautiful desktop websites that show off what they’re all about - whether it’s a booking system for classes, an online store, a blog or a restaurant, Wix has you covered. Mobile traffic has long surpassed that of desktop, which means that those users need to be able to manage their business on the go. Recognizing this great potential, this is how we planned and created the Wix mobile app. <img width="1600" height="792" width_o="1600" height_o="792" data-src="https://freight.cargo.site/t/original/i/d5e2b1fe446d887de37e11c7c4bc8275b18e49e4f852439076a2e74aa7b8ed0a/real_phone_1600.gif" data-mid="102873653" border="0" src="https://freight.cargo.site/w/1000/i/d5e2b1fe446d887de37e11c7c4bc8275b18e49e4f852439076a2e74aa7b8ed0a/real_phone_1600.gif" /> As the Lead Product Designer for the Wix Mobile Platform Team, I was responsible for designing, building, and maintaining the core application infrastructure. The goal wasn’t just to build a standalone app, but to create a scalable foundation that all of Wix’s independent product verticals (Stores, Bookings, Events, etc.) could seamlessly integrate into. What makes the Wix app different from Wix on the web? We already knew that creating a mobile management app would bring immense added value to business owners, allowing them to manage on the go, but we also wanted to create value for their customers as well.&nbsp; This led us to conceptualizing a mobile “member view” where members can join and see a mobile version of the business (think of a website, but in an app). This new concept resulted in both “Owners” &amp; “Members” having a significantly different way of engaging with the business, and thus following different paths when using the app. <img width="1942" height="468" width_o="1942" height_o="468" data-src="https://freight.cargo.site/t/original/i/3f7ea86645b45f75ff193e905ff022466b8ae9e9e01f34c8be4b8c991ea24505/user_path.png" data-mid="102887189" border="0" src="https://freight.cargo.site/w/1000/i/3f7ea86645b45f75ff193e905ff022466b8ae9e9e01f34c8be4b8c991ea24505/user_path.png" /> &nbsp; Owners Use the app to create &amp; manage their business while also engaging with their members. Owners want to be able to customize and manage their online presence while on the go, which in turn gives them incentive to invite members to join and interact. vs. Members Join to consume services/media or to socially engage with the community surrounding the business (i.e. store, blog, forum etc.). Members need to find value in using the app, through easily doing meaningful actions. Hopefully this experience also leads them to create their own Place (viral loop). Bringing the Wix experience to mobile Wix has a huge and established online offering that is built for use on desktop - beginning from the business manager, then on to the website editor and finally to a finished working website. <img width="1678" height="924" width_o="1678" height_o="924" data-src="https://freight.cargo.site/t/original/i/3c0283f2cab2b6b936ff6af6067e77bd2c5124588d8e1f56c63e173f251d778e/dash1.png" data-mid="100874539" border="0" src="https://freight.cargo.site/w/1000/i/3c0283f2cab2b6b936ff6af6067e77bd2c5124588d8e1f56c63e173f251d778e/dash1.png" /> <img width="3356" height="1846" width_o="3356" height_o="1846" data-src="https://freight.cargo.site/t/original/i/873a57fc293315b18130afe18acb8e86bbd9abe28f96df05fd39368db985b16f/web_6.png" data-mid="102864353" border="0" src="https://freight.cargo.site/w/1000/i/873a57fc293315b18130afe18acb8e86bbd9abe28f96df05fd39368db985b16f/web_6.png" /> <img width="1678" height="927" width_o="1678" height_o="927" data-src="https://freight.cargo.site/t/original/i/05f9386b1241fe64e3ff913e22ba1560458f152351b780cbcc365552141ace9b/dash4.png" data-mid="100874548" border="0" src="https://freight.cargo.site/w/1000/i/05f9386b1241fe64e3ff913e22ba1560458f152351b780cbcc365552141ace9b/dash4.png" /> <img width="3356" height="1850" width_o="3356" height_o="1850" data-src="https://freight.cargo.site/t/original/i/ef02bf178ce22e9322c67f4bbe215aacc2a70c9b4056107b93d70c064f90d493/web_5.png" data-mid="102864354" border="0" src="https://freight.cargo.site/w/1000/i/ef02bf178ce22e9322c67f4bbe215aacc2a70c9b4056107b93d70c064f90d493/web_5.png" /> <img width="1678" height="925" width_o="1678" height_o="925" data-src="https://freight.cargo.site/t/original/i/40ab730ba273e04a060a43bb7ca3a04afdc7f2c9970631abbe1683253dfb17ec/dash2.png" data-mid="100874541" border="0" src="https://freight.cargo.site/w/1000/i/40ab730ba273e04a060a43bb7ca3a04afdc7f2c9970631abbe1683253dfb17ec/dash2.png" /> <img width="1678" height="925" width_o="1678" height_o="925" data-src="https://freight.cargo.site/t/original/i/a8a57be87cb39be60afab91705ad8b4808a8404b65b6f100336a69ccf0826527/dash3.png" data-mid="100874545" border="0" src="https://freight.cargo.site/w/1000/i/a8a57be87cb39be60afab91705ad8b4808a8404b65b6f100336a69ccf0826527/dash3.png" /> We used Wix’s vast existing framework as the base for planning a mobile version that would encompass much of the same (and sometimes added) functionality. This process began by identifying the main root-screens of our app (Home, Inbox &amp; Account) and then mapping out each area individually along with all the inner-capabilities. The initial mapping was done at a high level with many interations. <img width="4488" height="2266" width_o="4488" height_o="2266" data-src="https://freight.cargo.site/t/original/i/4b6e1aa5cb8af87c0c2cebaf441fe2a7f9450e05efdebfb874dcdc5235cdb33c/Wireframes.png" data-mid="102862940" border="0" src="https://freight.cargo.site/w/1000/i/4b6e1aa5cb8af87c0c2cebaf441fe2a7f9450e05efdebfb874dcdc5235cdb33c/Wireframes.png" /> A closer look at the appAfter settling on the structure of the app, we started diving into the main screens - testing our ideas and assumptions and re-iterating where neccessary. Home Screen - similar to the desktop’s main screen, this is where users choose which business (or “Place”) they wish to enter. This screen works by displaying dynamic content bases on updates &amp; notifications and shows different capabilities whether you are the Owner or Member of the specific entity. <img width="2000" height="1454" width_o="2000" height_o="1454" data-src="https://freight.cargo.site/t/original/i/301600367b2c042ddf8445bd015b21d9af2e49b49d068e770a36189be07643c3/fold1.png" data-mid="100656244" border="0" src="https://freight.cargo.site/w/1000/i/301600367b2c042ddf8445bd015b21d9af2e49b49d068e770a36189be07643c3/fold1.png" /> The Dashboard - Owners can monitor and manage their business through the 2 main tabs that make up the dasboard: Overview &amp; Manage.The Overview tab serves valuable information in the form of widgets that can be cusomized by the owner. The Manage tab gives full access to all the user’s content according to the installed verticals &amp; features.&nbsp; <img width="2000" height="1494" width_o="2000" height_o="1494" data-src="https://freight.cargo.site/t/original/i/400be561458337f945029f9bafa9b02247853f907a8539f8251969bcdcebe706/fold2b.png" data-mid="100863272" border="0" src="https://freight.cargo.site/w/1000/i/400be561458337f945029f9bafa9b02247853f907a8539f8251969bcdcebe706/fold2b.png" /> <img width="2000" height="1494" width_o="2000" height_o="1494" data-src="https://freight.cargo.site/t/original/i/65c5a99d35aa8ea12a53b491cab42a8a78feb6360639ac4536113477ab9f8a46/fold2a.png" data-mid="100863271" border="0" src="https://freight.cargo.site/w/1000/i/65c5a99d35aa8ea12a53b491cab42a8a78feb6360639ac4536113477ab9f8a46/fold2a.png" /> The Member View - Owners can customize their Member View and invite members to join and interact with it. The Member View is similar in concept to a website - you design the layout and invite people to view it. Similarly, everything about the Member View is editable by the owner. <img width="2000" height="1222" width_o="2000" height_o="1222" data-src="https://freight.cargo.site/t/original/i/a827865a6560b5b80a714b2014b21bb5af67bb29db845c1ca39ba8d83ea7d23a/fold3.png" data-mid="102869945" border="0" src="https://freight.cargo.site/w/1000/i/a827865a6560b5b80a714b2014b21bb5af67bb29db845c1ca39ba8d83ea7d23a/fold3.png" />Customize Screen - Similar to the Wix website editor, the Customize screen allows the Owner to add, remove and arrange “Sections” (think of apps) to their Member View. Once added, Members will be able to engage with these sections. <img width="2000" height="1338" width_o="2000" height_o="1338" data-src="https://freight.cargo.site/t/original/i/50d2706a2a7a487225c2b52315940d7d1cfd4dc9a7be73fc94feaf7456c00e1f/fold4.png" data-mid="102869938" border="0" src="https://freight.cargo.site/w/1000/i/50d2706a2a7a487225c2b52315940d7d1cfd4dc9a7be73fc94feaf7456c00e1f/fold4.png" /> Inbox - Shows all the users that communicate with the business from across various channels (chat, email, website chat widget). In addition chatting, the Owner can also send the user offers and links through the chat. Members can also communicate with each other if the business owner has enabled such functionality. <img width="2000" height="1278" width_o="2000" height_o="1278" data-src="https://freight.cargo.site/t/original/i/784b202a2ce834862d0c72c7467f452203d66429055cb688e1f89c33e7f06c3d/fold6.png" data-mid="102890414" border="0" src="https://freight.cargo.site/w/1000/i/784b202a2ce834862d0c72c7467f452203d66429055cb688e1f89c33e7f06c3d/fold6.png" /> Account - Organizes all the settings for the user that is logged in and also shows their activity across any places they are a member in. For example, if you book a class in a business - you can see it in the Account tab. <img width="2000" height="1234" width_o="2000" height_o="1234" data-src="https://freight.cargo.site/t/original/i/0bdd185cc54315059f41a0884dae82d27c4e1e527697dabb7445cc76142eebef/fold5.png" data-mid="102890417" border="0" src="https://freight.cargo.site/w/1000/i/0bdd185cc54315059f41a0884dae82d27c4e1e527697dabb7445cc76142eebef/fold5.png" /> Following these initial wireframes, we continued to iterate and expand on the various areas of the app. As we began settling on the overall structure, we moved on to more high-fidelity wireframes and initial UI concepts. <img width="2000" height="672" width_o="2000" height_o="672" data-src="https://freight.cargo.site/t/original/i/e559afc02ecd483fe347e2261575c212d50e3af67a6bf1fcb857a732a173cfc6/fold7.png" data-mid="102894538" border="0" src="https://freight.cargo.site/w/1000/i/e559afc02ecd483fe347e2261575c212d50e3af67a6bf1fcb857a732a173cfc6/fold7.png" /><img width="2000" height="1098" width_o="2000" height_o="1098" data-src="https://freight.cargo.site/t/original/i/d87f9a72cd8c2bcaeb0e4ed202f9ae3d2b9e8efed097ee96a2656cfa7bbe98b7/fold8.png" data-mid="102894537" border="0" src="https://freight.cargo.site/w/1000/i/d87f9a72cd8c2bcaeb0e4ed202f9ae3d2b9e8efed097ee96a2656cfa7bbe98b7/fold8.png" /><img width="2000" height="1062" width_o="2000" height_o="1062" data-src="https://freight.cargo.site/t/original/i/b8f2c0c0086a0bac987aa25cf440028f05ca4dade992487000760a20fa17eb93/fold9.png" data-mid="102894536" border="0" src="https://freight.cargo.site/w/1000/i/b8f2c0c0086a0bac987aa25cf440028f05ca4dade992487000760a20fa17eb93/fold9.png" /> Usability testing &amp; collecting feedbackIn order to really understand how our app performed in the real world, it was clear that we needed to hear from actual users. We held various usability sessions with a variety of different users in order to hear and see how they actually use the app.One of our best usability sessions was held at Wix’s San Francisco office, in which 30 actual users were invited to come and show us how they utilized the app for their businesses. We collected hundreds of issues, bugs, feature requests and learned a lot about what users expect from us. All this data was then sorted and prioritized, which proved to be an immensely important tool for future improvments of the app. <img width="1000" height="563" width_o="1000" height_o="563" data-src="https://freight.cargo.site/t/original/i/b268f6481bb181ee32fbad2df9bc1b01c57b1467fec7093242a5ef2285903980/usability_3.jpg" data-mid="103753885" border="0" src="https://freight.cargo.site/w/1000/i/b268f6481bb181ee32fbad2df9bc1b01c57b1467fec7093242a5ef2285903980/usability_3.jpg" /> <img width="1000" height="563" width_o="1000" height_o="563" data-src="https://freight.cargo.site/t/original/i/3bc17554c5078916fb294942d87e35f08b1147989e7ee7e043f442172f5299c6/usability_1.jpg" data-mid="103753883" border="0" src="https://freight.cargo.site/w/1000/i/3bc17554c5078916fb294942d87e35f08b1147989e7ee7e043f442172f5299c6/usability_1.jpg" /> <img width="1000" height="563" width_o="1000" height_o="563" data-src="https://freight.cargo.site/t/original/i/fd2e238372f0eb1d992283e58fdcddd64d4e4b25f456213c18e582b154e8c0b0/usability_2.jpg" data-mid="103753884" border="0" src="https://freight.cargo.site/w/1000/i/fd2e238372f0eb1d992283e58fdcddd64d4e4b25f456213c18e582b154e8c0b0/usability_2.jpg" /> <img width="1000" height="563" width_o="1000" height_o="563" data-src="https://freight.cargo.site/t/original/i/6811128e1cf77284a9bff5f8b2e87b86e9637e55c77f445bc3b78762ccfde7c3/usability_4.jpg" data-mid="103753886" border="0" src="https://freight.cargo.site/w/1000/i/6811128e1cf77284a9bff5f8b2e87b86e9637e55c77f445bc3b78762ccfde7c3/usability_4.jpg" /> We continued to improve in all areas of the app, from product to design, based on the data collected. After many additional iterations and the creation of a design system, we released a stable app with immense capabilities - achieving our goal and bringing Wix to millions of users’ mobile devices. Click here for a high-level look at the app and to see the final design. https://roy-sherizly.com/Case-Study-Building-a-Design-System-for-the-Wix-Mobile-App Wed, 05 Aug 2020 07:52:00 +0000 Roy Sherizly | Product Designer | UX/UI https://roy-sherizly.com/Case-Study-Building-a-Design-System-for-the-Wix-Mobile-App DESIGN SYSTEM · UX · UI Case Study: Building a design system for the Wix mobile app <img width="3536" height="1952" width_o="3536" height_o="1952" data-src="https://freight.cargo.site/t/original/i/3e86006ce516975bcb803a1d5843aac53d4a2135756840af233d0739b3f75ca2/Symbols_diag2x.png" data-mid="93666442" border="0" src="https://freight.cargo.site/w/1000/i/3e86006ce516975bcb803a1d5843aac53d4a2135756840af233d0739b3f75ca2/Symbols_diag2x.png" /> Designing for large-scale and complex projects has inevitably led to Design Systems becoming common practice in today’s leading companies - many of them adopting different variations of the concept in order to maintain design integrity and scalability across their ever-evolving products and platforms. In this case study we’ll examine how we conceptualized and created the robust design system that is used today by the Wix mobile app team. Initially, our team had no design system in place and we relied on meetings, team-syncs and group decisions in order to maintain a cohesive UI an consistent UX patterns. While this is managable in a small team and a relatively simple product, we quickly realized that this wouldn’t be sustainable as more parts of the Wix ecosystem were being integrated into our app. <img width="2320" height="1598" width_o="2320" height_o="1598" data-src="https://freight.cargo.site/t/original/i/5179763675677109089ad537fe0031778314eb6a4d1eb1849cdfa22c25e2b056/DS-Comparison.png" data-mid="84981154" border="0" src="https://freight.cargo.site/w/1000/i/5179763675677109089ad537fe0031778314eb6a4d1eb1849cdfa22c25e2b056/DS-Comparison.png" />Although we were&nbsp; fully commited to developing using React Native, a framework designed to make such projects quicker and simpler to develop without the need for code duplication, our team was still maintaining two separate versions of the app for both iOS and Android. Every screen and flow had to be designed and QA’d for each platform which greatly hindered velocity for all teams involved. For us designers, this meant that we had to learn and monitor all of the subtle differences in design, UX and behaviors specific for each platform. For example, we designed with San Francisco as the system font for iOS and Roboto for Android. In addition, the constant evolution of iOS’s Human Interface and Android’s Material Design demanded ongoing monitoring to make sure we were up to date with each of their design standards. <img width="624" height="402" width_o="624" height_o="402" data-src="https://freight.cargo.site/t/original/i/d8e113c6ffd7488cb809b48c0729797e138da45243be197f4c4ebfb2fb9d788a/buttons.png" data-mid="84982009" border="0" data-scale="100" src="https://freight.cargo.site/w/624/i/d8e113c6ffd7488cb809b48c0729797e138da45243be197f4c4ebfb2fb9d788a/buttons.png" /> Besides the core team of 3 UX designers (at the time), we also needed to be capable of supporting ~12 other Wix verticals that were being integrated into the app in parallel - each with their own teams of designers, devoplers and PMs. &nbsp; It became obvious that designing on this scale required drastic changes to be made, and luckily one of our our lead mobile developers took this monumental task head-on, with others quickly jumping on board and realizing its potential. Research and planningResearching how industry leading brands such as Airbnb and Spotify approached this dillemma strengthened our determination to turn our vision into a reality. We began by mapping out all of our components, from simplest to most complex, and decided on optimal guidelines for design and implementation. <img width="1800" height="1242" width_o="1800" height_o="1242" data-src="https://freight.cargo.site/t/original/i/b96c7dc92ff6e6207cf5a0a1f1aecb4503570c5bcc8d731eb234e98888a35dca/element_types1.png" data-mid="215284174" border="0" src="https://freight.cargo.site/w/1000/i/b96c7dc92ff6e6207cf5a0a1f1aecb4503570c5bcc8d731eb234e98888a35dca/element_types1.png" /> From the start, I strongly believed that the key to our design system’s success was the unification of UX/UI across both platforms, allowing for a system that could be easily maintained on the design side but also the development side. To me, split designs seemed old fashioned and cumbersome, especially for apps that wish to have a more branded&nbsp; experience. Such a change obviously required a fair amount of convincing due to the fact that most people are very loyal to their platform of choice - believing one is superior to the other in terms of UX/UI. Although most components would become unified, some were deliberately left “native” in order to keep the familiarity associated with each platform. Here is an example of our custom top navigation that conforms to native guidelines but uses the Wix MadeFor font and custom icons. <img width="1862" height="674" width_o="1862" height_o="674" data-src="https://freight.cargo.site/t/original/i/c32e83862fe3655a4d7df1678a2f40cd4f6f9292789fa79394da9856f1f3cd37/Topnav.png" data-mid="84992599" border="0" src="https://freight.cargo.site/w/1000/i/c32e83862fe3655a4d7df1678a2f40cd4f6f9292789fa79394da9856f1f3cd37/Topnav.png" />Some components evolved into “hybrid” versions that mixed custom elements with platform-specific ones. For example, we made our bottom tab navigation adhere to iOS and Android dimensions and spacing, but we adapted the icon styles to fit our brand and removed the textual labels. &nbsp; <img width="1862" height="674" width_o="1862" height_o="674" data-src="https://freight.cargo.site/t/original/i/d04cf5d4a767ebf243d369b2b5285ee9a2c70d00711c260cc2ff6652344c53fb/Bottombars.png" data-mid="84983851" border="0" src="https://freight.cargo.site/w/1000/i/d04cf5d4a767ebf243d369b2b5285ee9a2c70d00711c260cc2ff6652344c53fb/Bottombars.png" /> In addition to those considerations, I believed that the Wix brand should be the prominent driving force behind our designs. Having our designs aligned to Wix’s brand would mean that our users would be benefiting from a holistic experience across Wix’s desktop &amp; mobile products. A Generic System Architecture Because the app was constantly evolving, our secondary criteria for the design system was to create a flexible architecture that could adapt to future changes easily and seamlessly. Together with the lead developer we defined a generic structure upon which we would build the sytem - essentially breaking down all elements into their most atomic form. Most importantly, the most common elements like typography styles, colors, inputs and buttons would be detached from any specific context. For example, we defined our typography styles with generic names instead of specific ones (i.e. “title” instead of “card-title”). <img width="1834" height="1432" width_o="1834" height_o="1432" data-src="https://freight.cargo.site/t/original/i/7d38cc4a57163c7b48b248e9853effcdf6e31335a3e7749d14a566bd9a7ff890/typog.png" data-mid="84996454" border="0" src="https://freight.cargo.site/w/1000/i/7d38cc4a57163c7b48b248e9853effcdf6e31335a3e7749d14a566bd9a7ff890/typog.png" /> This decision proved to be key in the success of our design system. Utilizing this centralized method of control makes communication between devs and designers much simpler and most importantly enables us to make cross-app changes very easily. Similarly, our color palette was broken down to system colors spread across several tints. This proved to be flexible enough for use but also scalable if needed for future expandability. If we ever want to change the main color of the app, we could do it in one place and instantly change it across all components. Besides the system colors, we automatically generate these tints for any color chosen by our user - allowing for true customization while still staying within the design system’s logic. <img width="1646" height="1460" width_o="1646" height_o="1460" data-src="https://freight.cargo.site/t/original/i/1692117f91f68e22015ea1c8f381e87074fc12db335e2a2cb47e8b97f35ffa53/Colors2x.png" data-mid="93661893" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/1692117f91f68e22015ea1c8f381e87074fc12db335e2a2cb47e8b97f35ffa53/Colors2x.png" /> A system within a systemHaving defined a basic system for colors, typography and spacing, we then moved on to the most basic elements such as buttons, inputs and forms since these would be the building blocks that make up more complex components and flows. Creating new components suddenly became was simple because of the basic rules that we previously laid out. Every component that was added came with its own guidelines, specs and behavior based on any previous components it was made up from. <img width="2334" height="1314" width_o="2334" height_o="1314" data-src="https://freight.cargo.site/t/original/i/ba0860718808d195b72a260ba37a73b16c9e94f6cce87a0135e5a50efeb01686/Buttons2x.png" data-mid="93662102" border="0" src="https://freight.cargo.site/w/1000/i/ba0860718808d195b72a260ba37a73b16c9e94f6cce87a0135e5a50efeb01686/Buttons2x.png" /> Taking a button as an example, we used our typography styles for the text, our color system to define the colors for every state and spacing presets to make sure everything could scale to different texts. As a testiment to its success, the design system has managed to support very large-scale changes such as updating the app’s font, adding support for tablets and even things such as accessibility for the visually impaired and RTL support - instantly applying these changes and updates app-wide.We estimate that over 90% of the app is built using components from the design system, while the remainder are custom components that have not met the criteria for being added (one-of components that are not reused by any other teams). The system has proven its power to increase velocity and consistency for all teams.&nbsp; <img width="3384" height="1728" width_o="3384" height_o="1728" data-src="https://freight.cargo.site/t/original/i/4a74f126b7709df102e697b1280deb186a300264510eef5d3b829c36aaec59c2/Symbols-Copy2x.png" data-mid="99160392" border="0" src="https://freight.cargo.site/w/1000/i/4a74f126b7709df102e697b1280deb186a300264510eef5d3b829c36aaec59c2/Symbols-Copy2x.png" /> Today, the mobile design system is maintained by a dedicated team of over 10 designers and developers that support the various internal teams working in the Wix App environment. Head over here to see more about the Wix App itself. <img width="1600" height="792" width_o="1600" height_o="792" data-src="https://freight.cargo.site/t/original/i/d5e2b1fe446d887de37e11c7c4bc8275b18e49e4f852439076a2e74aa7b8ed0a/real_phone_1600.gif" data-mid="93667245" border="0" src="https://freight.cargo.site/w/1000/i/d5e2b1fe446d887de37e11c7c4bc8275b18e49e4f852439076a2e74aa7b8ed0a/real_phone_1600.gif" /> https://roy-sherizly.com/Wix-Mobile-App-Overview Thu, 28 Nov 2019 08:36:56 +0000 Roy Sherizly | Product Designer | UX/UI https://roy-sherizly.com/Wix-Mobile-App-Overview PRODUCT DESIGN&nbsp; · UX · UI &nbsp; The Wix App enables users to manage their website from their phone or tablet. Users can write blog posts, update store inventory, create and manage events and even live-chat with clients viewing their site. Users can also create their own mobile communities called “Places" and invite their clients to join.&nbsp; As a Product Designer on the team, I was an integral part of planning the structure of the app, defining its design principles, developing the design language and also creating the main flows. Along the way we also created a mobile design system to help with consistency and design velocity. CREATE YOUR ONLINE PRESENCE. <img width="1600" height="2184" width_o="1600" height_o="2184" data-src="https://freight.cargo.site/t/original/i/3667766deb43e6857d08d88a126efacb26a09c5fff3220443adf275602822a64/1a.png" data-mid="59477584" border="0" src="https://freight.cargo.site/w/1000/i/3667766deb43e6857d08d88a126efacb26a09c5fff3220443adf275602822a64/1a.png" /><img width="1600" height="1002" width_o="1600" height_o="1002" data-src="https://freight.cargo.site/t/original/i/b59f0fc54267de092432e4182340ebff416fd04dfdc047ca5b69b41a005d9a1d/wix_stunning_meter_1600.gif" data-mid="59477640" border="0" src="https://freight.cargo.site/w/1000/i/b59f0fc54267de092432e4182340ebff416fd04dfdc047ca5b69b41a005d9a1d/wix_stunning_meter_1600.gif" /><img width="1600" height="4748" width_o="1600" height_o="4748" data-src="https://freight.cargo.site/t/original/i/77f726dbb5d14d705e98a53eeee56a3bdd6093695867454f78af7c7fefd03b62/2a.png" data-mid="59477585" border="0" src="https://freight.cargo.site/w/1000/i/77f726dbb5d14d705e98a53eeee56a3bdd6093695867454f78af7c7fefd03b62/2a.png" /><img width="1600" height="1002" width_o="1600" height_o="1002" data-src="https://freight.cargo.site/t/original/i/08cacd425f3621ef3a0ca283d4cafd86f8029b36df9ae653ffceaeaa8ff00b27/real_phone_new.gif" data-mid="59477525" border="0" src="https://freight.cargo.site/w/1000/i/08cacd425f3621ef3a0ca283d4cafd86f8029b36df9ae653ffceaeaa8ff00b27/real_phone_new.gif" /><img width="1600" height="768" width_o="1600" height_o="768" data-src="https://freight.cargo.site/t/original/i/e54227fa1a2bf5209cc103ff9493cd86d7ee4b1511472aabafc03e50a0f0184b/3a.png" data-mid="59477586" border="0" src="https://freight.cargo.site/w/1000/i/e54227fa1a2bf5209cc103ff9493cd86d7ee4b1511472aabafc03e50a0f0184b/3a.png" /> https://roy-sherizly.com/Journey Mon, 10 Feb 2020 15:50:26 +0000 Roy Sherizly | Product Designer | UX/UI https://roy-sherizly.com/Journey CONCEPT&nbsp;· WIREFRAMING · UX · UI A JOURNEY AWAITS YOU.Journey is a collaborative travel app that makes it quick and easy to make sense of your travel plans. Whether you are the type of traveller that plans every step, or someone that prefers to get recommendations from friends - Journey keeps everything organized and easy to follow. Starting a new Journey is easy - just add all the cool places you found, or get personalized recommendations based on things you have saved from previous Journies. If you’re travelling with friends or family, it’s easy to collaborate together and make the trip exciting for everyone. If you need some inspiration for your next adventure, you can search for popular Journies from other users and discover places you never thought of visitng. <img width="1600" height="4517" width_o="1600" height_o="4517" data-src="https://freight.cargo.site/t/original/i/c0a9e4194b96d820f8827b06a899f16baf29a9d48ed640431cfe7ead86bd797b/Slice1.png" data-mid="61103335" border="0" src="https://freight.cargo.site/w/1000/i/c0a9e4194b96d820f8827b06a899f16baf29a9d48ed640431cfe7ead86bd797b/Slice1.png" /><img width="1600" height="4261" width_o="1600" height_o="4261" data-src="https://freight.cargo.site/t/original/i/759bcb367640ce92a0d1a84e0b3a72aa973f4ce8cf8e13f49466b90178f2cde5/Slice2.png" data-mid="61103336" border="0" src="https://freight.cargo.site/w/1000/i/759bcb367640ce92a0d1a84e0b3a72aa973f4ce8cf8e13f49466b90178f2cde5/Slice2.png" /><img width="1600" height="3757" width_o="1600" height_o="3757" data-src="https://freight.cargo.site/t/original/i/7039e37e2a20bbeb77ede1d2fe52f797025e9632cc3e2c5f02dec86b4cd45ed5/Slice3.png" data-mid="61103337" border="0" src="https://freight.cargo.site/w/1000/i/7039e37e2a20bbeb77ede1d2fe52f797025e9632cc3e2c5f02dec86b4cd45ed5/Slice3.png" /> https://roy-sherizly.com/Orders-by-Wix Tue, 14 Jan 2020 10:51:27 +0000 Roy Sherizly | Product Designer | UX/UI https://roy-sherizly.com/Orders-by-Wix PRODUCT DESIGN · UX&nbsp; · UI Wix Orders is a web app developed by Wix's Restaurants team which can be installed on any Wix site. The system enables users to add online ordering capabilities to their business so that customers can order online. The app is fully customizable to fit the design of your site - including fonts, colors and styles. ORDER UP. As part of the project, a fully responsive experience was planned and developed along with many needed updates to the UI and responsive logic. After releasing the update, many of Wix’s amazing templates were refreshed to include the Orders flow as part of their offering. <img width="1600" height="900" width_o="1600" height_o="900" data-src="https://freight.cargo.site/t/original/i/a130b85ec023c74f0b5a91cb44c7fafbd81f9b886fa2f854cebb35437065e445/Slice01.png" data-mid="59261190" border="0" src="https://freight.cargo.site/w/1000/i/a130b85ec023c74f0b5a91cb44c7fafbd81f9b886fa2f854cebb35437065e445/Slice01.png" /><img width="1600" height="920" width_o="1600" height_o="920" data-src="https://freight.cargo.site/t/original/i/fb0c845076edf94159dedf5d05efc3311423dcf2e1bb36716e6fc015950bd2b6/Slice02.png" data-mid="59261191" border="0" src="https://freight.cargo.site/w/1000/i/fb0c845076edf94159dedf5d05efc3311423dcf2e1bb36716e6fc015950bd2b6/Slice02.png" /><img width="1600" height="2166" width_o="1600" height_o="2166" data-src="https://freight.cargo.site/t/original/i/bbb36e52d6c911a8ba3ddc7e73bf6cd791a5963534f13f530978d8a8f0d6b40f/Slice03_new.png" data-mid="60478084" border="0" src="https://freight.cargo.site/w/1000/i/bbb36e52d6c911a8ba3ddc7e73bf6cd791a5963534f13f530978d8a8f0d6b40f/Slice03_new.png" /><img width="1600" height="500" width_o="1600" height_o="500" data-src="https://freight.cargo.site/t/original/i/96dca4732b68d79f4bd1f6e9dbc8480d9584ac7ee1e9de6fdd62362c3fdf97eb/menu_items_1600.gif" data-mid="60478127" border="0" src="https://freight.cargo.site/w/1000/i/96dca4732b68d79f4bd1f6e9dbc8480d9584ac7ee1e9de6fdd62362c3fdf97eb/menu_items_1600.gif" /><img width="1600" height="1460" width_o="1600" height_o="1460" data-src="https://freight.cargo.site/t/original/i/c25e9856a67425ad730c513ae577ebd25ded9e077ba965f739a78700476fe096/Slice05.png" data-mid="59261193" border="0" src="https://freight.cargo.site/w/1000/i/c25e9856a67425ad730c513ae577ebd25ded9e077ba965f739a78700476fe096/Slice05.png" /><img width="1600" height="1080" width_o="1600" height_o="1080" data-src="https://freight.cargo.site/t/original/i/695fd79ad004d8cef4f5b51a998e2772859d60a85c3ea55f840bd151265419eb/Slice06.png" data-mid="59261194" border="0" src="https://freight.cargo.site/w/1000/i/695fd79ad004d8cef4f5b51a998e2772859d60a85c3ea55f840bd151265419eb/Slice06.png" /><img width="1600" height="818" width_o="1600" height_o="818" data-src="https://freight.cargo.site/t/original/i/eeb28e05e7a79a1453060ebfa6589ee66685a5e158e6d53a6aa4b6bcd7128b95/Slice07.png" data-mid="59261195" border="0" src="https://freight.cargo.site/w/1000/i/eeb28e05e7a79a1453060ebfa6589ee66685a5e158e6d53a6aa4b6bcd7128b95/Slice07.png" /><img width="1600" height="582" width_o="1600" height_o="582" data-src="https://freight.cargo.site/t/original/i/4315efd8dbfa6cc9e5ef47c24ce21f87f5f01086246824993116182ac0f5ca07/Slice08.png" data-mid="59261196" border="0" src="https://freight.cargo.site/w/1000/i/4315efd8dbfa6cc9e5ef47c24ce21f87f5f01086246824993116182ac0f5ca07/Slice08.png" /> https://roy-sherizly.com/Upsync-Dashboard-Concept Wed, 24 Feb 2021 09:45:44 +0000 Roy Sherizly | Product Designer | UX/UI https://roy-sherizly.com/Upsync-Dashboard-Concept CONCEPT · HI FIDELITY WIREFRAME · UX · UI Data Lake information analysis The Upsync dashboard is used to view, manage and automate data-lake information streams for easier analysis, allowing the customer to learn from the huge amounts of data they are collecting. Users add data sources, set-up sync jobs and define destinations for exporting &amp; analyzing data. <img width="2892" height="1696" width_o="2892" height_o="1696" data-src="https://freight.cargo.site/t/original/i/490bade878f9d1cc9c415905966b4ad134bd5569098c3a86b71ecc196a498299/web_flow_002x.png" data-mid="99969074" border="0" src="https://freight.cargo.site/w/1000/i/490bade878f9d1cc9c415905966b4ad134bd5569098c3a86b71ecc196a498299/web_flow_002x.png" /> <img width="2892" height="1696" width_o="2892" height_o="1696" data-src="https://freight.cargo.site/t/original/i/f9f9a229f870e94d158f0660a5e0cd662ba5f3dadea5d2b91e599d3affd4ae9f/web_flow_012x.png" data-mid="99959498" border="0" src="https://freight.cargo.site/w/1000/i/f9f9a229f870e94d158f0660a5e0cd662ba5f3dadea5d2b91e599d3affd4ae9f/web_flow_012x.png" /><img width="2892" height="1696" width_o="2892" height_o="1696" data-src="https://freight.cargo.site/t/original/i/eb464bd84d8763da7f58439d7585793bf53d2ed492a9bac4228b7eb31390316f/web_flow_022x.png" data-mid="99959499" border="0" src="https://freight.cargo.site/w/1000/i/eb464bd84d8763da7f58439d7585793bf53d2ed492a9bac4228b7eb31390316f/web_flow_022x.png" /><img width="2892" height="1696" width_o="2892" height_o="1696" data-src="https://freight.cargo.site/t/original/i/ec90913c50b624284fe19a8455163b038effd8aa041aacd6adbac51d5150a610/web_flow_042x.png" data-mid="99959501" border="0" src="https://freight.cargo.site/w/1000/i/ec90913c50b624284fe19a8455163b038effd8aa041aacd6adbac51d5150a610/web_flow_042x.png" /><img width="2892" height="1696" width_o="2892" height_o="1696" data-src="https://freight.cargo.site/t/original/i/98e790666253cdff6ef3a0e73f3d08f180133232ddf5c2f5f695f5c8178d6a99/web_flow_032x.png" data-mid="99959500" border="0" src="https://freight.cargo.site/w/1000/i/98e790666253cdff6ef3a0e73f3d08f180133232ddf5c2f5f695f5c8178d6a99/web_flow_032x.png" /><img width="2892" height="1696" width_o="2892" height_o="1696" data-src="https://freight.cargo.site/t/original/i/d0da4f57482162b276db4c18b8b5c86567b46bc5afbaf0950971cf5ea902c433/web_flow_062x.png" data-mid="99959504" border="0" src="https://freight.cargo.site/w/1000/i/d0da4f57482162b276db4c18b8b5c86567b46bc5afbaf0950971cf5ea902c433/web_flow_062x.png" /> Example flow showing how a new sync job is defined and created. Users select sources, choose sync properties and define a destination for the data. <img width="2892" height="1696" width_o="2892" height_o="1696" data-src="https://freight.cargo.site/t/original/i/0c30f67a40e279d6a54f96eb8b5bbca6b9d51983fbc62b74ac4a5fb9ad7bcf7e/web_flow_072x.png" data-mid="99959506" border="0" src="https://freight.cargo.site/w/1000/i/0c30f67a40e279d6a54f96eb8b5bbca6b9d51983fbc62b74ac4a5fb9ad7bcf7e/web_flow_072x.png" /> <img width="2892" height="1696" width_o="2892" height_o="1696" data-src="https://freight.cargo.site/t/original/i/b8560f1f6057d9a1f02aced2ca304eeff0eaa6c0f35850e8f9fa6fad2b1ddddd/web_flow_082x.png" data-mid="99959507" border="0" src="https://freight.cargo.site/w/1000/i/b8560f1f6057d9a1f02aced2ca304eeff0eaa6c0f35850e8f9fa6fad2b1ddddd/web_flow_082x.png" /> <img width="2892" height="1696" width_o="2892" height_o="1696" data-src="https://freight.cargo.site/t/original/i/8b56154ee097b2b527ef73288331d0db21803a91cb144d52ceda43f12bf4bf68/web_flow_092x.png" data-mid="99959508" border="0" src="https://freight.cargo.site/w/1000/i/8b56154ee097b2b527ef73288331d0db21803a91cb144d52ceda43f12bf4bf68/web_flow_092x.png" /> <img width="2892" height="1696" width_o="2892" height_o="1696" data-src="https://freight.cargo.site/t/original/i/48e7798a49a8603e457183fb55ea79d43d9544745ba551da830dbbb3b3fb1c53/web_flow_102x.png" data-mid="99959509" border="0" src="https://freight.cargo.site/w/1000/i/48e7798a49a8603e457183fb55ea79d43d9544745ba551da830dbbb3b3fb1c53/web_flow_102x.png" /> <img width="2892" height="1696" width_o="2892" height_o="1696" data-src="https://freight.cargo.site/t/original/i/cf340f10e09863a36180507866dd5a7bc86956510dfcc9bba37fb865ad82c7e5/web_flow_112x.png" data-mid="99959510" border="0" src="https://freight.cargo.site/w/1000/i/cf340f10e09863a36180507866dd5a7bc86956510dfcc9bba37fb865ad82c7e5/web_flow_112x.png" /> <img width="2892" height="1696" width_o="2892" height_o="1696" data-src="https://freight.cargo.site/t/original/i/ed347664c02f145b6ca395ab6b000921af4d618c680f1a813992b8cb690deba1/web_flow_122x.png" data-mid="99959511" border="0" src="https://freight.cargo.site/w/1000/i/ed347664c02f145b6ca395ab6b000921af4d618c680f1a813992b8cb690deba1/web_flow_122x.png" /> <img width="2892" height="1696" width_o="2892" height_o="1696" data-src="https://freight.cargo.site/t/original/i/4a5a9040ea4d1bafc300cab8f7810edf36004e9d5274a73919b881bda23b2026/web_flow_132x.png" data-mid="99959523" border="0" src="https://freight.cargo.site/w/1000/i/4a5a9040ea4d1bafc300cab8f7810edf36004e9d5274a73919b881bda23b2026/web_flow_132x.png" /> <img width="2892" height="1696" width_o="2892" height_o="1696" data-src="https://freight.cargo.site/t/original/i/1d5769ba3d9d0564b5bd7b2eac15962108d6a1ebf31c8bf53e621dd5f70ba5bc/web_flow_142x.png" data-mid="99959525" border="0" src="https://freight.cargo.site/w/1000/i/1d5769ba3d9d0564b5bd7b2eac15962108d6a1ebf31c8bf53e621dd5f70ba5bc/web_flow_142x.png" /> * This is a conceptual project meant to explore initial UX ideas and layouts along with preliminary UI look &amp; feel.&nbsp; https://roy-sherizly.com/Teva-Pharmaceuticals-Website Thu, 25 Jun 2015 18:18:09 +0000 Roy Sherizly | Product Designer | UX/UI https://roy-sherizly.com/Teva-Pharmaceuticals-Website WIREFRAMING · UX · UI&nbsp; Complete re-design for Teva Pharm's vast corporate website from the ground up. As part of the design team at Awesome Design Agency, my approach for such a large website was to create dynamic components that could be re-used across many pages, resulting in a consistent yet robust feel but also simplifying development. Each component was also made to be responsive and adapt to various layouts including desktop, tablet and mobile views. <img width="1627" height="902" width_o="1627" height_o="902" data-src="https://freight.cargo.site/t/original/i/a80836f2d60ee8f51ac8078a7356cc65da9a948fcd1e01d38cdbb6873e32d999/teva_case1.jpg" data-mid="59261211" border="0" src="https://freight.cargo.site/w/1000/i/a80836f2d60ee8f51ac8078a7356cc65da9a948fcd1e01d38cdbb6873e32d999/teva_case1.jpg" /> A few examples of the various dymanic components created for Teva’s website. We developed coponents to cover all types of media including text, images &amp; video, blog posts, asset downloads, news icons and more. <img width="340" height="246" width_o="340" height_o="246" data-src="https://freight.cargo.site/t/original/i/83ea8191528985c811a3bada9db2fd7f5a0472f956ced684a1b6818f79187559/teva_2.jpg" data-mid="59368131" border="0" src="https://freight.cargo.site/w/340/i/83ea8191528985c811a3bada9db2fd7f5a0472f956ced684a1b6818f79187559/teva_2.jpg" /> <img width="600" height="241" width_o="600" height_o="241" data-src="https://freight.cargo.site/t/original/i/6987c501f3fa8a95bc0b25bc4992b0b174f6c69ac57c34198f25ca81a2bdb97e/teva_4.jpg" data-mid="59368133" border="0" src="https://freight.cargo.site/w/600/i/6987c501f3fa8a95bc0b25bc4992b0b174f6c69ac57c34198f25ca81a2bdb97e/teva_4.jpg" /> <img width="616" height="149" width_o="616" height_o="149" data-src="https://freight.cargo.site/t/original/i/6bd4c1b60710b7f96666d49ad0567ff8c97bb7c3ed2d0d87aed107fd939eede6/teva_7.jpg" data-mid="59368136" border="0" src="https://freight.cargo.site/w/616/i/6bd4c1b60710b7f96666d49ad0567ff8c97bb7c3ed2d0d87aed107fd939eede6/teva_7.jpg" /> <img width="242" height="238" width_o="242" height_o="238" data-src="https://freight.cargo.site/t/original/i/2ffc041cc5641813f96420f9d1ed6d7e045601216f220697395c0d99f2822795/teva_5.jpg" data-mid="59368134" border="0" src="https://freight.cargo.site/w/242/i/2ffc041cc5641813f96420f9d1ed6d7e045601216f220697395c0d99f2822795/teva_5.jpg" /> <img width="266" height="231" width_o="266" height_o="231" data-src="https://freight.cargo.site/t/original/i/81a0aaf360bb275717a29fb7a5817ac87acb4df9f2cc93837bfff472c2cf0507/teva_3.jpg" data-mid="59368132" border="0" src="https://freight.cargo.site/w/266/i/81a0aaf360bb275717a29fb7a5817ac87acb4df9f2cc93837bfff472c2cf0507/teva_3.jpg" /> <img width="338" height="235" width_o="338" height_o="235" data-src="https://freight.cargo.site/t/original/i/5520a0a614fbdb4481123ea86ccf2036a39034414b961001ec91d72ab3298772/teva_6.jpg" data-mid="59368135" border="0" src="https://freight.cargo.site/w/338/i/5520a0a614fbdb4481123ea86ccf2036a39034414b961001ec91d72ab3298772/teva_6.jpg" /> The visual language developed for Teva Pharm's coporate website is also used throughout the company, including internal systems and internal videos.