Using UX insights and design to refine the Microsoft Shopping experience to be more efficient and user friendly
There is a lack of savings integration on the Edge and Safari browsers, leaving business on the table for Microsoft. We are trying to fix this by building an extension that addresses this.
Design an easy to use interface for users in Safari to browse their favorite shopping sites, while helping them save money!
Completing the Safari extension project was fulfilling, reflecting on team goals and Microsoft's standards. We crafted a streamlined version, integrating market insights while retaining our focus. Given the chance, I would have explored alternative popup interfaces aligning with business goals for an enhanced user experience.
Building a brand new application to be used as an extension for Safari
UX Designer in charge for research, visual and interactive design, user testing, as well as the primary UI Designer
Primarily self directed, with input and feedback from peers, engineers, as well as Microsoft upper management
2 months
In the research phase, internal collaboration took precedence over meetings. We prioritized implementation and debriefed with developers. Much of this phase involved seeking clarity from developers and project managers on feasibility and legal compliance, especially regarding consumer protection laws, given our impact on customer orders and finances. Subsequently, we conducted user interviews to gather insights on shopping habits and project implications.
In the planning phase, our focus was on goal-setting and leveraging research findings. We dedicated significant time to understanding user pain points across different services and aligning with executive vision. Compliance with consumer protection laws posed challenges, particularly regarding mandatory screens like the popup, which we ultimately integrated into the extension.
At this point, with the research and planning phases coming to a close, we were now into the design stage, but this sort of ended up becoming half design half planning. We were ironing out all the findings from earlier into a task flow, and then a user flow in order to definitively get a flow that would allow for quick wireframe building.
Despite being the longest phase, it progressed rapidly due to continuous developments. Weekly design meetings facilitated swift evolution, resulting in 15 iterations before reaching a satisfying design. Each iteration refined various aspects including text, colors, layout, icons, and pop-ups.
Style Guide
With this final prototype completed, I finally got a chance to look back and reflect on my work. I believe I was able to meet the goals of the team, and meet the standard that Microsoft was looking for in a preliminary build for the Safari extension. We made a streamlined version that took many of the best elements from market competitors, while keeping a great deal of the focus on the existing implementation.
If I had been given the chance to continue working on developing more features for this project, I would've definitely looked into implementing features I personally use in a shopping extension, such as price history, in stock checker, and maybe even adding things like price comparison directly into the page so you can compare prices while looking at an item.
It was an awesome experience and my first real project in a professional setting, working with a big fortune 500 company like Microsoft, and really opened my eyes on different aspects to the UI and UX process.
Here's all the details of the project, organized by section. Due to the sheer volume of how much content is present, I wanted to put it in a separate category, so it wouldn't be overwhelming to read through!
Understanding user behavior, primary features, and business rationale is crucial for designing an extension catering to shoppers. Therefore, we followed these steps:
One of the first things I wanted to address was why certain elements were so big and, for a lack of a better word, intrusive. The biggest reason I found was mainly because there are some laws in place that would limit what actions consumer products are are allowed to perform in a single action, specifically due to data privacy laws.
Research revealed users are more likely to use prominently displayed cashback options, ignore pop-ups until checkout, and prefer a simple UI with fewer options. They spend a short amount of time on extensions and predominantly shop on computers rather than mobile devices.
Now that we have a baseline, thorough competition analysis is crucial. We aim to identify strengths and potential weaknesses in major players like Honey, Rakuten, and Karma. This allows us to leverage existing successes and enhance our extension.
This is the most enjoyable part for me, as it involves engaging with people to gather diverse perspectives on my research. The aim is to validate existing assumptions and discover new insights to shape the persona.
Reflecting on market and competition, we delved into concerns about other extensions like Honey. Interestingly, each extension faces distinct issues, influencing user preferences.
Initially, I focused on understanding why certain elements, like intrusive pop-ups, were prevalent. I discovered that data privacy laws mandated confirmation pop-ups for certain actions, despite conflicting with user research findings.
This was one of the main points where I as a designer had to make a tough choice:
In the end, we had to go with the pop up system, which was one of the most eye opening moments of the project, as it made me realize that a great deal of the "intrusive" nature of the competition was mainly because of this design compromise in order to ensure that more traffic would be driven to the action button, such as a pop up or a savings icon/button.
Moving into project production, I consolidated all gathered information into a task flow. This flow, based on established tasks, outlines the ideal user journey while omitting choices that would impact the outcome.
.png)
Now that we've created a task flow, we can now apply this to an actual user and see how it works when we have less favorable elements. Unlike the task flow, this one takes the less favorable outcomes into consideration as well, as the task focuses on the actual process, while the user flow will focus more on the project reality.
Drawing from extensive data and user interviews, along with input from the Microsoft team, we commenced building low-fidelity wireframes. These rough sketches laid out necessary screens in the project, with some undergoing revisions based on feedback.
With the baseline set, it was time to create prototypes for client presentation. While high-fidelity prototyping typically coincides with this stage, I'll be showcasing near-finished products. After nearly 15 iterations exploring different styles, colors, and layouts, I'll highlight the evolution of design elements.
-min.png)
With each iteration, various changes to the format were made, such as rearranging the coupon layout, the color, as well as adding or removing features such as the gift card feature. Some of these changes would come and go, with one example being the the color changes to the coupon tags.
.png)
Here are some of the different iterations we went through for the cashback buttons, testing out various colors and styles at the request of the client, most of which we immediately vetoed due to the contrast issues, such as having a yellow button with white text. Or the red themes in general given that they didn't match the rest of the style of the project.
Finally, we have the finished version of the design! 15 iterations and many meetings later, we came up with a UI that we were happy with. Now that this is finished, it was time to begin working on testing the usability of this design in order to figure out any additional errors or flaws in the logic of the design.
Usability tests with demo versions were supported by our development team. We aimed for a perfect completion rate and over 90% error-free interaction. Testing across various websites confirmed an almost perfect user experience, thanks to effective simulation in the prototype.
We selected websites with extensive coupon options meeting Microsoft's criteria. This facilitated natural testing, enabling users to apply coupons on familiar platforms. Despite differing user preferences, navigation remained consistent across all sites, involving landing page browsing and subsequent actions.
During usability testing, 4 out of 5 participants immediately clicked "apply" on the first coupon pop-up, streamlining the process as consent was given for automatic coupon application at checkout. The final participant engaged with the pop-up at checkout, underscoring the system's effectiveness. This positive response confirmed the design's logic, leading to the project's completion and subsequent handover to Microsoft's internal team for final implementation.
To wrap things up, we have the final style guide which combined two different color schemes into one design. This style guide encompasses the color and style choices of both dark and light mode, and kept itself consistent with many of Apple's own design language choices,
.png)
Learn more!
Coming Soon!
