{"id":29820,"date":"2021-11-29T09:23:18","date_gmt":"2021-11-29T09:23:18","guid":{"rendered":"https:\/\/www.thepicpedia.com\/blog\/adobe\/voltage-designs-for-the-rapid-growth-of-ecommerce-with-adobe-xd\/"},"modified":"2021-11-29T09:23:19","modified_gmt":"2021-11-29T09:23:19","slug":"voltage-designs-for-the-rapid-growth-of-ecommerce-with-adobe-xd","status":"publish","type":"post","link":"https:\/\/www.thepicpedia.com\/blog\/adobe\/voltage-designs-for-the-rapid-growth-of-ecommerce-with-adobe-xd\/","title":{"rendered":"Voltage designs for the rapid growth of ecommerce with Adobe XD"},"content":{"rendered":"
\n

Over the last few years, we\u2019ve seen a huge upsurge in ecommerce, with increased internet access and smartphone use around the globe acting as a major contributor, with more than half of all ecommerce sales now being done on mobile.<\/p>\n

COVID-19 safety concerns accelerated this momentum even faster. In response to necessary consumer safety demands, many retailers are in urgent need of an online shopping experience, built mobile-first.<\/p>\n

As art director at full-service design agency Voltage, I\u2019m at the forefront of this significant shift in consumer behavior. Voltage specializes in digital brand experiences that make an impact through ecommerce sites for web and mobile \u2014 our work spans beyond conventional online shopping sites to also include options for donations and fundraising as part of the overall experience.<\/p>\n

Pulling in these facets allows us to expand the story for our clients\u2019 customers and engage them in a deeper relationship with the brand \u2014 it\u2019s not just about selling a specific product, it\u2019s about making them part of the story.<\/p>\n

\"\"<\/p>\n

Voltage designed a mobile-ready shopping experience that tells the story of adidas\u2019 culture-transcending adicolor apparel.<\/p>\n

Effective storytelling as the foundation for a good UX<\/h3>\n

Every client is different, with different needs and a different story to tell. At Voltage, we always start with the story and let that guide the customers\u2019 experience \u2014 generating interest around a product using storytelling plays an important role in attracting customers. People often go to a site to find out more about the brand behind it, but it\u2019s the experience while on that site that sticks with them. This experience should support the overall story of that brand or product. If customers feel an emotional attachment to something, they\u2019re more likely to care about it \u2014 and share it \u2014 becoming brand advocates and now part of the overall story.<\/p>\n

We work closely with each of our clients every step of the way, from ideation to launch, and we\u2019ve established an efficient way of demonstrating human-centered ecommerce experiences and how sites will function for our clients. At Voltage, our mantra is \u201cshow, don\u2019t tell\u201d whenever possible, and Adobe XD helps us visualize the story from quick prototype to full build.<\/p>\n

\"\"<\/p>\n

When COVID-19 shut down the world, Chipotle was forced to suspend their fundraising program. Voltage helped them to re-open with a digital fundraiser option.<\/p>\n

Realistic, interactive prototypes with Adobe XD for instant feedback<\/h3>\n

Every Voltage project kicks off with a lot of research, starting with analyzing the customer journey from product page to check out on the client\u2019s existing sites, and identifying user experience issues that need to be addressed. For example, if 70 percent of a client\u2019s user base is shopping on mobile devices but they have a higher conversion rate with site shoppers using their desktop version, we need to understand why and dig deeper into the reasoning. This helps us simplify the experience for their customers, while making the voice of the brand heard, and ensuring it resonates with the target audience at the same time. The data that we gather informs our decisions.<\/p>\n

We then use Adobe XD to design our client\u2019s ecommerce sites, which enables us to create interactive prototypes and refine the functionality before we start the development process. Prototyping for ecommerce is immensely valuable as each little micro interaction can affect a client\u2019s bottom line. It also shows us where our designs can be improved. We quickly prototype interactions with a minimal amount of artboards in XD and then send it to the client as a simple link, where they\u2019re able to click through the design and experience it as if it were a live website. This prototyping capability lets us show exactly what would happen if a user pressed a button, expanded an accordion, played a video, or triggered a sound effect with an interaction.<\/p>\n

The commenting functionality in Adobe XD is beneficial for our clients to leave feedback on designs, and to be able to pin comments to specific elements as well as mark them \u201cresolved\u201d once they\u2019ve been updated. The ability to view archived comments helps to make sure we\u2019re addressing all feedback, even if they\u2019ve been previously marked as resolved.<\/p>\n

With XD, the design team can also share a link to the prototype with our developers, who can use the inspect mode in XD to dive right into our designs, see all the styling and any interactions we have applied, and even extract the CSS from specific sections. This kind of collaboration is a huge time saver.<\/p>\n

\"\"<\/p>\n

Force4Good is a turnkey SaaS platform, one of the many sites we have built using Adobe XD.<\/p>\n

Seamless XD integrations to speed up workflows and boost accessibility<\/h3>\n

We use XD and Photoshop together to design faster and improve the user experience of the websites we build for clients. We try to minimize the number of images on their sites to ensure they run smoothly and load faster. For this reason, we\u2019ve been using a lot more SVGs and fewer JPEGs and PNGs.<\/p>\n

To do this, we simply drag the image files from Photoshop into XD, drop them into our prototype, and \u2014 thanks to the integration with Creative Cloud \u2014 right-click on an image and select \u201cEdit in Photoshop\u201d for the advanced editing of product images and more complex graphics. Then we just save and sync changes back to XD in real-time. Especially when working on hero images, it\u2019s very helpful to do it all from within XD without having to switch between different programs. We can then seamlessly connect and share creative assets between apps with Creative Cloud libraries.<\/p>\n

Extending XD with plugins to enable automation and speed up iterations<\/h3>\n

Accessibility is another key factor when creating ecommerce experiences: If we\u2019re not designing for accessibility, then our clients could be missing out on customers. To ensure our sites comply with the Americans with Disabilities Act (ADA) Standards for Accessible Design, we use the Stark plugin for Adobe XD, which includes a contrast checker for colors and text, a colorblind generator, and exactly what conformant level a site has.<\/p>\n

We also use the Mimic plugin for XD to extract colors, fonts, and images from a client\u2019s site, which is helpful to kickstart designs if the client doesn\u2019t have a style guide. And if they do have a style guide, we use Mimic to make sure our design matches. It\u2019s another time-saver that boosts the team\u2019s productivity.<\/p>\n

Virtual photography with Adobe Dimension<\/h3>\n

In addition to XD, we also started creating our own 3D models in Adobe Dimension, which has been especially helpful during COVID-19 when we aren\u2019t able to do live photoshoots.<\/p>\n

3D prototypes are really beneficial in the concept phase, while virtual photography helps us show samples and products in environments that help consumers really \u201csee it\u201d in action. We think this will be super beneficial even post pandemic for clients who don\u2019t have budgets or timelines that can accommodate live photoshoots.<\/p>\n

Keeping up with fast-changing customer behavior<\/h3>\n

Ecommerce is a hugely competitive industry. We need to pull our clients\u2019 customers into the experience quickly, or they will simply move on. At Voltage, our goal is to create innovative shopping experiences, which help buyers find something quickly, purchase it, and engage them to become brand ambassadors.<\/p>\n

When we help our clients create good, frictionless shopping experiences, it increases their conversion rates and bottom line. When we allow shoppers to bring up a quick view of the product from a gallery and add it to the cart, without ever going to an individual product page, it tends to lead to a more seamless checkout flow. We are constantly searching for new ways, like this, to simplify customer shopping experiences for our clients.<\/p>\n

Adobe XD helps us communicate our vision with stakeholders and developers faster than ever before, reducing the friction in the hand-off process by eliminating multiple meetings to review designs with developers, as well as the need to go back and make changes to designs after the fact. Because developers are able to export assets and inspect elements directly within the prototypes, they never have to go back and request changes from a designer. This helps save our clients\u2019 budget and get their sites launched faster.<\/p>\n

Additionally, the improved workflow makes it easy to prototype, collaborate, and get approval on new shifts, patterns and interactions that can make all the difference to a client\u2019s online store, while ensuring it\u2019s fully accessible to consumers with disabilities.<\/p>\n

In a world in which ecommerce is ever-changing, this gives us the ability to change even sooner, before trends show shifts in consumer behavior. Our toolset and our expertise helps businesses grow despite challenges, clients stand out from the competition, and websites handle whatever comes next.<\/p>\n<\/div>\n

Source : Adobe<\/p>\n","protected":false},"excerpt":{"rendered":"

Over the last few years, we\u2019ve seen a huge upsurge in ecommerce, with increased internet access and smartphone use around the globe acting as a major contributor, with more than half of all ecommerce sales now being done on mobile. COVID-19 safety concerns accelerated this momentum even faster. In response to necessary consumer safety demands, …<\/p>\n","protected":false},"author":1,"featured_media":29825,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[],"_links":{"self":[{"href":"https:\/\/www.thepicpedia.com\/wp-json\/wp\/v2\/posts\/29820"}],"collection":[{"href":"https:\/\/www.thepicpedia.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.thepicpedia.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.thepicpedia.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.thepicpedia.com\/wp-json\/wp\/v2\/comments?post=29820"}],"version-history":[{"count":1,"href":"https:\/\/www.thepicpedia.com\/wp-json\/wp\/v2\/posts\/29820\/revisions"}],"predecessor-version":[{"id":29826,"href":"https:\/\/www.thepicpedia.com\/wp-json\/wp\/v2\/posts\/29820\/revisions\/29826"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.thepicpedia.com\/wp-json\/wp\/v2\/media\/29825"}],"wp:attachment":[{"href":"https:\/\/www.thepicpedia.com\/wp-json\/wp\/v2\/media?parent=29820"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.thepicpedia.com\/wp-json\/wp\/v2\/categories?post=29820"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.thepicpedia.com\/wp-json\/wp\/v2\/tags?post=29820"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}