https://jeyness.com Jeyness Sun, 09 Feb 2025 23:13:18 +0000 https://jeyness.com en https://jeyness.com/Work Tue, 12 Nov 2019 13:22:08 +0000 Jeyness https://jeyness.com/Work <img width="1204" height="1010" width_o="1204" height_o="1010" data-src="https://freight.cargo.site/t/original/i/252161286241d600285345f5cf64573beb3051b6d1fbc8c2fd807ce3336f8243/Hello-BG2.png" data-mid="150269044" border="0" src="https://freight.cargo.site/w/1000/i/252161286241d600285345f5cf64573beb3051b6d1fbc8c2fd807ce3336f8243/Hello-BG2.png" /> <img width="2160" height="2161" width_o="2160" height_o="2161" data-src="https://freight.cargo.site/t/original/i/913a4cc48dd444a1784c39068d0c662cdc38d7d5e96edb76107499fd45eab4bb/Reporting2x.png" data-mid="226274941" border="0" src="https://freight.cargo.site/w/1000/i/913a4cc48dd444a1784c39068d0c662cdc38d7d5e96edb76107499fd45eab4bb/Reporting2x.png" /> Test reporting 2.0&nbsp;Statistical data in a human language <img width="2160" height="2161" width_o="2160" height_o="2161" data-src="https://freight.cargo.site/t/original/i/923f68dde3fdb088504e5f8c8a3d88995d781dc45301f307f79a5f8a69824f46/URL-Cover2x.png" data-mid="226274942" border="0" src="https://freight.cargo.site/w/1000/i/923f68dde3fdb088504e5f8c8a3d88995d781dc45301f307f79a5f8a69824f46/URL-Cover2x.png" /> URL split testing Beta Program Building a beta program around a feature release <img width="2160" height="2160" width_o="2160" height_o="2160" data-src="https://freight.cargo.site/t/original/i/1852809cfa43f7bc2ab2ce90e12da83efda57bfda537f5343a395c243a273ef6/Preview32x.png" data-mid="223421696" border="0" src="https://freight.cargo.site/w/1000/i/1852809cfa43f7bc2ab2ce90e12da83efda57bfda537f5343a395c243a273ef6/Preview32x.png" />Test Creation FlowRethinking the core flow of the platform <img width="2160" height="2160" width_o="2160" height_o="2160" data-src="https://freight.cargo.site/t/original/i/27f7031bbb74ea886062884c63e6c9ad18ca3f24e16e09587a821b871bcf71c1/Preview-timely.png" data-mid="223421695" border="0" src="https://freight.cargo.site/w/1000/i/27f7031bbb74ea886062884c63e6c9ad18ca3f24e16e09587a821b871bcf71c1/Preview-timely.png" />Pricing model updateIntroducing new pricing &amp; paywall for features <img width="1080" height="1080" width_o="1080" height_o="1080" data-src="https://freight.cargo.site/t/original/i/f97922eb35a65a84985384be39861749a814671aaed5ccaf8a176aef58c86a1d/Preview1.png" data-mid="150118346" border="0" src="https://freight.cargo.site/w/1000/i/f97922eb35a65a84985384be39861749a814671aaed5ccaf8a176aef58c86a1d/Preview1.png" /> Containers PlaygroundNew Product Feature Playground <img width="1080" height="1080" width_o="1080" height_o="1080" data-src="https://freight.cargo.site/t/original/i/9bd92252ee93ccfbe48f642c494aac093a772d0c10f7a95b9804f66b64eb1543/Preview4.png" data-mid="150118349" border="0" src="https://freight.cargo.site/w/1000/i/9bd92252ee93ccfbe48f642c494aac093a772d0c10f7a95b9804f66b64eb1543/Preview4.png" />Elementor Website Design SystemWeb Design System <img width="1080" height="1080" width_o="1080" height_o="1080" data-src="https://freight.cargo.site/t/original/i/f5a33560b382fda21bcbb1bf13099139507c028e73f4533f0e88e8060afd82ef/Preview3.png" data-mid="150118347" border="0" src="https://freight.cargo.site/w/1000/i/f5a33560b382fda21bcbb1bf13099139507c028e73f4533f0e88e8060afd82ef/Preview3.png" />Elementor Experts PlatformMarketplace Platform for Web Creators <img width="1080" height="1080" width_o="1080" height_o="1080" data-src="https://freight.cargo.site/t/original/i/1f168ca35e40a9e654b73f3c2b14267394560a41b4c04531ced1a32632585f17/Preview.png" data-mid="150118344" border="0" src="https://freight.cargo.site/w/1000/i/1f168ca35e40a9e654b73f3c2b14267394560a41b4c04531ced1a32632585f17/Preview.png" /> Elementor Website RedesignProduct Website © Jey Tsymbaluk 2025 All rights reserved ︎&nbsp; ︎ ︎ https://jeyness.com/Pricing-model-update Mon, 15 Jul 2024 15:46:56 +0000 Jeyness https://jeyness.com/Pricing-model-update Pricing model update <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/1e1d2d8e3f2415bde31bbab4cb6d88ab6079251428c7ed8c3fbd9b7a01b6836c/Cover-pricing2.png" data-mid="214698522" border="0" src="https://freight.cargo.site/w/1000/i/1e1d2d8e3f2415bde31bbab4cb6d88ab6079251428c7ed8c3fbd9b7a01b6836c/Cover-pricing2.png" /> Background The business needed to change the product pricing modal, moving from usage based plans that contained all the features to a flexible modal combining more usage options, feature options and introducing annual plans. Release data: March/June 2023 Users Potential users, new users and legacy-plan users. My Role Planning the design process and writing the PRD - steps, requirements and timelines with the CPO, PM, CEO and Marketing.Design research - metodology of paywall implementation, pricing behavioral and psycological impact.Hands-on design - app, website and app store.Delivering design to the development team - multi-stage hand-off and feature mapQAPost-launch analysis <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/2a038ec99c2adea35f6c4a07b592e87e6f05e704fbbd63d2460e7fdb2585defe/before-after-pricing.png" data-mid="214690637" border="0" src="https://freight.cargo.site/w/1000/i/2a038ec99c2adea35f6c4a07b592e87e6f05e704fbbd63d2460e7fdb2585defe/before-after-pricing.png" /> Before &amp; after - home page ⚡️ ChallangesScope: The change touched almost every screen in the appRisk: Pricing changes create an emotional effect and negative user sentimenRisk: Friction in UX and Communication in key moments (like hitting overage or upgrading) can lead to churn.🍳 ProcessPricing is a sensitive change. My main goals were to avoid turmoil among our current users and get buy-in from our key stakeholders, mainly the CEO. The process had to be transparent and collaborative. I created the project timeline in Figma and in Asana to reflect the tasks and stakeholders buy-in points and created a communicative environment to get eveyone on board for each step of the way.&nbsp; <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/935468bd7da716e5764a14c89df1d5c35d2540c7bd63886384afd1ea92ea2358/Proccess2x.png" data-mid="214695959" border="0" src="https://freight.cargo.site/w/1000/i/935468bd7da716e5764a14c89df1d5c35d2540c7bd63886384afd1ea92ea2358/Proccess2x.png" /> Key findings 🔭 ScopeThis project had a widespread impact across every screen within the platform and required a unified release. I lead the coordinating efforts across developers, customer success, marketing, and product.Effected areas:Signup flowDowngrade and upgrade flows (plan type, usage, annual/monthly)Overage statesUpdate usage count in the global nav (trial and paid plans)Paywall features:Test draft (Visitor and audience segmentation, Lift Assist™Test reporting (Visitors and audiences, subscription reporting)Lift Assist™ and brand stylesHelp Center (Conversion consults, managed accounts)Billing:New billing pageUsage counter (Side navigation)Support for legacy plans The screenshot below it the interactive figma map I created for the dev team, since the project was so large and detail oriented. It included links to all the design sections/frames and the Jira tickets. We had it color coded as well. <img width="3840" height="5138" width_o="3840" height_o="5138" data-src="https://freight.cargo.site/t/original/i/253dbacbb919378731fb6a7ad42e8200828dc888eef24f2b9c9fff7721a703ac/Scope2x.png" data-mid="214696090" border="0" src="https://freight.cargo.site/w/1000/i/253dbacbb919378731fb6a7ad42e8200828dc888eef24f2b9c9fff7721a703ac/Scope2x.png" /> Figma map for developer use 🎨 DesignsIntroducing some color to our mainly b/w app, making the upgrade stand out and feel exclusive. <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/2b77ab074252de0f1060961682cd1c8d7b8c22db705bf703f58329e040256fcb/Design-12x.png" data-mid="214696131" border="0" src="https://freight.cargo.site/w/1000/i/2b77ab074252de0f1060961682cd1c8d7b8c22db705bf703f58329e040256fcb/Design-12x.png" /> Design guide 🧱 Paywall / Feature gatingTest draft, test reporting, brand styles, help center&nbsp; and Lift Assist™ <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/8991b89b9737833bd1984194c890141b7248651e02b58379f44d144e203d7830/gating2.png" data-mid="214696286" border="0" src="https://freight.cargo.site/w/1000/i/8991b89b9737833bd1984194c890141b7248651e02b58379f44d144e203d7830/gating2.png" /> 🍾 ModalsThank you modal and custom plan request form <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/24d2a28c5589ebf48199f2d00ab83e4a2bfb5aa945cc5e84ecd835597c89abba/Thank-you.png" data-mid="214696472" border="0" src="https://freight.cargo.site/w/1000/i/24d2a28c5589ebf48199f2d00ab83e4a2bfb5aa945cc5e84ecd835597c89abba/Thank-you.png" /> 🚫 Overage stateWhen a user hits his visitor limit <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/22c22c30196ad00b972701ddc0db2c2d0bce117cb3acb5e5def5f387d53bf72c/overage.png" data-mid="214696585" border="0" src="https://freight.cargo.site/w/1000/i/22c22c30196ad00b972701ddc0db2c2d0bce117cb3acb5e5def5f387d53bf72c/overage.png" /> 👵🏼 Grandfathered plans Supporting existing users and encouraging them to switch to our new plans. <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/e3397edab0d6e6cad8a696c34818adb4a861182f405833a40b23cf1f43e6b817/Grandfathered.png" data-mid="214696868" border="0" src="https://freight.cargo.site/w/1000/i/e3397edab0d6e6cad8a696c34818adb4a861182f405833a40b23cf1f43e6b817/Grandfathered.png" /> 🕸️ App store &amp; Website New pricing page for the marketing website and update the Shopify app store listing <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/ffe33baaaf544c9462a9b0c66e2c153ebfc9e7e73a119873eb6d61684dd75521/Website1.png" data-mid="214698373" border="0" src="https://freight.cargo.site/w/1000/i/ffe33baaaf544c9462a9b0c66e2c153ebfc9e7e73a119873eb6d61684dd75521/Website1.png" /> 🕸️ App store &amp; Website - New brand! In June 2024, I lead a rebranding process and the pricing page and app listing got a little face lift :) <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/06361316c33cbf0c7891e85d220ec00d6e2f118e33243bdfe66d1ad1e58985b7/Website2.png" data-mid="214698374" border="0" src="https://freight.cargo.site/w/1000/i/06361316c33cbf0c7891e85d220ec00d6e2f118e33243bdfe66d1ad1e58985b7/Website2.png" /> Thank You!&nbsp;✨️ https://jeyness.com/Test-Creation-Flow Wed, 10 Jul 2024 20:47:24 +0000 Jeyness https://jeyness.com/Test-Creation-Flow Test Creation Flow <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/a6a08210be4c4935cc3528866e3065e323f3f014631957f611b576f00ab2340b/Cover222x.png" data-mid="214698585" border="0" src="https://freight.cargo.site/w/1000/i/a6a08210be4c4935cc3528866e3065e323f3f014631957f611b576f00ab2340b/Cover222x.png" /> Background The main user journey in Shoplift is creating A/B tests. At that point in time, our testing capabilities were limited, but we had a rough roadmap to expand on types of tests to support our users' needs. The existing flow was a wizard flow where the user needed to make one decision at a time. Release date: September 2023 Users CMOs, E-commerce managers, Store founders My Role Planning the design process and writing the PRD - steps, requirements and timelines with the CPOUser research - Talking to CS and conducting user interviewsHands-on design and prototypingInternal usability testing sessionsDelivering design to the development teamQAPost-launch analysis <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/9c960619986ad14267037c8d71058a3050949e1c3da05d2033e4831c9de6c18d/before-after2x.png" data-mid="214469473" border="0" src="https://freight.cargo.site/w/1000/i/9c960619986ad14267037c8d71058a3050949e1c3da05d2033e4831c9de6c18d/before-after2x.png" /> Before &amp; after - home page ⚡️ ChallangesUser needs and gaps of knowledge were not addressed.There was no room for expanding the featureTechnical: The app’s code base was being redone (moving from React to Vue) and this was the last piece to updateVisual: We were implementing a new design system and needed to solidify the design.I researched the problem space Unmoderated observations (Hotjar recordings)Met with customer success - I gather initial sentiment about the flowUser interviews - in-depth conversations about user goals and needsUX and copy review - breakdown of problem areas <img width="3841" height="2160" width_o="3841" height_o="2160" data-src="https://freight.cargo.site/t/original/i/b64b781af0f7c314b31b3148231dfe91fd1e9a656120566d6f55d202c061f396/find2x.png" data-mid="214469573" border="0" src="https://freight.cargo.site/w/1000/i/b64b781af0f7c314b31b3148231dfe91fd1e9a656120566d6f55d202c061f396/find2x.png" /> Key findings ✅ Feature PrioritiesReduce cognitive overload when creating a testReduce test creation timeHelp newbies get started by incorporating the test library into the flowAllow the expansion of the flow to more testing capabilities <img width="3841" height="2160" width_o="3841" height_o="2160" data-src="https://freight.cargo.site/t/original/i/3173d7bf89ad9c35062b20283d84230391911240a9c7d14a4edc02c0dab12fc3/flow2x.png" data-mid="214469474" border="0" src="https://freight.cargo.site/w/1000/i/3173d7bf89ad9c35062b20283d84230391911240a9c7d14a4edc02c0dab12fc3/flow2x.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/126f16fb58446a8b377408279dd16d8fa23d4d22dcec2ca0404409b3860597ae/wireframes2x.png" data-mid="214469617" border="0" src="https://freight.cargo.site/w/1000/i/126f16fb58446a8b377408279dd16d8fa23d4d22dcec2ca0404409b3860597ae/wireframes2x.png" /> <img width="3841" height="2160" width_o="3841" height_o="2160" data-src="https://freight.cargo.site/t/original/i/8f1cf4b2105a16749a46cc1377f50070355831d89d4fd02b86c1fc2116780442/final123.png" data-mid="214600949" border="0" src="https://freight.cargo.site/w/1000/i/8f1cf4b2105a16749a46cc1377f50070355831d89d4fd02b86c1fc2116780442/final123.png" /> To view the Protype click here 💡 What I learnedOur original scope was way too broad. We were too eager to serve nice-to-have ideas and lost time and resources to try to build them in.Talking to customer success early in the process changed our core hypothesis about the friction points and that there’s a difference in expectations between novice and experienced users.Post launch analysis revealed promising numbers in unexpected areas - we reduced the time to launch a test for first time users. 

