Technical Design

Investigation

My first goal was to determine an overarching framework and platform for the app's development.

As a web developer with React experience, I held a strong bias towards building Android and iOS apps using a common React Native codebase. However, with 85% of Armoire's user base on iOS, I also did not want to rule out the potential advantages of writing a native app on iOS only.

I spent the first two weeks of the project investigating the technical limitations of React Native by building a proof-of-concept prototype. I used the Expo Managed Framework to minimize development startup time and to also answer questions about the advantages and limitations of using it longterm vs a bare React Native app. The table below lists the technical considerations I weighed after two weeks of research and prototyping.

Proof of Concept

The proof of concept I created had a basic login screen, tab navigation, a closet screen with horizontal sliding sections, and the bones of a product details page. I also tested out image upload, state management with mobx, font customizations, and using Sass as a styling preprocessor.

Foundational UX Development

For the first month of the project, I focused on increasing the total surface area of the app by developing its information architecture and global UI components.

Information Architecture and Navigation

One of the first UX challenges I had to tackle was determining how to translate the existing web app’s navigation structure into a mobile app hierarchy with only 5 main tabs.

As the screen grabs above demonstrate, the existing website hierarchy was extremely flat and shallow, which didn’t lend itself well to the limited real estate of a mobile app. The diagram below represents the core sections, screens, and actions I identified in the existing web app hierarchy.

I realized that certain “flows”, for example, reviewing or purchasing an item, would actually be best performed without the app tab bar present, to increase user focus on the task and decrease the chance of accidentally leaving before the action is complete. Those flows are highlighted above in teal.

In the second diagram I grouped those flows together into one “Modals” object, with the idea that these screens would live outside or “on top” of the tab navigator and be opened globally throughout the app. I also moved Referrals and Style Profile within the account section, as they weren't deep enough to warrant their own section. This reduced the number of contenders for the 5 spots in the tab navigator down to 6.

From here, I worked in the opposite direction, asking: when is it most important that a user have access to the tab bar? Other than initial login, I determined that this was right after a user adds an item to their case. At this point, a user needs visual confirmation that the item was added, and an understanding of where to view their “case” of selected items.

Due to the many connections between product pages, feed items, and user profiles, 5 of the 6 remaining app areas would need to navigate to a product page. These connections are shown below, followed by an updated diagram that highlights their presence in the information architecture.

Since Account was the only area that didn't require deeplinking to product pages, and because its actions would be completed least often, I opted to also move it “above” the tab navigator. To make sure it would still be visible to users, I added links to it in the Closet home page, Closet section page, and Case home page headers.

Technical Challenges

I had never used React Native or built a mobile app prior to this project; it naturally came with a huge number of technical hurdles and learnings.

JavaScript Performance

Compared to ReactJS, one of the biggest differences I discovered in React Native was the impact of unnecessary re-renders and JS performance oversights on the usability of the app. I had to debug rigorously and implement best practices, including performance optimizers like React Native FlatList, useMemo, useCallback, and props comparison to avoid unnecessary re-renders of components. Additionally, I learned to use the React Native InteractionManager to delay the start of JS-intensive tasks until after navigation transitions completed, in order to keep the perceived performance of the app high.

React Native Animations

CSS animations are not supported in React Native. To build core micro-interactions in the mobile app, I had to learn how to use the Animated framework in React Native. These animations could be offloaded to the native driver in order to keep the single-threaded JS queue clear, but in order to do so, I had to only animate native-supported properties (e.g. opacity, transform).

Working with WebViews

Certain features required using React Native Webviews to render existing web application screens or custom HTML and JS within the native app. In particular, I used Webviews to create a security-compliant native Stripe component (before Stripe released a React Native package), and to render the web version of our onboarding style quiz, which I didn't want to spend time duplicating for an app that would prioritize the needs of subscribed members.

Stripe Webview

Style Quiz Webview

Feed product previews

In the web version of the Style Feed, users had to navigate to a product page to get basic information about a product and add it to their Case. This process of navigating back and forth between the feed and product pages was exhausting and likely decreasing user satisfaction with the feed.

In the mobile app, I added a product preview drawer that allows users to see more information about an item when they click on it, without losing the browsing context of the Feed.

Auto-selecting user sizes

Even though all Armoire users complete a 15-minute style and size quiz when signing up, that information was not always being used to save users time in the product. I added functionality to pre-select a user's size on their profile when viewing product pages and product previews.

Qualitatively, Armoire users have expressed immense satisfaction with the mobile app, and many have even sent me personal "thank-yous" for the work. Quantitatively, the results are similarly encouraging.

• Members who use the mobile app in their first 30 days are 28% more likely to continue their membership after their trial, and 15% more likely to be retained month to month
• 83% of all Style Feed engagement occurs on the mobile app
• 75% of all active user engagement occurs on the mobile app

Reflection

I'm extremely proud of what I was able to produce in six months. This project required me to learn extensively, prioritize rigorously, and communicate my decisions effectively. It allowed me to flex both my engineering and UX design muscles towards an outcome that truly delighted Armoire's customer base.

Quite ironically, when this project was first pitched, I was hesitant to take the lead on it. I'm extremely grateful that my manager pushed me to do so and provided support and guidance throughout; I would not be the technologist I am today otherwise!