Tools
Figma, Balsamiq, Illustrator
Loblaw
Redesign the digital asset publishing experience for content authors across Loblaw banners
Web
Enterprise
End-to-End UX/UI
About
UX & UI Designer • Fall 2021
I joined the Customer Engagement Solutions (CES) Team as a
UX Design Co-op to support the end-to-end design of the
digital asset picker of a third-party content management tool.
Throughout the 4-month internship, I had the amazing opportunity to work on the DAM Asset Picker 2.0 Redesign as my core project. Our project goal was to improve content authors' experience in uploading and publishing digital assets by reducing their work time by 50%.
I also worked on a number of smaller UX initiatives, such as redesigning the Return to Office App and file storage system UI during my internship.
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 via a third-party content management tool, which allows our customers to see different product photos on virtual flyers and many more mediums each week.
We heard frustration from users over the inefficient publishing processes, primarily caused by repetitive steps and inflexible settings.
Our team, CES, develops and maintains internal tools to drive corporate technological excellence, including this third-party content management tool. We started the DAM Asset Picker 2.0 project to capture users' pain points with the existing tool and create an efficient and delightful journey with 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 which supports a more efficient and flexible digital asset publishing workflow by eliminating repetitive steps and enabling additional functionalities.
I am unable to share the detailed deliverables and specifications publicly because the project is protected by a non-disclosure agreement. Please feel free to reach out and chat about my experience!
Users spent >20 minutes publishing an asset on average,
due to rigid folder structure and lack of device breakpoints.
Our research identified the current digital asset creation practices of the content authors and their major pain points. We adopted 3 methods to gather both quantitative and qualitative data to understand the problem space and justify our strategic priority:
01
Survey
Designed and distributed ~30 surveys to capture the level of satisfaction and average working time of content authors.
02
Observation + Interviews
Shadowed 3 users to understand their workflow, and inquired about the motivations behind specific actions.
03
Workshops
Mapped pain points to existing user journey and co-created the desired experience.
Multiple options were explored to reduce the number of repetitive steps in publishing digital assets.
After defining the user stories, I ideated a number of potential solutions with the Product Manager on how users upload specific digital assets and different ways of showing crop options. We decided on the design direction based on each option's:
-
Similarity to existing user practices
-
Technical feasibility and required time, with the input of developers
Ideation through quick sketches
I gave a demo with wireframes and gathered feedback to finalize the design option.
I created mid-fidelity wireframes to illustrate the overall structure and functionalities of the new asset picker.
I presented the deliverables to over 20 content authors and gather feedback via an online survey. Our team took this approach because we hoped to understand the potential concerns of the change in workflow from a larger audience within a tight deadline. Also, giving a recorded demo enabled users who could not attend the meeting to rewatch it and share their feedback.
Unexpected Challenge:
Users Know It All
Since we gave a demo before asking for feedback, users already knew how the new asset picker worked. As confusion was eliminated, most feedback we received were positive. We could not observe the potential hiccups for users who are new to the tool (See Lessons Learned on how I would have approached it differently!)
I created high-fidelity prototypes to illustrate the
simplified folder structure and flexible publishing across breakpoints for hand-off.
I incorporated users' feedback and designed high-fidelity prototypes to illustrate the visual design and interaction patterns of the user interface.
To achieve our design goals, the developers had to customize the tool. I created new visual components based on the design style of the current library of the third-party content management tool that the DAM Asset Picker sits in. We largely reused the design library to facilitate implementation.
A snippet of the design library
After our redesign, the average asset publishing time decreased by 50%.
With the streamlined workflow, users now spend 10 minutes publishing a digital asset instead of 20 minutes. With the vast number of digital assets on Loblaw banners' websites and apps, it is estimated hundreds of hours are saved for the production team.
Lessons Learned
📣 Be mindful of how we gather feedback
Our team collected user feedback with an online Microsoft Form after presenting the wireframes to a room of content authors on Zoom. We opted for surveys instead of usability tests in the first place because we could not schedule a representative number of sessions (we aimed for 5) in time. As the users have been briefed on some advanced functions and hidden tricks, they would think "Oh this makes sense!" and would not come up with any questions they might have without our demo.
If I could turn back the time, a hybrid approach might be more effective if we could schedule at least 2-3 usability tests before the demo. In this case, we could still capture users' initial interaction with the wireframes and gather diverse opinions from a larger audience within the given timeline. Design is never a zero-sum game. I could have been more flexible in combining different research and evaluation methods to get ourselves one step closer to the intended design outcome.
⏰ Trade-off between the "right thing to do" and efforts
Great design often takes time to craft and implement. It was fortunate that we could leverage the design library of the third-party tool. On the flip side, it could also be tempting to fully adhere 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 corestone to an intuitive user experience, it is worth the effort to discuss how we could implement the design while keeping the timeline and budget in mind.
P.S. I'm constantly learning how to balance the trade-offs between business, design, and technology. Perhaps my answer to this question will change over time!
Joining UXCOE...
Next Chapter • Jan - Jun 2022
After completing my internship, I returned to Loblaw as a part-time UX & UI Designer while studying for 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 systems
-
Many more challenges to come!