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 final prototype for the Safari extension project was a gratifying experience, allowing me to reflect on meeting team goals and aligning with Microsoft's standards. We successfully created a streamlined version, incorporating key elements from market competitors while maintaining focus on the existing implementation. If given the opportunity to extend the project, I'd probably would've explored alternative options in regards to the popup interface, and finding one that still met business goals, while potentially providing a superior 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, we were mainly working internally, so there weren't too many meetings, and instead, we focused more on implementation, and debriefing with the devs. A large part of this section was me asking the devs and PMs clarifying questions on what was feasible, and more importantly legal, as ensuring that we were following consumer protection laws was mandatory since we would be making changes to customer orders, affecting money. After this, we began interviewing users and collecting info on their shopping habits and the implications this would have on the project
In the planning phase, we were mainly concerned with goal setting and taking the information we gathered from the research earlier. We spent a lot of time trying to figure out what caused the various pain points the users experienced when using different services, and how we could expand upon these while maintaining the vision set by the executives.
This proved to be a bit of an issue, since the consumer protection laws make it so that certain screens are required in order to get traffic on the extension, such as the notorious popup, which is something we as a team eventually conceded on and included as well.
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 went by quite quickly thanks to the constant developments that occurred throughout the process. Each week, we'd have at least two design meetings, where we went over a huge list of changes, and the design evolved very rapidly in this stage.
We went through a total of 15 different iterations before we finally landed on one that we were all satisfied with. With each iteration, we learned more about how best to refine the "edges" of the project. We went through text changes, color changes, layout changes, icon and even pop up changes. Basically everything was iterated upon until we reached a design we were all happy with.
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!
Given that I am designing an extension that will be used by just about anyone that would do shopping, its really important to understand user behavior, as well as primarily used features, and also business reasonings as to why certain functionality is in place. As such, we took the following 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've established a baseline, its important to actually analyze the competition thoroughly and understand what each of them do right and what could potentially be seen as a weakness. This isn't to say any of these options are particularly bad in any way, but its more so that we can take what's already working, and potentially expand on or improve upon with our extension.
Here are the three major players in the space once again, Honey, Rakuten and Karma, and a main strengths and weaknesses of these three industry giants.
This is probably the most fun part for me, since it lets me just talk with people and get a bunch of new perspectives on the research I've conducted up until this point.
The goal of this bit of research is to get a better understanding based on the assumptions I have so far and see what all matches up and what all is new information that I can use to build the persona.
Taking a quick trip back to the market and competition, we sat down and addressed some of the major concerns people have with other extensions such as Honey. Interestingly, a lot of them have different issues, that each play a role in why they aren't used over another option.
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, and as a result, required a pop up to be confirmed before the coupons could be added to check out, but if went against a lot of what the user research showed.
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.
Time to get into the actual production of the project, starting by taking all the information we've gathered up until this point into one task flow. Based on the established tasks, I have mapped out a task flow, which will give us an example of the ideal flow the user would go through, although this is going to be omitting all the choices, or at least the ones that would affect 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.
Using ALL the previous information gathered, through all the data and the interviews with various users, as well as the Microsoft Team, it was FINALLY time to start building out some low-fidelity wireframes. I drew these screens out as a rough way to build a layout of all the necessary screens in the project, and some screens were revised and reiterated upon, so some of the wireframes reflect that as well.
With the baseline established, it was time to start actually assembling some prototypes to present to the clients. Technically, this section and the high-fidelity prototyping section go hand in hand, but in this case, I'm going to be using the high fidelity section to show off the near finished products. Given that we went through almost 15 different iterations, testing out various styles, colors, and layouts, it makes sense to show the change in the 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.
Conducted usability tests using demo versions of the design, aided by a skilled development team. Expected a 100% completion rate and over 90% error-free user interaction, as the extension's flow was straightforward. The testing, performed on various websites like Macy's, JCPenny, Nordstrom, Walmart, Crate & Barrel, and Target, confirmed an almost perfect user experience, attributed to the effective simulation of the purchasing process in the prototype.
The chosen websites were selected for their extensive range of coupons and promotions compatible with Microsoft's criteria. This choice allowed users to apply coupons on familiar platforms, ensuring a natural testing environment. Despite varying website preferences among users, the navigation flow remained consistent across all sites, involving browsing the landing page and subsequent user 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!
