Enterprise Web and iOS App

Primary Goal

Create an expense management platform that integrated with existing data sources and custom workflows.

My Process

User Flows, Data Model Creation, and Technical Vetting

Despite joining this project after the initial discovery phase, I collaborated closely with the client's UX Designer to create user flows for app features during our sprints. We also collaborated on his designs so that I could vet them for technical feasibility and whether changes would require adjustments to the core data being produced by the the API.

My preferred workflow involves deciding on the shape of the data required being kicking off a new feature, so that the team can work on the interface, front end, and back end simultaneously — vetting designs up-front is a small thing, but it makes that workflow possible.

Design System Creation

Incorporating the client's designer into our sprints meant that design system development and the core feature design took place simultaneously. Thankfully, following component driven development patterns enabled us to work in tandem. I could build out the components needed for the feature and establish some basic styles using global styling variables and mixins while my UX Design colleague was making final adjustments. As long as we were communicating well. Receiving the final designs normally just required a few adjustments to finish the feature — allowing us to complete features more quickly than a completely separate design development process.

Key Features of the Design System

• Global variables — setting app globals for color, spacing, and text is important for maintainability and scalability.
• Mixins/Functions — using built-in Sass functionality to create styling utilities that make it easier for either myself or a Front End Developer to update the styling while following the established patterns of the app.
• Component Modules — establishing core components that are utilized everywhere, e.g. Buttons, Links, Form Inputs, etc. Keeps the styling of that component in one primary location, and makes it easy to document variations in Storybook, or other tools.

Converting the Design System for iOS

Alongside the web application we also built an iOS NativeScript application, and I created a custom design system for the app. Ideally the two applications would have shared a system, but because NativeScript does not support the same CSS styling rules as the browsers that was not an option. Instead I created a similar, yet customized version of the web application design system for the iOS application. I followed the same basic principles — Global Variables, Mixins/Functions, and Component Modules, but I modified the styles to utilize more of NativeScript's inherent styling and layout features. This approach lends the best parts of any styling system — reusability and modularity — to the application, while incorporating what NativeScript does best.

What I Learned

I learned both Angular and NativeScript working on these applications. I am passionate about learning new things, and while it is always a bit daunting to tackle a new project on technologies I am not completely familiar with, I also enjoy the challenge.