OVERVIEW
DURATION: 4 Months (April 24-July 24)
TOOLS: Adobe XD, Figma, Miro, Devops
COLLABORATOR(S): Design (me), Business Analyst (for requirements gathering), Development
Background (The Why)
This change came from a variety of wants and needs. First, this UI refresh was coming alongside an update to our registration process. Registration, for Sub-Zero, refers to an appliance being registered by the owner and includes contact and residence information. Our roadmap was set to roll out registration in two phases, one focusing on form updates like auto-address population, and the other phase was for users to be able to see all registered products in the app, regardless of their wi-fi/connection status. This was a change from what users were previously able to do in the app, which was limited to viewing only wi-fi capable appliances.
With this addition came the need to design new cards to what we call the “appliance list” which is a list of appliances the user has connected, or in this case, registered or connected, to their account. Because registered appliances would not have the same status that a connected appliance would have, we needed to create new cards. We also knew from previous research that users wanted to see all their appliances in one place, regardless of connected status. So, putting them on the list was a must. In addition to registration, we had a few features in the future that would require, or at the least would be helped by, changing the UI/UX of the app.
On top of all the above, our app also looked outdated. Although this is a lesser concern than what has previously been mentioned, our users purchased our product in part because it’s a luxury brand, which is something Sub-Zero prides itself on. As users of our brand, we wanted to deliver the feeling of modernized luxury across our digital products as well. With all the above in mind, it was determined that a change was necessary.
MOVING AWAY FROM XD
This switch happened at an interesting time in our company. Our team, as well as other teams within the company, had just been given Figma licenses. Previously, we had done all our design work in Adobe XD. As rumors began swirling around Adobe sunsetting XD and the products lack of support, our organization decided to bite the bullet and make the change.
Prior to the change, I had been working with an outdated design handoff process, which I inherited from other designers on my team. This design handoff system worked well enough for waterfall style projects that our on-appliance designers were used to working on, but it was not well suited for the more agile design/development cycle that I was supporting for our mobile app. At that point, we were aiming for monthly handoffs to give ourselves some sort of structure. For context, this is the pattern I would follow after high fidelity designs were done for every new feature that was designed…
Create a local document of the new feature design work
Add that local XD file to a monthly handoff folder
Included in that monthly handoff folder were other folders including XD files (which had folders for updated and archived; the new XD file would go in the updates, while all other previous monthly handoffs would go in the archived file), supporting documents, links, and graphic assets
When the design work for that month was complete, handoff the folder on a SharePoint site where developers had access.
If comments arose from final designs (which we tried to mitigate by using frequent meetings between myself and developers) the developers would need to send the file back to me or request a meeting.
Needless to say, getting access to Figma, a product I was already familiar and comfortable with, was a relief. With the change came structure I could help define and create that worked well for both myself and the development team I worked with.
UX vs UI
The designs that were made in this refresh were almost purely UI except for one key element. In the previous design of the app, we used a hamburger menu so that users could navigate around and through the app. To accommodate future features, we needed an easier way for users to locate and access their account. In addition, and in an effort to modernize, adding bottom navigation was a welcome addition.
Thinking About Accessibility
COLOR
As I worked on the UI refresh, accessibility was at the forefront of my mind. Although Sub-Zero, Wolf, and Cove all have iconic brand color, in a digital space, they are challenging to use and while maintaining color accessibility. Some, like Cove green, don’t pass color accessibility standards with text on or near them. One thing we didn’t want was to use brand colors for some products and not others, as we know people usually bundle kitchen sets together and have multiple appliances displayed in their app at once.
Instead, when thinking about a color theme/pallet, I decided to keep things neutral and minimalistic. Before we were using our brand colors more readily and even problematically in some instances. For now, we wanted to keep brand colors to a minimum. This upgrade also coincided with an update to our corporate website, which now uses minimal color as well.
TEXT SIZING
The other asset that we knew we needed to improve upon for accessibility is text sizing. With the previous design, when text was sized large on a device, we often dealt with overflow in narrowly defined areas. With the new design, I wanted to make sure that we would easily be able to size text both up and down comfortably. Not only is this standard and good design practice, but it is also incredibly important for our main user base, who trends more to the older 55 group.
Making it Happen
FROM XD TO FIGMA
The first step in making the new UI a reality was to take the current assets that live in XD and bring them over to Figma to start ideating and creating updates. As a team, we vetted and explored ways to do this without having to re-create components. After looking into a few Figma plugins and pricing out some companies who claim they can do these transfers automatically, it was determined that the best way would be to create the new components manually.
I exported the assets as PNGs from my XD style guide and brought them into Figma to start mapping out where changes were needed. From there, I was able to create new assets that matched a theme I created in conjunction with input from Marketing. After icons, text styles, and graphics were brought over, I created components for the rest of the style guide.
PREPARING FOR HANDOFF AND RELEASE
With the style guide created, the next step was creating the designs for the app with the new components. To keep thorough documentation for our products, design is responsible for keeping an up to date version of our most current version of the live app as well as archive past versions of the app to reference if we need at a later date. Some of the final images and their comparison from the old design are below.
Post Release UX/UI Feedback
“This app is vastly better designed in all respects than some of your competitors. It may sound silly, but this is not just a boon to customers, it signals a level of care and thoughtful design that is a great advertisement for your brand.”
“I see the app got a nice update so I downloaded it and re-added my appliances and I think the experience was much improved.”