Fashion retailer designs better e-commerce UX with Adobe XD

Illustration of online shopping experience

Image source: Adobe Stock / Sammby.

By Paolo Duarte

Posted on 11-23-2020

Paolo Duarte was recently a guest on XD Meet the Makers, where he talked about real-world prototyping with Adobe XD. Below, he shares more of his experience working with the platform and the innovative solutions he’s found for creating better design workflows.

GAP has been around for more than 50 years, and has become a staple in American pop culture. In my opinion, much of this success is due to our approach to customer experiences – our main goal is always to provide an amazing digital experience for anyone and everyone, wherever they are, which has resulted in a very loyal customer base. Inclusivity is at the heart of the company, and this carries across the entire portfolio.

To make sure that we are also loyal to our customers, as a design team, we focus on building a brand that feels elevated yet personal. We try to ensure that our design stays up to date with industry trends that retail customers find attractive. And we assist them in finding exactly what they’re looking for according to their taste and shopping preferences. However, there are always design challenges that we must address and find solutions for.

One of these design problems that we identified and solved for surrounded having smaller teams that focus on specific audience segments. This has sometimes led to disconnects between designers, and so we dramatically improved our collaboration approach. This big challenge was really many little challenges, in one: Versioning, overrides, too many moving parts in too many different places, and using old templates from previous seasons all needed to be addressed.

This is where I saw room for improvement. To solve these challenges, our design teams have had to rapidly shift to working with design systems to define a more consistent brand presence – thankfully, Adobe XD makes it really easy to manage them. It allows our team to collaborate conveniently while keeping old versions intact. Since projects live in a master document, anyone that is involved in the design process can be added and have access, which solved our problems of updating versions to a shared document. Especially at the moment, amidst a pandemic where remote work is the new standard, XD has helped us work more effectively together and individually.

Let’s XD

Learn Adobe XD with in-depth tutorials and quick tips and tricks.

Click here

An improved workflow with Adobe XD

Personally, I have been using XD since the early beta days. I made the transition from industrial design to UX on my own, so XD was the perfect tool to learn the practice and processes of UX, since it was available in my Adobe Creative Cloud account. Then early this year, (right before the pandemic really hit), I decided to take a leap of faith and propose that we make the switch not only in my immediate team, but also the entire online design team. Since then, we’ve been able to get my team to fully transition to XD with stakeholder buy-in.

It took about one month to build a specific design system for the team’s needs and about two weeks to fully adopt and adapt to the tool. While we’re still working on converting the whole extended team, we’ve already seen significant success in the business due to how much more productive we can be using XD. We have gained back a lot of time that we normally would have spent working on extra steps to complete processes that took a lot of time out of the work day. With the pandemic, our business needs are constantly shifting, sometimes very close to deadlines. With XD, we’re able to make changes quickly and keep key design elements that are important to the brand for how we show up on screen.

Duarte’s team used design systems to create a recent online campaign and were able to adapt and make changes quickly by modifying components in XD.

Our favorite features that have totally revolutionized our process are dynamic components, cloud collaboration, and link sharing. With components we’ve been able to make significant updates to big projects with lots of screens and assets. This has been a huge time saver for designers and results in faster delivery and approvals. Cloud collaborating has also improved our workflow because we can actually help each other and build something great together and not just put together pieces of a puzzle separately. In addition, we have now moved our review process to shared links, so we can get feedback on the assets directly and carry on a conversation to address it. Now all we have to do is update the asset that needs changing and update the link. Our stakeholders only need to refresh their browser to see the changes.

Adobe XD

Create and share designs for websites, mobile apps, voice interfaces, games, and more.

Learn more

We used to have a ton of steps that went into collaboration at the design, review, and hand-off level. We would have endless email threads with multiple people sharing attachments that would sometimes get lost. With XD, we truly work together in the same files and same links. We can throw ideas together quickly, and then refine the details later in the same document. This approach helps us get designs approved by our manager quickly before showing the creative to the rest of the team and stakeholders. Once we’re in a good place, we then create a link to share for review to continue the collaboration. Here we can come to agreements and final updates quickly with visibility to everyone involved. Thus, XD has helped significantly improve our workflow, productivity, and creativity.

Components linked to the design system can be easily updated in XD to localize campaigns for different, non-English speaking markets.

Creating high-fidelity, interactive prototypes

Also, showing high-fidelity work has become a lot more attainable at an earlier stage. We’ve been able to present our ideas in a more extensive and effective manner, which resulted in stronger feedback. We had requests from our stakeholders that we explore some more interactive ways to get our customers’ attention on our website, and with XD we were able to explore ideas a lot quicker than we have in the past. This impressed our leaders and led to our work being approved for production a lot sooner than we expected.

As designers, we sometimes have a lot of ideas that we sketch out on paper and with XD, prototyping something quickly has become easier than ever. Designers can make multiple iterations for testing quickly before narrowing it down to one-to-three options to show to leadership and stakeholders. I believe saving time on logistics helps designers focus on being more creative and enhancing the customer experience. Anything is possible in that first approach with XD. Even the craziest of ideas can be brought to life and tested. This helps designers grow and learn from what works and what doesn’t. The same applies at a leader level. When trying to show ideas to other designers, it’s best to come prepared with a design that can tell the story on its own. This is also true for the relationship with developers: You get a much better idea for what is feasible and help one another stay on track to bring beautiful experiences and visuals to life.

Small changes made in XD apply to all assets linked to the campaign – a huge time saver.

Change driven by diversity

The UX design industry is ever-changing and growing. Above all, I believe that design should always be at the center of the business because what keeps it going is the end customer. Now that the digital world has suddenly become the most important solution to the way humanity moves forward, we need to focus on building UX teams with people from different cultural and professional backgrounds because diversity drives change. I am a full supporter of people that find their love and passion for UX design in other areas of their life or in a different career because that means the individual can relate to a bigger audience.

This also means different perspectives and different approaches that can help teams think of stronger solutions to the challenges we are all designing for. We are all humans designing for other humans and we should always keep that connection in mind. Yes, data is what drives design decisions but let’s not forget that empathy allows our mind to think of genuine ideas with problem solving as the end goal.

Topics: Customer Stories, Insights & Inspiration, Retail, Creative Cloud, Creativity, Creative Inspiration & Trends, Design, Enterprise Customers

Products: XD, Creative Cloud,