In our latest release we added support for iOS11 and the iPhone X, a major milestone for our development team. With that release I thought it was important to take a look back and see just how much the app [and team] has changed in my time at Ulta.
Key Initiatives:
Cleaned up, simplified, and modernized the codebase. Established a cadence for structuring code aimed for readability and understanding with emphasis on in-line comments explaining business logic. In most cases I tell my developers to structure their code linearly so that it mirrors what’s being displayed.
Identified redundancy in models/views and consolidated
Removed all non-essential third party code (that isn’t mandated by business partners)
Banned the use of cocoa pods and dependency managers.
Removed all unused and old assets / converted new assets to PDF (vector)
Created a “Core” which handles all our application/session/configuration management, as well as contains our own web services client
Established rules on native first UI/UX patterns with creative partners and an understanding of maintaining code over time e.g. I don’t want to be fixing custom controls with each OS release.
Compartmentalized storyboards based on features [performance/readability]
*It’s important to note that the above initiatives reflect my viewpoint on how a large enterprise project with multiple [sometimes fluid] team members should be treated. When creating my own apps I have similar from different goals and I can take certain liberties knowing only I will be maintaining the code.
The screenshots below are a few examples of said changes. On the left is version 4.0.1, the app I inherited when I started, and on the right, 5.2, our latest release.
Search bar changing height is iOS11 revealed some skeletons in our closet, primarily around trying to maintain opaque navigation and tab bars which led to layout issues. I also explored moving the search bar to the new searchController property on navigation controller, but the business ultimately wanted to maintain the title view approach/look. Search controller is nice though because it has support for large title, hiding when scrolling, etc.
Supporting iPhone X wasn’t too much effort because of my previous enforcement of using native views/controls and auto layout.
For P3 colors we changed obvious things at first: launch screen, app icon and primary brand colors. We also made a conscious choice to not make every brand color P3, like the typography saying “If everything is bold, nothing is bold” – and we wanted certain color to stand out. P3 conversion from a code perspective is simple, but from a conversion standpoint I still am not sure the proper method.
Converting Brand colors to P3 (view image below on P3 screen for accurate reproduction)
As with Cart, my team and I re-wrote checkout from the ground up. We set out to create a user-friendly, ada compliant, and reliable single-page checkout.
Features of note:
Skelton loading
Single page design
Smart address suggestions with usps recommendations
In the summer of 2017 we had just wrapped up a huge 5.0 release, which featured our brand new homepage redesign. With the momentum from that release we set out on an even larger challenge; to rebuild our cart & checkout experience from the ground up (or in this case from the backend services to the frontend UI).
We knew this was no easy feat, like the homepage, cart & checkout is an intricate part in the customer journey, and the core of our commerce business.
Features of note:
Global messaging (bag updates: removed, updated, etc) and Item level in-line messaging.
Enriched product cells with promotional and discount information.
Check out quickly with Apple Pay or PayPal.
Free gifts section with simple options to select variants.
When it was finally time to retire the existing homepage, we made sure to set the foundation for a rich future. To prepare for this future we set out on building a modular framework that could be customized and controlled completely by our business team members.
Features of note:
Modular design
Featured in the App Store for redesign!
Modules can be customized to give business more flexibility
Business controlled via CMS
Modules scale to device width (variable height and width)
On April 26th we hit the “Ready for Sale” button in iTunes Connect for version 4.1 of our flagship iOS app. This release was my first as Lead iOS Developer at Ulta Beauty, the culmination of weeks of hard work, and it includes some huge updates! The centerpiece of this release is Apple Pay, the easy, safe, and private way to pay for goods. We implemented this feature in our bag page, making buying that new must-have palette as simple as pressing your thumb. (Yes, I quickly learned all about makeup palettes)
The Experience:
Integrating Apple Pay took a ton of work from multiple teams across Ulta Beauty. Being new to the company I had to rely on my co-worker’s deep knowledge of our checkout experience to get me on-boarded, and together we worked closely to come up with a solution that satisfied our customers’ needs.
Our Director of Mobility, Joe Rago, has said on a few occasions that “Nothing will help you find the skeletons in your checkout flow closet like implementing Apple Pay.” This statement couldn’t be more true. We had to rework many steps in our checkout flow to make sure the Apple Pay experience was seamless from start to finish.
Nothing will help you find the skeletons in your checkout flow closet like implementing Apple Pay.
After many hours of development, design, countless QA testing, and user-experience work we were ready for our first orders! My first production order was for 2B Colours Mega Colours Mini Nail Polish, which I sadly returned to the store. more testing!
Since launching the app update, we have been featured in the App Store multiple times, including the coveted App Store front page spot, and a promotional spot in the Shopping category carousel. A huge accompaniment for the team.
Featured in the App Store:
So I want to again thank the team for all the hard work on this first release, everyone involved stepped up to the plate and delivered. The hard work isn’t over, we are continually improving the experience for our customers, and are excited for future releases.
If you haven’t tried it yet, go ahead and download the app today from the App Store. You can now find all things beauty, all in one place & check out in a snap with Apple Pay in the new iPhone app from Ulta Beauty.