Later this metric was correlated to our activation research - users who launch tests and get positive results within their trial period are less likely to churn. <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/2e28a079872bcf749db643d547cb825887f0b639dac58bbceb2dfd681601ca21/more123.png" data-mid="214600952" border="0" src="https://freight.cargo.site/w/1000/i/2e28a079872bcf749db643d547cb825887f0b639dac58bbceb2dfd681601ca21/more123.png" /> Feature evolution 🥂 Since thenAs we grew our user base and test creation kept evolving with their needs:Testing every type of page in the store.Adding engagement goals and metrics Testing global elements and entire stores (Theme level testing)URL split testing (in beta)Improved variant previewsAdvanced audience segmentationVarious UX improvements. Link to product demo Thank You!&nbsp;✨️ https://jeyness.com/Test-Reporting Sun, 09 Feb 2025 23:13:18 +0000 Jeyness https://jeyness.com/Test-Reporting Test Reporting 2.0 <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/63b3cf8b936c8b2654a2c96155f7b8cad2134fa721cc71d2b6dbbc891e2db5e1/Reporting2x.png" data-mid="226269968" border="0" src="https://freight.cargo.site/w/1000/i/63b3cf8b936c8b2654a2c96155f7b8cad2134fa721cc71d2b6dbbc891e2db5e1/Reporting2x.png" /> TL;DRI redesigned the Test Reporting experience to reduce trial churn by helping users better understand and trust their A/B testing results. While setting up tests was easy, many ended them too early due to confusion, mistrust in metrics, or overwhelming data. I focused on making insights more discoverable, the experience more usable, and communicated the statistical model’s state in human-friendly language. I’m measuring impact through:Reduction in trial churnSupport ticket volume Usability and satisfaction&nbsp;(via CSAT scores and surveys) This was a cross-functional effort rooted in real user feedback to build clarity, trust, and confidence into the product. Background In Shoplift’s early days as an A/B testing tool for e-commerce brands, our focus was on expanding testing capabilities to stay competitive—answering user questions like “Can I test X?” and driving growth. However, as we scaled, we noticed retention gaps: while users loved launching tests, they struggled to grasp key insights from their results. This meant some of our core value propositions weren’t landing, limiting our differentiation from competitors. Over ~8 months, through support tickets, user calls, and session recordings, we identified a major friction point: the Test Reporting screen. While setting up tests was seamless, interpreting results over time was not. Users needed a clearer, more actionable reporting experience to turn their tests into decisions—and that’s where we focused our efforts. Release date: May 2025 Users Trial users &amp; new users Team CPO, Product manager, Statistician/data scientist, Backend engineer,&nbsp; Fullstack engineer <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/bfe3591c129ebfaa4db6b4d851b39c06d650d295ad46ff25a31f083a9657f00c/before-after-reporting2x.png" data-mid="226269966" border="0" src="https://freight.cargo.site/w/1000/i/bfe3591c129ebfaa4db6b4d851b39c06d650d295ad46ff25a31f083a9657f00c/before-after-reporting2x.png" /> Before &amp; after - reporting page 🔎 DiscoveryThe reporting experience is where users discover the value of Shoplift, and it’s the core of the product. The reporting screen contains sensitive financial information users need to be able to base business decisions on every day. Our product goal was to keep it simple, clear, and actionable, but as the product grew, our product evolved, and so did our users, and we needed to expand its capabilities while still maintaining our core values.I broke down the lifecycle of a test by time and analyzed the user sentiment for each period: <img width="11670" height="5022" width_o="11670" height_o="5022" data-src="https://freight.cargo.site/t/original/i/e2e52fbbec357847bb8bc16c9216b899a87a4a6e22fb984c3825e70933183ba4/User-journey-map.png" data-mid="226270026" border="0" src="https://freight.cargo.site/w/1000/i/e2e52fbbec357847bb8bc16c9216b899a87a4a6e22fb984c3825e70933183ba4/User-journey-map.png" /> User journey analysis 📚 LearningsThrough user analysis during the test-running phase, we discovered that most friction occurred within the first 72 hours, especially for new users. Here’s what we learned: 1. Users Were Ending Tests Too SoonMany users prematurely stopped tests due to uncertainty.Some weren’t confident their test was set up correctly.Small sample sizes led to exaggerated results—big green/red numbers and drastic lifts (positive or negative) made users anxious, prompting them to pull the plug early.Conflicting data added to the confusion. We ran two models: Bayesian (rolling hourly updates) and Frequentist (updated daily). Some users saw a negative lift, yet the test was "trending positive," leading to doubt.2. Trust in Data Was an Important ConsiderationSome users noticed differences between our data and Shopify and GA4, leading to questions about how we calculate metrics.Our metric definitions and calculation methods varied from Shopify/GA4, sometimes resulting in different conversion rate figures.Strong bot filtering led to variations in visitor counts, which required further explanation.As a newer product, Shoplift was still establishing its credibility, and helping users understand our approach was a key focus.3. The Reporting Experience Was OverwhelmingThe sheer volume of numbers, charts, and tables caused cognitive overload, especially for first-time users.Some framing felt scary or negative (e.g., "Inconclusive Data" or "Insufficient Data"), leading users to second-guess their tests.Managed accounts (with hands-on guidance) had a significantly smoother experience compared to self-serve users. Having someone to explain the data, set expectations, and guide best practices helped users focus on what mattered most.4. Improving Reporting Meant More Than Just UI Changes—It Needed to Add ValueWe were capturing valuable data but not surfacing it effectively.We needed to future-proof the product—multivariate testing, DOM testing, and custom goals were on the roadmap and would require deeper reporting changes.Users frequently requested additional features like goal progress tracking, time-based and segment filtering, and more granular breakdowns.We had created high expectations with our advanced capabilities, yet we were missing some basic features that other A/B testing tools had built-in. These insights guided our redesign efforts, ensuring that improvements were not just cosmetic but strategically addressed user concerns and friction points. <img width="3840" height="3850" width_o="3840" height_o="3850" data-src="https://freight.cargo.site/t/original/i/8d95f61295194ec2086bc412716ea52cfb082b17503551597985b9d68c8cb908/Explorations2x.png" data-mid="226270344" border="0" src="https://freight.cargo.site/w/1000/i/8d95f61295194ec2086bc412716ea52cfb082b17503551597985b9d68c8cb908/Explorations2x.png" /> Concepts, explorations and&nbsp; early tests 🎢 Feedback loopThe insights we gathered shaped the scope of our focus, allowing me to define a clear design hypothesis and establish success metrics. With these foundations in place, I began working on wireframes and conceptual ideas, gathering iterative feedback from key stakeholders, including the engineering team, our statistician, the customer success (CS) team, and sales. Our discussions focused on several critical areas: Statistical Integrity &amp; Accessibility Ensuring that our calculations were mathematically sound while presenting them in a way that was understandable and approachable for users. We aimed to balance scientific accuracy with clear, human-centered communication. Technical Feasibility Evaluating the development effort required, prioritizing efficiency by leveraging existing data rather than introducing entirely new backend structures. The goal was to minimize complexity while maximizing the value of surfaced insights. Addressing Customer Confusion Ensuring the design directly tackled the key pain points users faced in interpreting their test results. We worked closely with the CS team to understand recurring challenges and ensure the new design reduced reliance on support for self-service users. Business &amp; Growth Impact Gathering input from leadership, including the CEO and sales team, to align the project with broader business objectives. This included assessing how the redesign would influence user activation, growth, and investor-relevant metrics like churn reduction.. <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/ce5441b982ec2e9c9c01af4ed0b581fee0e137cbe7ec2e1012908ad0493c1574/Usability2x.png" data-mid="226270408" border="0" src="https://freight.cargo.site/w/1000/i/ce5441b982ec2e9c9c01af4ed0b581fee0e137cbe7ec2e1012908ad0493c1574/Usability2x.png" /> Usability testing To view the Prototype click here🕹️ Usability testingAs we prepared for significant changes, it was crucial to ensure that existing users felt supported and not disrupted. To achieve this, we tested a prototype with them, including some out-of-scope elements we were curious to explore. Testing Goals:Evaluate the new navigation: Determine if users could easily find what they were looking for.Assess the perceived value of the new additions to the reporting.Gain deeper insights into how users analyze their test results.Key Takeaways:Positive to neutral reception: While some users appreciated the new look, others were indifferent and immediately focused on exploring the data.Navigation clarity: Users had no difficulty finding relevant information. When asked to locate specific segment data, they correctly identified the corresponding tab on the first attempt.Data transparency preference: Experienced users preferred seeing raw data upfront, rather than having it pre-interpreted. They valued having our analysis as a secondary layer.Visual variant views: Users actively engaged with image-based variant displays in the previous design. This feature was a key part of their workflow and should be preserved in the new iteration. 📊 Final DesignsAfter incorporating the final refinements based on usability testing and adjusting for planned scope reductions, we arrived at the final experience for developer handoff. During this phase, we addressed a few remaining edge cases, including: Ensuring compatibility with tests launched prior to the update.Validating that updates to the statistical model did not retroactively alter results.Accounting for all potential test states and scenarios to ensure a seamless experience. <img width="3841" height="4867" width_o="3841" height_o="4867" data-src="https://freight.cargo.site/t/original/i/9babb34f051f290302e0d401b065902c11a32bf1007e32b68d44696183f3e46a/Reporting-all2x.png" data-mid="226275246" border="0" src="https://freight.cargo.site/w/1000/i/9babb34f051f290302e0d401b065902c11a32bf1007e32b68d44696183f3e46a/Reporting-all2x.png" /> 🔮 Next StepsFollowing an impact analysis and user feedback, we prioritized the remaining enhancements for future development: Metrics/Goal Tab: Introduce an advanced view that allows users to explore all test metrics simultaneously, with day-by-day breakdowns.Segment Performance Charts: Users heavily rely on daily test performance tracking; we aim to extend this view to include segment-level insights over time.Expanded Test Timeline View: Enhance the timeline to display test progress, key milestones, and changes such as trends shifts and statistical significance achievements.Upcoming Feature Integration: The introduction of multivariate testing and DOM testing will require dedicated representation within the reporting framework.Comprehensive Overview Charts: Initially scrapped by the product team, but resurfaced as a critical need from the CS team. This feature will help users and support teams cross-validate test data across multiple analytics platforms (e.g., Shopify and GA4).Expanded Reporting Capabilities: Extend reporting to include additional dimensions such as landing pages, product performance, geo-based analysis, and custom segment insights. Thank You!&nbsp;✨️ https://jeyness.com/URL-split-testing-Beta-Program Sun, 05 Jan 2025 21:02:15 +0000 Jeyness https://jeyness.com/URL-split-testing-Beta-Program URL split testing Beta Program <img width="3841" height="1304" width_o="3841" height_o="1304" data-src="https://freight.cargo.site/t/original/i/2ffbde4921339c377b47cc4c1083f9540bcad3a09343c12764187b991dbbc27d/Cover2x.png" data-mid="224185148" border="0" src="https://freight.cargo.site/w/1000/i/2ffbde4921339c377b47cc4c1083f9540bcad3a09343c12764187b991dbbc27d/Cover2x.png" /> TL;DRURL split testing was a highly requested feature—and also a key internal need for the CS team, who were manually supporting workarounds. We launched a beta program to validate the solution and learn from real user behavior. I built the beta program from scratch, and it’s now a core part of our feature development cycle. Some of our assumptions were off (we expected more ad campaign tests), but the beta surfaced stronger demand for price and product-level experimentation. Impact: High adoption and real-world usage across diverse test types Significantly faster support resolution times Minimal friction and clear product-market fit Beta process now widely used across the team for future releases Background The URL split testing feature was developed to address persistent challenges and align with Shoplift's product objectives: Consistent Feature Requests: Users frequently asked for testing capabilities beyond themes and templates.Trial Churn: High trial churn rates were attributed to the absence of URL testing as a core feature.Manual Workarounds: Customer success teams invested significant time implementing manual solutions for URL testing.Support Ticket Volume: There was a high volume of tickets related to "how to set up X." This feature aimed to expand Shoplift’s testing capabilities, reduce friction for users, and enhance retention, paving the way for long-term growth. Beta date: September 2024 Release date: December 2024 <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/84bbb807adbdb638902f1d3b87471980326aace5aa33a47c38704c24ca07c381/Cover222x.png" data-mid="224185978" border="0" src="https://freight.cargo.site/w/1000/i/84bbb807adbdb638902f1d3b87471980326aace5aa33a47c38704c24ca07c381/Cover222x.png" /> 🤿 Discovery PhaseTo guide development, we collaborated with customer success and sales teams, gathering insights into user needs and existing pain points. Key use cases identified included: Ad Campaign Testing: Testing the effectiveness of landing pages linked from Google and Facebook ads using URLs with UTM parameters.Price Testing: Redirecting users to pages with different prices for the same product.Product Image Testing: Comparing variations in product images to optimize conversions.Collection Page Testing: Testing product layouts and orders within collections.Landing page testing: Comparing homepage and landing page designs, including pages created with tools like Replo and supporting nuanced tests requiring custom tools.Validating Shopper Flow: Ensuring seamless redirection across multiple steps in the user journey.Product-Specific Redirects: Testing templates that showcase products differently.Audience Segmentation: Redirecting specific audiences to tailored pages and measuring their engagement. These insights were pivotal in shaping the MVP and ensuring alignment with user needs. On the other hand, it was a small scope and low risk feature, which created the perfect opportunity to finally build a beta program at Shoplift. <img width="3444" height="1930" width_o="3444" height_o="1930" data-src="https://freight.cargo.site/t/original/i/e8ee3a455ad3632791f8f7b4246a9e089e9dda85f9883cc358b70e6700bdbedd/Screenshot-2025-01-05-at-4.31.59PM.png" data-mid="224188257" border="0" src="https://freight.cargo.site/w/1000/i/e8ee3a455ad3632791f8f7b4246a9e089e9dda85f9883cc358b70e6700bdbedd/Screenshot-2025-01-05-at-4.31.59PM.png" /> Timeline ✅ Feature PrioritiesThe MVP was designed with simplicity and flexibility in mind: Maintain Shoplift’s advantage as an intuitive and easy to use A/B testing solution. Have a clear interface for setting up URL tests.Automated validation to avoid errors and streamline setup.Support for common test types, including price, product image, and collection layouts.Seamless integration into Shopify’s ecosystem, minimizing friction. <img width="3760" height="1286" width_o="3760" height_o="1286" data-src="https://freight.cargo.site/t/original/i/efc6b623c751b3cc493b6b45df0f3f9c43e328413d86e8e4ff62a9677428ece4/flow2x.png" data-mid="224188730" border="0" src="https://freight.cargo.site/w/1000/i/efc6b623c751b3cc493b6b45df0f3f9c43e328413d86e8e4ff62a9677428ece4/flow2x.png" /> <img width="3840" height="1926" width_o="3840" height_o="1926" data-src="https://freight.cargo.site/t/original/i/a2f2d2bb9e152dfebe368291b0d2601b24d3309199cde274f2251d5d3b02dd50/insert2x.png" data-mid="224188410" border="0" src="https://freight.cargo.site/w/1000/i/a2f2d2bb9e152dfebe368291b0d2601b24d3309199cde274f2251d5d3b02dd50/insert2x.png" /> <img width="3840" height="8806" width_o="3840" height_o="8806" data-src="https://freight.cargo.site/t/original/i/5468a773043def6b480e5dc52821e3b8b642cc6a4aeacefd79d7403c3e37e053/screens2x.png" data-mid="224234192" border="0" src="https://freight.cargo.site/w/1000/i/5468a773043def6b480e5dc52821e3b8b642cc6a4aeacefd79d7403c3e37e053/screens2x.png" /> 🧪 Recruiting testers&nbsp;Organic: We added a link to our documentation that invited users to apply. &nbsp;Identifying best candidats:&nbsp;A data query identified around 250 highly engaged, self-service users across all plans and experience levels. Managed accouts: Our Customer Success team hand-picked the most qualified accounts to participate.Agency partners: We reached out to our partnering agencies to submit their clients. Support channels: Users reached out to support and either asked to apply or had a question that URL testing can solve. We shared an application form and after filtering the unqualified accounts, we ended up with 93 testers from across many cohorts, user needs and experiance levels.. <img width="3840" height="1926" width_o="3840" height_o="1926" data-src="https://freight.cargo.site/t/original/i/1f2556cffeb4e5a7c9e28df792b31e14cbb4605a462ca719d5131ce65d492b01/beta2x.png" data-mid="224189199" border="0" src="https://freight.cargo.site/w/1000/i/1f2556cffeb4e5a7c9e28df792b31e14cbb4605a462ca719d5131ce65d492b01/beta2x.png" /> Beta Recruiting <img width="2740" height="1530" width_o="2740" height_o="1530" data-src="https://freight.cargo.site/t/original/i/c9fe8d250b01a4d7d8248fdfcd4b058639c66f00a900fe7741d992a09022ad16/Screenshot-2025-01-05-at-5.04.09PM.png" data-mid="224189216" border="0" src="https://freight.cargo.site/w/1000/i/c9fe8d250b01a4d7d8248fdfcd4b058639c66f00a900fe7741d992a09022ad16/Screenshot-2025-01-05-at-5.04.09PM.png" /> Breakdown by relationship with Shoplift 🥂 LearningsAs we grew our user base and test creation kept evolving with their needs:Metrics Review on Use Cases: We were wrong about the primary use cases. Users were mainly testing their product page designs (PDPs) and conducting price tests, which was intersting to learn and apply for the future of the product (we were considering profit optimization features). The numbers: Ad Campaign Testing: Only 15% of users tested landing pages, suggesting a need for better user education on this use case.Price Testing: A significant 18% adoption validated its relevance.Product Image and Collection Page Testing: Moderate adoption rates indicated a demand for these functionalities but also highlighted areas for improvement.Audience Segmentation and Advanced Testing: Custom page builder tests and segmented audience experiments showed potential but were less frequently utilized. Reflection on Original Goals: Churn Reduction: The feature addressed the "missing feature" cohort, reducing trial churn.Support Efficiency: Average ticket resolution time dropped from 62 hours to 35 hours during the beta, reflecting improved operational efficiency.High Adoption: Engagement and feedback indicated the feature met a real user need. Challenges: Low engagement in post-test surveys due to timing around holidays.Manual onboarding and feedback collection were resource-intensive.. <img width="2378" height="1334" width_o="2378" height_o="1334" data-src="https://freight.cargo.site/t/original/i/72cc4e27ed2affd697742362f3e592152282c69b3de821ae65e9512a8d9d86fd/Screenshot-2025-01-05-at-5.05.14PM.png" data-mid="224190087" border="0" src="https://freight.cargo.site/w/1000/i/72cc4e27ed2affd697742362f3e592152282c69b3de821ae65e9512a8d9d86fd/Screenshot-2025-01-05-at-5.05.14PM.png" /><img width="2388" height="1338" width_o="2388" height_o="1338" data-src="https://freight.cargo.site/t/original/i/29572b559539d8f78323cbe6e4c73fda426648b91c5ec82338c801c60865cdc1/Screenshot-2025-01-05-at-5.22.53PM.png" data-mid="224190254" border="0" src="https://freight.cargo.site/w/1000/i/29572b559539d8f78323cbe6e4c73fda426648b91c5ec82338c801c60865cdc1/Screenshot-2025-01-05-at-5.22.53PM.png" /> 🥂 OpportunitiesBest on the feedback we recived, we now have a plan how to further improve URL split testing and making it a truly seemless experiance.1. Upgrade prompt / Better experienceWhen a user pastes a URL with a UTM/string, we strip it, but we can also auto-create an audience for him. Better experience for Advanced and Pro plansUpgrade opportunity for Core plans 2.&nbsp;Testing single products Fits the most common use case and&nbsp;makes it easier for users to find and confirm the products users want to test3. Profit optimization / profit reporting (research) We've seen a lot of use cases of price and offer testing, and I believe we'll continue seeing more. We're starting to gather a good sense of what people are doing, so this is a great research opportunity. <img width="3840" height="1926" width_o="3840" height_o="1926" data-src="https://freight.cargo.site/t/original/i/7052695cb4a55f1434a7a698f12fd1125648f4022eeea37490929bc01427e716/Search2x.png" data-mid="224235620" border="0" src="https://freight.cargo.site/w/1000/i/7052695cb4a55f1434a7a698f12fd1125648f4022eeea37490929bc01427e716/Search2x.png" /> <img width="3840" height="4218" width_o="3840" height_o="4218" data-src="https://freight.cargo.site/t/original/i/7c79034d755861c5477cf5e24de1531f385035e3229d2851b05d9343ada4b476/Audiences2x.png" data-mid="224235645" border="0" src="https://freight.cargo.site/w/1000/i/7c79034d755861c5477cf5e24de1531f385035e3229d2851b05d9343ada4b476/Audiences2x.png" /> Thank You!&nbsp;✨️ https://jeyness.com/Elementor-Website-Redesign Tue, 12 Jul 2022 20:25:53 +0000 Jeyness https://jeyness.com/Elementor-Website-Redesign Elementor.com redesign <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/74d15404e850f5c2115037637e9b14e11225ef31f490ba83f2f9e0a5c9d2d9bd/Home-Page.png" data-mid="147712251" border="0" src="https://freight.cargo.site/w/1000/i/74d15404e850f5c2115037637e9b14e11225ef31f490ba83f2f9e0a5c9d2d9bd/Home-Page.png" /> My RoleResearch: competition, existing website &amp; KPI’sUX design: Ideation, hierarchy, page structure, design systemUI design: building the website brand and style guideTeaching new team membersBuilding healthy workflows with developersHelping PMM’s build the roadmap for next stages🏆 2022 Israeli Brand Awards winner // Best Web User Experience (Award Website) 🏆 TeamHead of Design: Ronit CyjonTeam Lead: Erez EdenProduct Marketing: Sarah Nielsen, Daniela Soibelman, Johnathan MaimonDesign Team: Danielle Stelman, Alon Braier, Omri Avraham, Yanki Bindman, Yael Zlotnik, Alona Nof, Shachar Erenfeld, Aviya TzarfatiDev. Team: Asaf Rotstain, Alan Kaler, Roy Eyal, Nofar ShlomoProject Management: Danit Senior, Julien DriquezSpecial thanks to Yoni Luksenberg, CEO <img width="2560" height="1696" width_o="2560" height_o="1696" data-src="https://freight.cargo.site/t/original/i/195b0842b39d9d3bd3902db543880520a8fe1fe113f0b4bae2a5d344f31011c9/Before---After.png" data-mid="149432700" border="0" src="https://freight.cargo.site/w/1000/i/195b0842b39d9d3bd3902db543880520a8fe1fe113f0b4bae2a5d344f31011c9/Before---After.png" /> Before &amp; after - home page 👋🏻 Introdusing Elementor What is Elemntor? Elementor is the leading website builder platform for professionals on WordPress. Elementor serves web professionals, including developers, designers, and marketers. It started as a humble WordPress plugin and became so much more.I joined Elementor when the design department started to take shape. One day I was called to a room with Ronit (Head of Design) and Yoni (the CEO) and was given the mission to design the new Elementor website with the new brand. At first, I had to map all the questions I had - who are we as a company, and what do we represent? what are our business goals? How does the brand react to the web environment? What are our users getting out of it? and what do they need?Over time new team members joined the effort, a team leader was placed and healthy workflows were created. This project was a huge team effort and I couldn’t do it without the help and advice of so many people.Live website: elementor.com <img width="2224" height="1834" width_o="2224" height_o="1834" data-src="https://freight.cargo.site/t/original/i/5cb0b7e886ef3297f18a6f6f44e43bd85eda9bc41e8825afc5e110c742db2a3f/More-pages.png" data-mid="150276673" border="0" src="https://freight.cargo.site/w/1000/i/5cb0b7e886ef3297f18a6f6f44e43bd85eda9bc41e8825afc5e110c742db2a3f/More-pages.png" /> Examples for web components ⚠️ The ProblemWhy redesign a working website? elementor.com was working pretty well and had a good amount of traffic and conversions. We had a few good reasons to do so:1. The brand changed - elementor had a full rebranding and strategy change, it was more than just a wordpress plugin. It became a community of web creators with new goals and aspirations.2. We had new and higher goals to achieve, first of them was serving the community - with education programs and learning material, new pricing tiers and more.3. It was simply not the same company anymore and we wanted the website to reflect it. We were telling a new story.4. Many things didn’t work well - the website wasn't really responsive and accessible and the architecture didn’t make sense anymore. We need to rebuild and restructure. Product video by Alona Nof &amp; Simon Shor (and that’s me in the green pants below!) ✅ Solution Guidlines Where do the users go?One of the first things we learned is that users come back a lot. We didn’t have the data if they already bought the elementor plugin or they are still browsing, but we noticed they came to learn. The pricing page was the most popular one, but after it, we had major traffic in the widgets page, big feature pages and the blog. How do they browse?It was very clear that most of the traffic comes from desktop - around 87%. Purchasing from the pricing page was higher - 96%, which made sense, since the elementor plugin is a work tool, a web desktop app, as a professional you’ll probably have your computer for working. Also people make big/important purchases on their computer mostly. So we designed desktop first, but always having in mind the responsive aspect. How do we build?It was important to build purly with the elementor plugin and show our users the best capabilities we have. It was limited in some parts but we tried to keep the code used to a minimum and just be creative. The mega menu for example was a “hack”, using the popup feature, but still, purely elementor with a touch of CSS. The DesignDesign-wise we wanted to be bold and to stretch the meaning of web design. We were guided by the idea of the product being part of our users daily life. More than just a work tool - an active and strong global community. This inspired our page hero sections, the bold color palette and the mockups we designed to demonstrate features - true to the product and still bold and inspirational. The work is not done, probably will never be. The idea was to create a solid base for now and to build on it in the future, while keeping it bold, fresh and adapting to change. Of course we made some mistakes, some are still live and waiting in the backlog to be fixed.As the design and developer team grew, we knew we had to keep the design language coherent, so that how the web design system was created, you can check out the study case here. <img width="2224" height="2274" width_o="2224" height_o="2274" data-src="https://freight.cargo.site/t/original/i/7e9f782d98b08901c9c90b227d1436d07eefe550d445cbd3c880c7333c6a1b1a/Home-Page.png" data-mid="147714378" border="0" src="https://freight.cargo.site/w/1000/i/7e9f782d98b08901c9c90b227d1436d07eefe550d445cbd3c880c7333c6a1b1a/Home-Page.png" /> Home Page Design <img width="1608" height="746" width_o="1608" height_o="746" data-src="https://freight.cargo.site/t/original/i/369aae3526f46e21433ccfc70a06f2b5bdd8c4bf932e6f472b4c8738bc62f849/Carusel-2.png" data-mid="147718081" border="0" src="https://freight.cargo.site/w/1000/i/369aae3526f46e21433ccfc70a06f2b5bdd8c4bf932e6f472b4c8738bc62f849/Carusel-2.png" />User website carusel Evolution of the pricingThe 2nd most viewed page after the home page, was the pricing page. It was always a fun challenge to make it work, be clear and also reach all the goals and guidelines from the marketing department. Probably one of my favorite pages to think about.The first redesign happened when the website launched in June 2021, right after 2 new pricing tiers were added. It created a huge shockwave through the community. People were angry, because the $199 plan used to include 1000 websites, but now it’s just 25 websites. How could we do that? There’s of course a great explanation for that, but why should the users care?The problemInstead of 3 plans, we now had 5. The main difference between them was the price and amount of websites, there were also some other perks, but that came much later. When sales happen, like on Black Friday, it’s even harder to understand what’s going on. Sales we’re decreasing and we needed to help the effort on our front,How we solved itTests, tests, tests. We did many A/B tests without hypothesis. One of the more successful ones was moving the 2 top tiers to diffrant tab/page, which helped with the sales of the cheaper plans. Design wise we went for the friendly pink approach, and made it all super transparent and easy to compare. We added illustrations and icons to help guide the users.Collaboration with Yael Zlotnic <img width="2224" height="1390" width_o="2224" height_o="1390" data-src="https://freight.cargo.site/t/original/i/dd39c39212e9ba19ed07330f90a5625751a3c0df3bc5251048e09a167282a1fd/Pricing.png" data-mid="147732687" border="0" src="https://freight.cargo.site/w/1000/i/dd39c39212e9ba19ed07330f90a5625751a3c0df3bc5251048e09a167282a1fd/Pricing.png" /> Old Pricing pages From the left: Plugin pricing // Top tier test // Black Friday Sale The New Game ChangerIn March 2022, a new player was added to the board - the Elementor Cloud Website. All the advantages on the plugin, but with hosting included. This one was tricky. It was not a 6th pricing tier, it was a whole new product. But it was still Elementor, with all the plugin advantages. We had to explain it very well to our slightly confused community of users.How we solved itAfter some tests, we went with the bold approach - “Cloud First'' - which ment we that the first thing you see in the pricing page, was the Cloud Website option, the plugin was 2nd in hierarchy, you need to press the toggle to “reveal” it. After many sketches, brainstorming sessions, we got to this result. We knew it was temporary (more cloud plans were planned), but as always, we were creating a base for the future to come. The branding of the cloud product was those circles that we were trying to combine harmonically in the page.A collaboration with Yael Zlotnik <img width="2224" height="2946" width_o="2224" height_o="2946" data-src="https://freight.cargo.site/t/original/i/a6d3404a7738760bf83aee5dda5dc013e71ae8b2861dfa97d06f6774b36e71ef/Pricing-cloud-fixed.png" data-mid="149645714" border="0" src="https://freight.cargo.site/w/1000/i/a6d3404a7738760bf83aee5dda5dc013e71ae8b2861dfa97d06f6774b36e71ef/Pricing-cloud-fixed.png" /> New product pricing - cloud planDon’t Forget the Plugin&nbsp;We took this great opportunity to make some much needed updates in the good-old plugin page and help the users understand it better and to find the right fit for their needs. We cleaned it up and made it more simple, but also combined structures from the cloud version for the rest of the page. One of my favorite parts was the feature list - we divided them into tabs and made the comparison for what you get for the free vs. the paid version (see video below). <img width="2224" height="3632" width_o="2224" height_o="3632" data-src="https://freight.cargo.site/t/original/i/65e15865b2d5c434afc4515a5486c03f73737c0e6a8c9fa8de832a1a9aa5e0f0/Pricing-Plugin.png" data-mid="147733133" border="0" src="https://freight.cargo.site/w/1000/i/65e15865b2d5c434afc4515a5486c03f73737c0e6a8c9fa8de832a1a9aa5e0f0/Pricing-Plugin.png" /> New product pricing - plugin planNew product pricing - Cloud plan Feature FocusedUsers want to read about features, and not just the new ones. We saw a lot of traffic on feature pages, mostly the big ones Elementor had built in, that wordress users had to buy seperatly before. We created a playful 3D language for the hero section and tried bold colors, videos and illustrations. <img width="2224" height="2860" width_o="2224" height_o="2860" data-src="https://freight.cargo.site/t/original/i/5ec21eedc2423eb9716e59ceb70db1f50022bfefc4be41c9b86d39efe222c2fa/Feature-pages.png" data-mid="147714699" border="0" src="https://freight.cargo.site/w/1000/i/5ec21eedc2423eb9716e59ceb70db1f50022bfefc4be41c9b86d39efe222c2fa/Feature-pages.png" /> Feature Pages Feature index pageA fun UX challenge was to create a new index for all the Elementor features, including a search option that it didn’t have before. For that we had to use extra developers, since it was not a native Elementor option.Also, I developed a simplification of the Elementor Editor, to help explain features to our users - where they are, how they look and what they do. <img width="2224" height="2864" width_o="2224" height_o="2864" data-src="https://freight.cargo.site/t/original/i/e10952fadb6afc26d6c684e2ca5d87c929576a76c9b6a9cb0ce3dcc065f9cbd5/all-features-page.png" data-mid="147796763" border="0" src="https://freight.cargo.site/w/1000/i/e10952fadb6afc26d6c684e2ca5d87c929576a76c9b6a9cb0ce3dcc065f9cbd5/all-features-page.png" /> Feature Index Page Anything for any userWe have 5 main user personas for the website, but of course in real life our users are usually a mix of those: designers, developers, marketers, SMB owners and agencies.&nbsp;We created hubs for each one, with the best features and solutions for them. Live Designer Page <img width="2224" height="2860" width_o="2224" height_o="2860" data-src="https://freight.cargo.site/t/original/i/6c5a465ba956f25ccf8e8428c2dac5c98a2afe8a6a715ded252607984d36b453/persona-pages.png" data-mid="147714700" border="0" src="https://freight.cargo.site/w/1000/i/6c5a465ba956f25ccf8e8428c2dac5c98a2afe8a6a715ded252607984d36b453/persona-pages.png" /> Persona Pages Designer Page Scroll Special PagesNot all the pages are feature or persona pages, some have no specific category, but they serve a need and tell a story. Those two are my favorite special pages:Roadmap Page Transparency was always one of our key goals, and since our users always ask us when this and that feature will be launched, we created this roadmap page. Alongside the feature schedule, we added feature updates and an interactive explanation of our development process. The next stage will be adding voting on requested features. This page will be live soon. Customer Experience PageElementor made a huge effort to make the customer service great. It’s our closest interaction with our users, in time of need. It became an award-winning experience and we really wanted to highlight it and the people behind it, make it easy to submit a ticket and explain the difference between our Pro &amp; VIP support.View live Customer Experience pageWeb Creators HubThis is the home of a very special project and it’s telling the stories of our actual users - with interviews and videos. We made a sub-brand for it and created a scrollytelling experience.View live Web Creators Hub <img width="2560" height="2578" width_o="2560" height_o="2578" data-src="https://freight.cargo.site/t/original/i/6df006cfef4b4fdfd2824b40e38f53fc3d68c26bacd14fcda4171ee985d3a177/Roadmap.png" data-mid="150276674" border="0" src="https://freight.cargo.site/w/1000/i/6df006cfef4b4fdfd2824b40e38f53fc3d68c26bacd14fcda4171ee985d3a177/Roadmap.png" /> Roadmap Page&nbsp; <img width="2224" height="2594" width_o="2224" height_o="2594" data-src="https://freight.cargo.site/t/original/i/bcf3e6a33f8f6a23416c0666f29aac9e773ecc8a56b6dde34d9b35aeb666394e/Customer-Experience.png" data-mid="147892398" border="0" src="https://freight.cargo.site/w/1000/i/bcf3e6a33f8f6a23416c0666f29aac9e773ecc8a56b6dde34d9b35aeb666394e/Customer-Experience.png" /> Customer Experiance Page <img width="2560" height="5130" width_o="2560" height_o="5130" data-src="https://freight.cargo.site/t/original/i/fa1421d5d03b5c4a460e28af010f86ee56534302377d6c0387b0f23cc1255435/Webcreators.png" data-mid="147894233" border="0" src="https://freight.cargo.site/w/1000/i/fa1421d5d03b5c4a460e28af010f86ee56534302377d6c0387b0f23cc1255435/Webcreators.png" /> Web Creators Hub Thank You!&nbsp;✨️ https://jeyness.com/Elementor-DSM Wed, 13 Jul 2022 03:01:15 +0000 Jeyness https://jeyness.com/Elementor-DSM Elementor Website Design System <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/4a623fe433777f3691e25a92c73714c12a980c80005b62526b1452053fb4550c/DSM-wide.png" data-mid="147895734" border="0" src="https://freight.cargo.site/w/1000/i/4a623fe433777f3691e25a92c73714c12a980c80005b62526b1452053fb4550c/DSM-wide.png" /> ⚡️ Start at the Begining Why make a design system for a website?1. Many people were involved in the elementor.com project. New designers joined the team, some only temporarily since we needed more working hands for the tight deadline. Also new developers and product marketing managers joined and it became harder to keep the consistency going.2. Other teams also saw the web language being created, and wanted to have guidelines for other things - like landing pages, release material &amp; emails. Another project was happening simultaneously - adding the new brand to the product - that team needed some guidelines to incorporate the brand to the product. 3. We wanted to spend less time on simple repetitive parts of the website and dedicate more time to developing more complex layouts and animations.What now?The design system helped us achieve all of those and more. The way it worked was first documenting all the big umbrella decisions - Colors, fonts, grids.. and having this basic style guide - in the figma file and in development. So when I say H3 text block or “light pink”, we all speak about the same thing. Later on more needed components were added. We had 3 rules about what's going in the DSM:1. Was it developed? (sometimes we made adjustments based on the development needs/limitations)2. Will we use it more than once or twice? Does it solve multiple scenarios or is it a one-time showoff?3. Does it work and function as planned? Is it responsive? Since the day it was born the design system kept on growing and developing, and it’s in use by multiple teams. Some components were added as a request from others, like blog and marketing teams, to fit their needs better. We also kept syncing with other product teams and helped each other and the whole elementor experience to be consistent and coherent.My Role in the projectThe DSM started as a passion project of main and Yanki Bindman. First we started documenting the decisions I made for the web language - colors, type, gridsLater we added basic UI atoms - button styles, breadcrumbs, etc. and finally I built the rest - text blocks, page blocks, showcases, carousels and made them responsive. I was the owner of the project and kept adding and documenting components with Assaf Rotstain on the dev. side. Just before I left the company, I held a workshop for my team so they can keep maintaining and growing it without me.The TeamHead of Design: Ronit CyjonTeam Lead: Erez EdenTeam: Yanki Bindman, Danielle Stelman, Alon Braier, Omri Avraham, Yael ZlotnikDev. Team: Asaf Rotstain, Alan Kaler <img width="3840" height="1982" width_o="3840" height_o="1982" data-src="https://freight.cargo.site/t/original/i/3a22296505df933cb5403f4351f194d19f10d52757fcc15209ceb3e44d5b0bbd/DSM-screenshot.png" data-mid="148761945" border="0" src="https://freight.cargo.site/w/1000/i/3a22296505df933cb5403f4351f194d19f10d52757fcc15209ceb3e44d5b0bbd/DSM-screenshot.png" /> 📌 Fundamentals Color and TypographyFirst thing first - converting the brand language to a web language. We had the primary brand colors that were given, but we needed to add some sub colors and greys to make them work better on the web. Also we had 3 fonts, which is an interesting challenge by itself, so we divided the two headline fonts (Ivar Text bold, Oli Grotesk bold) to primary and secondary headlines. Later on we pushed to buy the full Ivar font family so we can have more web fitted headlines. We created the different hierarchies and text modals (H1-H6 sizes, body blocks, bullets, etc) GridsAs the majority of our users (~87%) browse the website on desktop, we knew we’re working desktop first. Before the product had custom breakpoints we need to think how the pages will look best on wide and laptop resolutions, how to have a good score with google (since it’s calculating mobile first) and also be true to our users about how we build with our own product. We knew that we don’t actually have much browsing from tablets, but our user tested how responsive we build.The first thing we did in the beginning was working on wide screens (1920px) but with a narrow grid (1280px) and making sure it looks good on both. Later on we started working on a more standard and common size (1440px). We basically worked for the extreme first - small mobiles (360px) and a 1024px tablet with 768px wide grid. <img width="3840" height="8055" width_o="3840" height_o="8055" data-src="https://freight.cargo.site/t/original/i/28d450741fb90108d9371e6a9e0b78059e1dc8fdf7afc879dd017d95c41c8bdb/Basics.png" data-mid="147804840" border="0" src="https://freight.cargo.site/w/1000/i/28d450741fb90108d9371e6a9e0b78059e1dc8fdf7afc879dd017d95c41c8bdb/Basics.png" /> Design System Fundamentals 🔘 UI AtomsThe Elementor brand is bold and colorful, and has no rules or specific color codes for topics. Everything goes and it’s up to the designer to make those decisions. That’s why many of the components come without color and are just represented with grey tones. Components like buttons have a specific use guide next to them, to show the options and how it&nbsp; looks in different states. Same was developed inside the elementor editor and CSS classes were created for the options with their behavior. <img width="3840" height="4533" width_o="3840" height_o="4533" data-src="https://freight.cargo.site/t/original/i/a627e16dd3dc556b947539867f17d34c88fbe244b76c8c49439784d094d5fd96/UI-Atoms.png" data-mid="147876409" border="0" src="https://freight.cargo.site/w/1000/i/a627e16dd3dc556b947539867f17d34c88fbe244b76c8c49439784d094d5fd96/UI-Atoms.png" /> UI Atoms ❖ Brand AssetsWe had great brand assets - amazing illustrations and beutiful icons that we need to adjust - how and when we use them? color options, layout rules... It was important to us not to over-use them, and we wanted to keep them as little delights that enrich our stories. The illustrations were used for the emotional parts of the product - to help explain more abstract concepts and add heart to complicated subject, usually with a little loti animation. The icons came first as “mini-illustrations” and were used more on landing pages. We used them for important points we wanted users to stop for, and made lighter versions of them to use on mega-menu and other big lists/card compositions. Those assets keep developing and growing with website itself. <img width="2560" height="5794" width_o="2560" height_o="5794" data-src="https://freight.cargo.site/t/original/i/4d1b1d453ffaee76c63771caff0ec5da4a5263f017a01267e2e5843d2c86016a/icons.png" data-mid="147880846" border="0" src="https://freight.cargo.site/w/1000/i/4d1b1d453ffaee76c63771caff0ec5da4a5263f017a01267e2e5843d2c86016a/icons.png" /> Three Icon sizes // Library Examples <img width="2224" height="4528" width_o="2224" height_o="4528" data-src="https://freight.cargo.site/t/original/i/0da6a4adebf9a0cf8025f8af6fc048ea9565b19d5f2f26d46cfce2e679aa8c2f/Illustrations.png" data-mid="148342632" border="0" src="https://freight.cargo.site/w/1000/i/0da6a4adebf9a0cf8025f8af6fc048ea9565b19d5f2f26d46cfce2e679aa8c2f/Illustrations.png" /> Web illustrations // By Alon Braier 🗂 Components Or: How not to solve the same problem again and again.The most common components on the website were text and an image to illustrate/demonstrate/mockup. So in order to keep it looking clean. grounded and consistent, we limited the image and video sizes to 4 sizes and resolutions: 3:4 in 2 sizes, 16:9 and 1:1. We paired those images with full text blocks that contain all the possibilities (but you don’t have to use the full version): Label, headline, body text/bullets and a button. And for the ability to build and test a page quickly we created responsive full page blocks. Just change the text and see if your flow and story are working for you. Same blocks were developed and that helped to cut the development time from 2 days to a few hours. Also, it left us more time to concentrate on designing more and crazier components to enrich the web experience.Other than that we added footer and header components and updated them when the website changed and grew (instead of doing it manually on all the pages) and other useful comps. - Carousels, tabs, showcases and more. <img width="2762" height="3556" width_o="2762" height_o="3556" data-src="https://freight.cargo.site/t/original/i/a43965ee3e2ec27a58f925a285554d3158f56aa68da7d2d5c7413cd002bcbd90/Image-Comps.png" data-mid="147889288" border="0" src="https://freight.cargo.site/w/1000/i/a43965ee3e2ec27a58f925a285554d3158f56aa68da7d2d5c7413cd002bcbd90/Image-Comps.png" /> Image Containers This are BG sizes for various images that are used on the website <img width="2762" height="8080" width_o="2762" height_o="8080" data-src="https://freight.cargo.site/t/original/i/ba5b4d3619e875dcf5c244f65efeb0fbd3a03de02aa188c2ecd9c947aeacd0ab/Typography.png" data-mid="147889787" border="0" src="https://freight.cargo.site/w/1000/i/ba5b4d3619e875dcf5c244f65efeb0fbd3a03de02aa188c2ecd9c947aeacd0ab/Typography.png" /> Text Blocks modals Text sizes and variations <img width="2762" height="4014" width_o="2762" height_o="4014" data-src="https://freight.cargo.site/t/original/i/4e8e1056cbd5d11a12e1071d31e477fb9c9b4e7897f553ef6505d4182cf83f71/Header-Footer.png" data-mid="147899829" border="0" src="https://freight.cargo.site/w/1000/i/4e8e1056cbd5d11a12e1071d31e477fb9c9b4e7897f553ef6505d4182cf83f71/Header-Footer.png" /> Header &amp; Footer <img width="2762" height="3556" width_o="2762" height_o="3556" data-src="https://freight.cargo.site/t/original/i/165f0923f1deaabe77521cb22278d2c0bc3b2a88bce916a50fb36802c7523dc5/Showcases.png" data-mid="147889289" border="0" src="https://freight.cargo.site/w/1000/i/165f0923f1deaabe77521cb22278d2c0bc3b2a88bce916a50fb36802c7523dc5/Showcases.png" /> Showcase Componant 🏗 Full Page BuildTo demonstrate a little better how it works, take a look at a simple page created with 100% of DSM components and how it looks in the process. <img width="2762" height="5804" width_o="2762" height_o="5804" data-src="https://freight.cargo.site/t/original/i/293e294a4f2c9bad466fd62b59e66edc335da9bb15637a041a750c59f7b2311a/simple-page.png" data-mid="148053817" border="0" src="https://freight.cargo.site/w/1000/i/293e294a4f2c9bad466fd62b59e66edc335da9bb15637a041a750c59f7b2311a/simple-page.png" /> Simple Page Stracture 🏗 Design System WorkshopI knew I was about to leave my beloved team and I’m also a huge fan of sharing knowledge, so I held a design system workshop, tailored to my team's needs, but also added some more important knowledge. We had a lot of fun learning and doing exercises together. Since it went pretty well, I planned more workshops - for the marketing team and the education/developers teams. <img width="2560" height="3006" width_o="2560" height_o="3006" data-src="https://freight.cargo.site/t/original/i/9346e2dc0aae3706e6410cac17ebe75047b36c160a8bebd83eb48cf4ce95cca3/presentation.png" data-mid="148136059" border="0" src="https://freight.cargo.site/w/1000/i/9346e2dc0aae3706e6410cac17ebe75047b36c160a8bebd83eb48cf4ce95cca3/presentation.png" /> Presentation <img width="2560" height="3006" width_o="2560" height_o="3006" data-src="https://freight.cargo.site/t/original/i/ba4bf7e31b96a4852f4ad150171a6cc1de6907dd4c5f9af8c434b8fa5113fd68/workshop.png" data-mid="148136061" border="0" src="https://freight.cargo.site/w/1000/i/ba4bf7e31b96a4852f4ad150171a6cc1de6907dd4c5f9af8c434b8fa5113fd68/workshop.png" /> Workshop Examples <img width="2552" height="1973" width_o="2552" height_o="1973" data-src="https://freight.cargo.site/t/original/i/82bcc383ef470e96059fe176d1258cdb0c9acb9b0e13f114ceb63f780f59e9a8/workshop2.jpg" data-mid="148138609" border="0" src="https://freight.cargo.site/w/1000/i/82bcc383ef470e96059fe176d1258cdb0c9acb9b0e13f114ceb63f780f59e9a8/workshop2.jpg" /> <img width="2558" height="1446" width_o="2558" height_o="1446" data-src="https://freight.cargo.site/t/original/i/9b2368b0adc4c03128f89a772dab4ebf696095d4886f69dbb23959013ad3d582/Screen-Shot-2022-03-30-at-9.17.13.png" data-mid="148138661" border="0" src="https://freight.cargo.site/w/1000/i/9b2368b0adc4c03128f89a772dab4ebf696095d4886f69dbb23959013ad3d582/Screen-Shot-2022-03-30-at-9.17.13.png" />Screenshots from the workshop recording Thank You!&nbsp;✨️ https://jeyness.com/Container-Feature-Playground Thu, 14 Jul 2022 23:30:33 +0000 Jeyness https://jeyness.com/Container-Feature-Playground Container Feature Playground <img width="5760" height="3240" width_o="5760" height_o="3240" data-src="https://freight.cargo.site/t/original/i/34bfbf7832e36eef7ff317ad437a2901dd5271d09b9b4f749cd4dce6ffeab0fb/Home-Page-wide.png" data-mid="147900670" border="0" src="https://freight.cargo.site/w/1000/i/34bfbf7832e36eef7ff317ad437a2901dd5271d09b9b4f749cd4dce6ffeab0fb/Home-Page-wide.png" /> The flexbox container was a long anticipated feature. For years people built websites with columns and sections and it was about time to switch for a better way of building websites. This feature changes the way people are used to building and working, but also will allow Elementor to develop other, much needed features on top of it.We wanted to make a product playground for a while, and this feature release was the perfect opportunity. It has never been done before so we consulted with a lot of people in the process: Our community leaders who best know our users, the education team that experts on teaching new features and of course or developers - since we needed to invent a new platform for this. Link to&nbsp;Live Project Team Lead: Erez Eden Product Marketing: Gabriella Laster, Asaf Shevach Team: Danielle Stelman, &nbsp;Asaf Rotstain, Nofar Shlomo 💡 First ThoughtsAlthough some of our users were familiar with the concept of flexbox containers, many were not and were not looking to change the way they worked. We were thinking a lot about how to make this clear (and fun!) for different levels of users. We decided to exclude new users, since we dive right in the feature and not introducing how to get started with the product itself.The first thing I realised we need, is a simple intro to the main areas of the feature. What are the basic controls that the user needs to know about?We knew we wanted to use examples that are web components (like a hero section, header, cards, etc). But the first impression should be even more simple, so why not just use shapes?Here are some tests we did and later on the final result: <img width="2560" height="1932" width_o="2560" height_o="1932" data-src="https://freight.cargo.site/t/original/i/4d6597e824b6a175e204eaf33fa74e39f6c1a449e1b06a9621bd4641d597c469/First-test.png" data-mid="148258445" border="0" src="https://freight.cargo.site/w/1000/i/4d6597e824b6a175e204eaf33fa74e39f6c1a449e1b06a9621bd4641d597c469/First-test.png" /> First intro tests <img width="2560" height="1932" width_o="2560" height_o="1932" data-src="https://freight.cargo.site/t/original/i/f323d11e56c475b9403aa3f7e16567debc6dd36b975e0d718da39b94af1004cd/Final-result---intro.png" data-mid="148258444" border="0" src="https://freight.cargo.site/w/1000/i/f323d11e56c475b9403aa3f7e16567debc6dd36b975e0d718da39b94af1004cd/Final-result---intro.png" /> Intro final result 🧭 Instructions &amp; NavigationExcept the lesson itself, we had a few elements we needed to include:1. Next &amp; back buttons2. Basic instructions3. Hint for extra help (with a gif or not)4. Final result preview (yes or no?)5. Progress bar (yes or no?)6. Container hint (an indication where is the right container to work on in the lesson.We were only using the Elementor platform capabilities, which is very honest and users appreciate it, but also limiting in some aspects. We built the navigation and instructions with elementor widgets and of course - flexbox containers.Challenges &amp; Solutions ⚓️ One of the biggest challenges was how to build the instructions and navigation. We were working inside the product and it takes some time to load. So the first decision we made after testing loading times was to make it all a long scroll through the lessons (instead of loading each lesson separately), using a “scroll snap” feature that anchors each lesson.🔮 Another Challenge we discovered was the text of the instructions and hints. We wanted to keep it clean but clear for the users, but the build with containers overlapped some of our options (like the first image on the left) and made it harder to read.The chosen solution was having the basic explanation open and the hint is collapsable and “pushes” the lesson area down the screen. The video gif idea didn’t work unfortunately, since it affected the loading time and needed some extra development time we didn’t have. 🖼After testing the first versions we made, we realized that having the result image already visible made the users understand the assignment better. Another tool we wanted to incorporate was guiding and live hinting (pando messages), so the user will know he’s in the right direction, but also, since we were short on time we gave it up and worked on more precise copy and UX. <img width="2560" height="2910" width_o="2560" height_o="2910" data-src="https://freight.cargo.site/t/original/i/2ca00f18d59b0485c7abf86abdbff5b2fdbbcee402d7b0ff81025db0d40bb1de/Instructions.png" data-mid="148262397" border="0" src="https://freight.cargo.site/w/1000/i/2ca00f18d59b0485c7abf86abdbff5b2fdbbcee402d7b0ff81025db0d40bb1de/Instructions.png" /> Instructions &amp; Navigation Tests <img width="2560" height="2324" width_o="2560" height_o="2324" data-src="https://freight.cargo.site/t/original/i/8c8fee7b6fe56e813237a3d83585319ba382720360950502ef3c9009de230973/insruction-final.png" data-mid="148263205" border="0" src="https://freight.cargo.site/w/1000/i/8c8fee7b6fe56e813237a3d83585319ba382720360950502ef3c9009de230973/insruction-final.png" /> Instructions final result 🚦 Gradually increasing difficultySince we were aiming at different levels of proficiency between our users, we didn’t want them to be bored or feel it’s too hard, so we started the lessons from basic simple shapes&nbsp;you align with one click to complex layouts&nbsp;that need multiple steps to achieve. That was also the reason the hints (or step-by-step instructions) were hidden by default - You can always get more help, but you should try it yourself first, as it was a better learning and implementing experience.After analyzing the first results after the release, we believe it paid off - 81% of the users reached the last “thank you” slide. <img width="2560" height="2134" width_o="2560" height_o="2134" data-src="https://freight.cargo.site/t/original/i/17d0fd5a507080c1e0d7f84d49186b448c4c666ddc373f2942ba03b46ab40085/Mobile.png" data-mid="148264846" border="0" src="https://freight.cargo.site/w/1000/i/17d0fd5a507080c1e0d7f84d49186b448c4c666ddc373f2942ba03b46ab40085/Mobile.png" /> More Complex levels <img width="3840" height="16062" width_o="3840" height_o="16062" data-src="https://freight.cargo.site/t/original/i/db39dfbe8fe16a51b7bcd3e6baecc9282ca3bd751020a48c0d8a378b5f8439d1/More-lessons3.png" data-mid="148264971" border="0" src="https://freight.cargo.site/w/1000/i/db39dfbe8fe16a51b7bcd3e6baecc9282ca3bd751020a48c0d8a378b5f8439d1/More-lessons3.png" /> More Levels 💭 Thoughts for the futureSince it was our first time to make a product playground, a lot of things failed, took more time than expected and new problems occurred along the way. I believe it’s part of the fun with those kinds of things, especially in a startup environment. Yes, the schedule is crazy at times but it pushes you further and you’re allowed to make mistakes. We were a small, very committed team that had our users in mind all the way through, and it really paid off. The comments were amazing and asked us to do this more often. This could be an amazing learning opportunity for new features or even for new users that consider paying for the pro version of the product. The potential is endless!What we learned1. Less is more - Keeping it simple and clean, even copy wise, makes a huge difference for users. We tested a few versions with people in the office and it was amazing to see how small changes increased or decreased resolve time for the same lessons.2. Next time - adding a guiding tool (like Pendo). This will allow us to do more complex lessons and track the process better3. Communication and trust - that was the most crucial part working on it. No bad ideas, let's just try and see if it works. I felt so privileged to work with such amazing professionals4. Testing is everything - When you’re on the inside, you don’t have a clear view of what you’re doing, Seeing people test the product reveals weak spots and unclear instructions. 5. Done is better than perfect. Sometimes it's ok to let small things go for the sake of the bigger picture. Link to live project Thank you!&nbsp;✨️ https://jeyness.com/Elementor-Experts-Platform Mon, 25 Jul 2022 22:25:53 +0000 Jeyness https://jeyness.com/Elementor-Experts-Platform Elementor Experts Platform <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/061c13b97744cb976839a0b41140182bf0a0cb32e4f85627fbd5332e23b20757/Home-Page-wide.png" data-mid="148763411" border="0" src="https://freight.cargo.site/w/1000/i/061c13b97744cb976839a0b41140182bf0a0cb32e4f85627fbd5332e23b20757/Home-Page-wide.png" /> Elementor Experts is a marketplace for web creators: developers, designers, marketers, content writers and all in between. You can offer your services to clients or your skills to other web creators (find people with skills that you’re missing or enlarge the capacity to work on bigger projects).This Project was made as a part of a UX Course at the Technion Institute of Technology in collaboration with Elementor My Role Research: competition, existing platform &amp; User interviewsInformation Architecture, User stories &amp; flowsUX design: Ideation, low fidelity UX, PrototypingUI design: Matching the existing brand &amp; Style guide TL;DR Redesign a marketplace for the Elementor web creators - designers, developers, marketers &amp; contant writers.&nbsp; Jump to UX protopype 🧨&nbsp;The Challange The Elementor Experts platform was already running on beta version, and had quite a few users. Some research was done but it wasn't in the company’s roadmap to take care of it in the near future, so I said I’ll give it a go myself, as part of my education. When I analyzed it I found a few things that need to be further examined:&nbsp;Navigation &amp; search - It wasn’t easy to find the person you need for the job. The filtering and categories were complicated and unclear and the view of the profiles (feed view and a specific profile view) were not planned in a complimentary manner.All profiles had the same layout, but not all users offer the same services. Maybe a designer's profile should look different from a content writer's profile?No reviews or ratings - it was lacking one of the most important things you need when you pay someone for a job - trust. Another challenge was the reasons behind even having this platform - it’s not profitable for Elementor. It was not made for profit, but to empower our users. Not everyone can open an Experts profile, it’s only open to the higher paying tiers of pro users. It could be a selling point but also a barrier or a quality control method. <img width="2560" height="1696" width_o="2560" height_o="1696" data-src="https://freight.cargo.site/t/original/i/2bec3d40bb8b871de5f378f85dacf042e612b7cf9f34ca429436ac23eda28486/Before---After.png" data-mid="148833292" border="0" src="https://freight.cargo.site/w/1000/i/2bec3d40bb8b871de5f378f85dacf042e612b7cf9f34ca429436ac23eda28486/Before---After.png" /> Before &amp; After: User Search page 🔍 Research After gathering conclusions from the competition and the existing platform, I went out to hear what our users think and how it and if it aligned with some of my assumptions. What I did: Casual Conversations To get the first thoughts and feelings and map the area. I wanted to see what are the most valuable questions I should ask when interviewing users. Long Interviews In depth conversation about the user needs and usage, worries and strengths. Some conducted by me, some were transcripts from previous research. Social Media CommentsUnfiltered added value from the users: complaints and feature requests. The Elementor facebook group is filled with very vocal and engaged users. <img width="2560" height="1936" width_o="2560" height_o="1936" data-src="https://freight.cargo.site/t/original/i/bc18dadd69b3ea8fa70a7035b40bedca411d7590e2a346d50e2952a2112e5222/concusions.png" data-mid="148863288" border="0" src="https://freight.cargo.site/w/1000/i/bc18dadd69b3ea8fa70a7035b40bedca411d7590e2a346d50e2952a2112e5222/concusions.png" /> Main Inerview Conclusions 🕵🏻 Who are our users? // PersonasBased on the interviews I defined 3 main user personas: Mike Delano, 22Young and inexperienced designer, just starting his career in designing and building websites. Melvin Shore, 34 A marketing influencer and a tutorial creator, also part on the affiliated program And our focus today:&nbsp;Sarah Walker, 27An ambitious and experienced developer, who’s looking for bigger projects. <img width="2560" height="1440" width_o="2560" height_o="1440" data-src="https://freight.cargo.site/t/original/i/a379153f405328e623b4d4c5ef914604aa4406ff6d8763094ca8c9b587392302/Persona-01.png" data-mid="148946454" border="0" src="https://freight.cargo.site/w/1000/i/a379153f405328e623b4d4c5ef914604aa4406ff6d8763094ca8c9b587392302/Persona-01.png" /> <img width="2560" height="1440" width_o="2560" height_o="1440" data-src="https://freight.cargo.site/t/original/i/35517cd7665ef1310b4a60a2ab42c70d904d254e3e3a571a54f1a878f6f42e8d/Persona-3.png" data-mid="148946456" border="0" src="https://freight.cargo.site/w/1000/i/35517cd7665ef1310b4a60a2ab42c70d904d254e3e3a571a54f1a878f6f42e8d/Persona-3.png" /> <img width="2560" height="1440" width_o="2560" height_o="1440" data-src="https://freight.cargo.site/t/original/i/fba9e2ad3adf54517ed344f718d396bb0add0c0e63c600cd8641599bd3dd4f8d/Persona-2.png" data-mid="148946455" border="0" src="https://freight.cargo.site/w/1000/i/fba9e2ad3adf54517ed344f718d396bb0add0c0e63c600cd8641599bd3dd4f8d/Persona-2.png" /> The three main user Personas 🌊 User Stories &amp; FlowsAfter mapping Sarah’s challenges and needs, I put them into user stories and created flows: <img width="2560" height="1562" width_o="2560" height_o="1562" data-src="https://freight.cargo.site/t/original/i/7829299b8f36c727ab9d07f366de2632847fc0a14069233a34be6bec7113dbb2/User-Stories-01.png" data-mid="149360595" border="0" src="https://freight.cargo.site/w/1000/i/7829299b8f36c727ab9d07f366de2632847fc0a14069233a34be6bec7113dbb2/User-Stories-01.png" /> <img width="2560" height="1562" width_o="2560" height_o="1562" data-src="https://freight.cargo.site/t/original/i/1c7c74b3e420a56ad7260a9f08a56b089d1fb820cd38e8f868c7ed226b0aeb6a/User-Stories-02.png" data-mid="149360596" border="0" src="https://freight.cargo.site/w/1000/i/1c7c74b3e420a56ad7260a9f08a56b089d1fb820cd38e8f868c7ed226b0aeb6a/User-Stories-02.png" /> <img width="2560" height="1562" width_o="2560" height_o="1562" data-src="https://freight.cargo.site/t/original/i/74746c9038494b2d7fa1a53f87213d878b81658b38030b50a6746245a4e60ee0/User-Stories-03.png" data-mid="149360597" border="0" src="https://freight.cargo.site/w/1000/i/74746c9038494b2d7fa1a53f87213d878b81658b38030b50a6746245a4e60ee0/User-Stories-03.png" /> Sarah’s user stories (Selected ones have flows) <img width="5664" height="3056" width_o="5664" height_o="3056" data-src="https://freight.cargo.site/t/original/i/1fe5348e9236a7bd01efad70f8cc852d408c8568d76a649d2ac673a633ca22a1/Flow02.png" data-mid="149094642" border="0" src="https://freight.cargo.site/w/1000/i/1fe5348e9236a7bd01efad70f8cc852d408c8568d76a649d2ac673a633ca22a1/Flow02.png" /> <img width="5664" height="3056" width_o="5664" height_o="3056" data-src="https://freight.cargo.site/t/original/i/cdd2b97c80054f2d8e3c374fd1edf03f0e0f3dd449983256f127e80f485e2ad1/Flow01.png" data-mid="149359656" border="0" src="https://freight.cargo.site/w/1000/i/cdd2b97c80054f2d8e3c374fd1edf03f0e0f3dd449983256f127e80f485e2ad1/Flow01.png" /> <img width="5664" height="3056" width_o="5664" height_o="3056" data-src="https://freight.cargo.site/t/original/i/df08661d22f52d85826d15958deb9af8f33ad85646410abbb8e5acc08821da96/Flow03.png" data-mid="149094643" border="0" src="https://freight.cargo.site/w/1000/i/df08661d22f52d85826d15958deb9af8f33ad85646410abbb8e5acc08821da96/Flow03.png" /> Sarah’s user flows 🏗 Information ArchitectureSarah’s needs helped me define the right architecture for this platform. After writing down the “must-have” features, along with the important and the nice to have feartures, I added some deligtes that will make the experiance more engaging and meaningful:Encouraging messages when setting up your portfolio or other first things - first payment, first message etc.Showcase new users on main page - “say hi and welcome them”Earning badges on activity - liking people’s projects, contacting other users, referring clients to other users, uploading X projectSkill tests with certificationsAwards and challengesPro to pro help - you can sign up to a program to help other user professionally - mentoring. You can also ask for help or a mentor for yourself.Getting awards on your projectsExpert challenges - competitions with prizesRecruiter help - matching between users and clients. I built the site map and added a small map for user profile needed contant: <img width="5020" height="2704" width_o="5020" height_o="2704" data-src="https://freight.cargo.site/t/original/i/c1f8e020cbc48c678c873bafb6a5ad905a81964558d5961cc73c88bd80876bd7/Site-map.png" data-mid="149129468" border="0" src="https://freight.cargo.site/w/1000/i/c1f8e020cbc48c678c873bafb6a5ad905a81964558d5961cc73c88bd80876bd7/Site-map.png" /><img width="5020" height="2704" width_o="5020" height_o="2704" data-src="https://freight.cargo.site/t/original/i/31bc3db105eb9074869e76a2b084ab41736820280cbf3be89011fc92a5b83d39/Site-map2.png" data-mid="149129469" border="0" src="https://freight.cargo.site/w/1000/i/31bc3db105eb9074869e76a2b084ab41736820280cbf3be89011fc92a5b83d39/Site-map2.png" /> Site map &amp; profile map 💡 Concepts &amp; TestsDifferent marketplaces already have a familiar look &amp; feel that users know how to navigate. The challenge was to tailor something unique to our users needs, without creating too much friction. I tried a few different options for the main screens and saw how they feel - do they emphasize the right things? Do the answer to our users needs and the business goals? <img width="5020" height="2704" width_o="5020" height_o="2704" data-src="https://freight.cargo.site/t/original/i/11190be463ffc49ca421c19f22e84e9f0856207cfe52f39c0e640d9128a0ef98/Projects--social-feed.png" data-mid="150777983" border="0" src="https://freight.cargo.site/w/1000/i/11190be463ffc49ca421c19f22e84e9f0856207cfe52f39c0e640d9128a0ef98/Projects--social-feed.png" /> <img width="5020" height="2704" width_o="5020" height_o="2704" data-src="https://freight.cargo.site/t/original/i/12bf69cd407cfed6ec66cfaa784df2b12e862d3d3e258de38ae004ad0f1a905d/Users-Profile-feed.png" data-mid="150777985" border="0" src="https://freight.cargo.site/w/1000/i/12bf69cd407cfed6ec66cfaa784df2b12e862d3d3e258de38ae004ad0f1a905d/Users-Profile-feed.png" /> <img width="5020" height="2704" width_o="5020" height_o="2704" data-src="https://freight.cargo.site/t/original/i/979c8b506622e4b3dadbacfa37919eb8183093ad75a47b5827267e01dbaf8daa/User-Profile-extenal-view.png" data-mid="150777984" border="0" src="https://freight.cargo.site/w/1000/i/979c8b506622e4b3dadbacfa37919eb8183093ad75a47b5827267e01dbaf8daa/User-Profile-extenal-view.png" /> Low fidelity concepts (project feed, user feed, user ptofile)&nbsp; <img width="5020" height="2704" width_o="5020" height_o="2704" data-src="https://freight.cargo.site/t/original/i/8d0656b4c4e9d1c09ee26e7976c04bb52af7e5a26b94d63f34eff8aa8baca88c/User-Feed-Tests.png" data-mid="149099880" border="0" src="https://freight.cargo.site/w/1000/i/8d0656b4c4e9d1c09ee26e7976c04bb52af7e5a26b94d63f34eff8aa8baca88c/User-Feed-Tests.png" /><img width="5020" height="2704" width_o="5020" height_o="2704" data-src="https://freight.cargo.site/t/original/i/7ff02859906eaac75f94a77f6c4dc66ab04e8eedfb5b68a1ab1f153f10a33816/User-Profile-Tests.png" data-mid="149099882" border="0" src="https://freight.cargo.site/w/1000/i/7ff02859906eaac75f94a77f6c4dc66ab04e8eedfb5b68a1ab1f153f10a33816/User-Profile-Tests.png" />UX / layout tests ⚡️ Final Results Link to UX protopype Those are the final UX screens I presented. Later, I added some UI &amp; Color, based on the Elementor web brand I created before, with some important adaptations to this platform needs. Scroll down and see more: <img width="5664" height="15096" width_o="5664" height_o="15096" data-src="https://freight.cargo.site/t/original/i/6d369796e2a406db50dde499bf134726f142d60006661a2b915caeaaecda7ee9/ALL-SCREENS.png" data-mid="149103298" border="0" src="https://freight.cargo.site/w/1000/i/6d369796e2a406db50dde499bf134726f142d60006661a2b915caeaaecda7ee9/ALL-SCREENS.png" /> Project UX Screens UI Final Results <img width="3840" height="2864" width_o="3840" height_o="2864" data-src="https://freight.cargo.site/t/original/i/5c30acaec3005fec34e35adffa32759f35cdcf5dbf03297447a3c5040c32aff1/COLOR-1.png" data-mid="149103299" border="0" src="https://freight.cargo.site/w/1000/i/5c30acaec3005fec34e35adffa32759f35cdcf5dbf03297447a3c5040c32aff1/COLOR-1.png" /> <img width="3840" height="2864" width_o="3840" height_o="2864" data-src="https://freight.cargo.site/t/original/i/a6d9de1da0c0809d3928c98908cb708029a4fda1ceed6e1681c83b70038ab42b/COLOR-2.png" data-mid="149103300" border="0" src="https://freight.cargo.site/w/1000/i/a6d9de1da0c0809d3928c98908cb708029a4fda1ceed6e1681c83b70038ab42b/COLOR-2.png" /> <img width="3840" height="2864" width_o="3840" height_o="2864" data-src="https://freight.cargo.site/t/original/i/37dcc86325483f745b2f40b1e04c8bce8f55567678fa7f8d13ad66b67dac69b4/COLOR-3.png" data-mid="149103301" border="0" src="https://freight.cargo.site/w/1000/i/37dcc86325483f745b2f40b1e04c8bce8f55567678fa7f8d13ad66b67dac69b4/COLOR-3.png" /> <img width="3840" height="2864" width_o="3840" height_o="2864" data-src="https://freight.cargo.site/t/original/i/514960df9f8e8d360a6ce97dc8282a073a5c1266420405335c25ce9c5568b848/COLOR-4.png" data-mid="149103302" border="0" src="https://freight.cargo.site/w/1000/i/514960df9f8e8d360a6ce97dc8282a073a5c1266420405335c25ce9c5568b848/COLOR-4.png" /> <img width="3840" height="2864" width_o="3840" height_o="2864" data-src="https://freight.cargo.site/t/original/i/d9d7111e33b4614d7850eca9e864c576e96be761e3c776a5432b0d9710f5656a/COLOR.png" data-mid="149103303" border="0" src="https://freight.cargo.site/w/1000/i/d9d7111e33b4614d7850eca9e864c576e96be761e3c776a5432b0d9710f5656a/COLOR.png" /> Screens in color &amp; Mobile VersionsThank you! ✨ https://jeyness.com/Updated-work Mon, 15 Jul 2024 16:08:13 +0000 Jeyness https://jeyness.com/Updated-work <img width="1204" height="1010" width_o="1204" height_o="1010" data-src="https://freight.cargo.site/t/original/i/252161286241d600285345f5cf64573beb3051b6d1fbc8c2fd807ce3336f8243/Hello-BG2.png" data-mid="214668635" border="0" src="https://freight.cargo.site/w/1000/i/252161286241d600285345f5cf64573beb3051b6d1fbc8c2fd807ce3336f8243/Hello-BG2.png" /> <img width="2160" height="2160" width_o="2160" height_o="2160" data-src="https://freight.cargo.site/t/original/i/1852809cfa43f7bc2ab2ce90e12da83efda57bfda537f5343a395c243a273ef6/Preview32x.png" data-mid="214668989" border="0" src="https://freight.cargo.site/w/1000/i/1852809cfa43f7bc2ab2ce90e12da83efda57bfda537f5343a395c243a273ef6/Preview32x.png" />Test Creation Flow Rethinking the core flow of the platform <img width="2160" height="2160" width_o="2160" height_o="2160" data-src="https://freight.cargo.site/t/original/i/27f7031bbb74ea886062884c63e6c9ad18ca3f24e16e09587a821b871bcf71c1/Preview-timely.png" data-mid="214669052" border="0" src="https://freight.cargo.site/w/1000/i/27f7031bbb74ea886062884c63e6c9ad18ca3f24e16e09587a821b871bcf71c1/Preview-timely.png" />Pricing model update Introducing new pricing &amp; paywall for features <img width="2160" height="2160" width_o="2160" height_o="2160" data-src="https://freight.cargo.site/t/original/i/a1582191ec41e7cc27ead8c3579a20e163f9505a7d41a8111890be6ab189c607/Preview42x.png" data-mid="218967318" border="0" src="https://freight.cargo.site/w/1000/i/a1582191ec41e7cc27ead8c3579a20e163f9505a7d41a8111890be6ab189c607/Preview42x.png" /> URL split testing Beta Program (coming soon!)Building a beta program around a feature release <img width="2160" height="2160" width_o="2160" height_o="2160" data-src="https://freight.cargo.site/t/original/i/426c6dfa0c50b3f8ec46f3a56d8f01f045c77ebb3269cb4c4ffa790ea6814f9b/Preview32x.png" data-mid="218967317" border="0" src="https://freight.cargo.site/w/1000/i/426c6dfa0c50b3f8ec46f3a56d8f01f045c77ebb3269cb4c4ffa790ea6814f9b/Preview32x.png" /> Test reporting revamp&nbsp;(coming soon!)How to make complicated data simple and actionable <img width="1080" height="1080" width_o="1080" height_o="1080" data-src="https://freight.cargo.site/t/original/i/f5a33560b382fda21bcbb1bf13099139507c028e73f4533f0e88e8060afd82ef/Preview3.png" data-mid="214668632" border="0" src="https://freight.cargo.site/w/1000/i/f5a33560b382fda21bcbb1bf13099139507c028e73f4533f0e88e8060afd82ef/Preview3.png" />Elementor Experts PlatformMarketplace Platform for Web Creators <img width="1080" height="1080" width_o="1080" height_o="1080" data-src="https://freight.cargo.site/t/original/i/9bd92252ee93ccfbe48f642c494aac093a772d0c10f7a95b9804f66b64eb1543/Preview4.png" data-mid="214668634" border="0" src="https://freight.cargo.site/w/1000/i/9bd92252ee93ccfbe48f642c494aac093a772d0c10f7a95b9804f66b64eb1543/Preview4.png" />Elementor Website Design SystemWeb Design System <img width="1080" height="1080" width_o="1080" height_o="1080" data-src="https://freight.cargo.site/t/original/i/f97922eb35a65a84985384be39861749a814671aaed5ccaf8a176aef58c86a1d/Preview1.png" data-mid="214668631" border="0" src="https://freight.cargo.site/w/1000/i/f97922eb35a65a84985384be39861749a814671aaed5ccaf8a176aef58c86a1d/Preview1.png" /> Containers PlaygroundNew Product Feature Playground <img width="1080" height="1080" width_o="1080" height_o="1080" data-src="https://freight.cargo.site/t/original/i/1f168ca35e40a9e654b73f3c2b14267394560a41b4c04531ced1a32632585f17/Preview.png" data-mid="214668630" border="0" src="https://freight.cargo.site/w/1000/i/1f168ca35e40a9e654b73f3c2b14267394560a41b4c04531ced1a32632585f17/Preview.png" /> Elementor Website RedesignProduct Website © Jey Tsymbaluk 2024 All rights reserved ︎&nbsp; ︎ ︎