Header
Loblaw
Redesign the digital asset publishing experience for content authors across Loblaw banners
Web
B2B Enterprise
End-to-End Design
About
UX & UI Designer • Fall 2021
I joined the Customer Engagement Solutions (CES) Team as a UX & UI Designer to support the end-to-end design of the digital asset picker for a third-party content management tool.
I had the opportunity to work on the DAM Asset Picker 2.0 Redesign as my core project. Our goal was to enhance the content authors' experience in uploading and publishing digital assets by reducing their work time by 50%.
Additionally, I contributed to several smaller UX initiatives, including redesigning the Return to Office App and the file storage system UI.
Project Overview
Role
End-to-end design, including research, discovery, ideation, prototyping, and evaluation
Teams
UX Design, Development, Production, Marketing
Duration
12 Weeks
OS
Website, Third-Party Tool Integration
Tools
Figma, Miro
As a major Canadian retailer, Loblaw creates and publishes digital assets across various digital touchpoints using a third-party content management tool. This allows our customers to view different product photos on virtual flyers and other mediums each week. We received feedback from users expressing frustration with the inefficient publishing processes, mainly due to repetitive steps and inflexible settings.
Our team develops and maintains internal tools to drive corporate technological excellence, including this content management tool. We initiated the DAM Asset Picker 2.0 project to address users' pain points with the existing tool and to create a more efficient and enjoyable experience by applying UX best practices.
Design Challenge
How do we help content authors to streamline their digital asset publishing workflow?
Solution
We redesigned the DAM Asset Picker 2.0 to support a more efficient and flexible digital asset publishing workflow by eliminating repetitive steps and adding new functionalities.
I cannot share detailed deliverables and specifications publicly due to a non-disclosure agreement. Please feel free to reach out and chat about my experience!
Users spent >20 minuteson average publishing an asset due to a rigid folder structure and the lack of device breakpoints.
Our research identified the current digital asset creation practices of content authors and their major pain points. We used three methods to gather both quantitative and qualitative data, allowing us to understand the problem space and justify our strategic priorities:
01
Survey
Designed and distributed 30 surveys to capture content authors' satisfaction levels and average working times.
02
Observation + Interviews
Shadowed 3 users to understand their workflow, and inquired about the motivations behind specific actions.
03
Workshops
Identified pain points in the existing user journey and co-created a more desirable user experience with stakeholders.
Multiple options were explored to streamline the publishing process for digital assets, focusing on reducing repetitive steps.
After defining user stories, I collaborated with the Product Manager to ideate several potential solutions for how users could upload specific digital assets and be presented with crop options. We made design decisions based on each option's:
-
Similarity to existing user practices
-
Technical feasibility and required time, with input from developers
Ideation through quick sketches
I gave a demo with wireframes and gathered feedback to finalize the design option.
I developed mid-fidelity wireframes to visually communicate the structure and functionality of the new asset picker.
To gather feedback, I presented the wireframes to over 20 content authors and conducted an online survey. This approach allowed us to understand potential concerns about the workflow change from a broader audience within a tight deadline. Additionally, providing a recorded demo enabled users who could not attend the meeting to review and share their feedback.
Unexpected Challenge:
Users Know It All
Having provided a demo before soliciting feedback, users were already familiar with the new asset picker's functionality, resulting in mostly positive feedback. However, this approach did not allow us to observe potential challenges for users new to the tool (See Lessons Learned on how I would approach this differently in the future.)
I designed high-fidelity prototypes to demonstrate the simplified folder structure and the flexible publishing options across different breakpoints.
Incorporating user feedback, I developed high-fidelity prototypes showcasing the visual design and interaction patterns of the user interface.
To align with our design objectives, developers customized the tool, requiring the creation of new visual components. These components were designed to match the existing design style of the third-party content management tool that houses the DAM Asset Picker. Leveraging the design library of the third-party tool, we streamlined implementation by reusing existing components where possible.
A snippet of the design library
Following our redesign, the average asset publishing time was reduced by 50%.
With the streamlined workflow,users now spend 10 minutes publishing a digital asset instead of 20 minutes. Given the significant volume of digital assets across Loblaw banners' websites and apps, this improvement is estimated to save the production team hundreds of hours.
Lessons Learned
A hybrid reserach approach can provide more comprehensive feedback and insights for design improvements.
Our team collected user feedback using an online Microsoft Form after presenting the wireframes to a group of content authors via Zoom. We chose surveys over usability tests initially due to time constraints, as we couldn't schedule the desired number of sessions (ideally 5) promptly.
Since users had been briefed on some advanced functions and hidden features, they often found the wireframes intuitive during the demo and didn't raise many questions. Looking back, a hybrid approach involving 2-3 usability tests before the demo might have been more effective. This approach would have allowed us to capture initial interactions with the wireframes and gather diverse opinions from a larger audience within the given timeline.
While leveraging existing design libraries can expedite development, it's crucial to balance the need for customized components that enhance the user experience
Crafting great design often requires time and thoughtful implementation. Fortunately, we could leverage the design library of the third-party tool. On the flip side, it could also be tempting to fully adhere to our design to the existing visual components available so the developers could reuse the code.
When we navigate the conversation on customization with the developers, it is important to understand the purpose behind our initial design and whether using alternatives affects the usability of the product. If the customized component is an irreplaceable cornerstone to an intuitive user experience, it is worth discussing how we could implement the design while keeping the timeline and budget in mind.
Joining UXCOE...
UX & UI Designer • Jan - Jun 2022
After finishing my last project, I resumed working at Loblaw as a part-time UX & UI Designer while pursuing my Master of Information Program. I joined the newly formed UX Center of Excellence (UXCOE), which pioneers design culture at Loblaw as an internal consultancy.
I supported several projects of the Healthcare & Delivery, Site Reliability, and Dashboard teams on:
-
Creating end-to-end UX/UI design
-
Conducting usability testing and UI audit
-
Formulating UX strategies related to accessibility and business functions
-
Developing and maintaining design system