We worked with designers and developers at Stockpile to modernize their website UI and align it with their iOS app to help unify the experience across devices.
We rebuilt the sign-up flow to be a friendlier, step-by-step experience, with breadcrumbs, more helpful field interaction and validation, and simplified questions that got users through the flow faster.
We also rebuilt the account UI, introducing a new header and sidebar. The sidebar is responsive, collapsing into a slide-out panel and then a simple toggle button in the header depending on screen size.
Stockpile also introduced new APIs, which the data layer of the front-end was not yet consuming. We overhauled much of the logic behind front-end account management to take advantage of the newer endpoints that were available.
We collaborated with the Stockpile team, meeting regularly at their offices while also working from Lab Zero headquarters. We used Pivotal Tracker to deliver new features within one-week sprints.
The Stockpile front-end is an Angular application sitting on a Rails-based static site generator. We worked on a specific version of Angular and upgraded it to the point where some bugs could be fixed, but found that it was not worth spending the extra time to upgrade it to the latest, greatest version.
We had to thoroughly audit the data access patterns of the existing Angular directives and make sure that the new APIs could support the complete front end feature set. We worked collaboratively with the Stockpile back-end team to identify and fill in any gaps.
The cosmetic changes were rather easy to implement, as we worked with Stockpile UX engineers that delivered mockups to us in Sketch format, using Zeplin, a service that allows for web-based hosting, display, and collaboration on Sketch files. This saved us the extra work of translating visuals to code, as in many cases, we were able to use the automatically generated CSS.
We implemented certain UI patterns that resembled Google’s Material Design language, including one where a placeholder became a label when its field became focused. Some of this work was made easier through the use of Angular’s form directive, which kept track of empty, touched, and invalid fields.
We wrote many new directives that allowed Stockpile’s UI to perform the same, but appear very differently dependent on screen resolution. One of them, a small badge that displayed the current user’s initials, was used throughout the header and the sidebar multiple times (which actually required a bit of rewriting to make sure that information was available at all times).
In-person and Slack-based collaboration, as well as short sprints, allowed us to communicate well and work efficiently with the Stockpile team. We were able to discuss specifics about the design and existing code, and iterate quickly whenever certain details needed to change. Our decision to focus more on the smartphone and tablet market further allowed us to achieve parity with existing iOS designs, as browser compatibility was not among the most pressing concerns.
We discussed whether the specific version of Angular being used would needed to be upgraded, and weighed the pros and cons of spending the extra effort to move a large codebase to the latest version. We decided that sticking within the minor version would be adequate for the work we needed to do, and even threw in a few custom patches to introduce certain pieces of behavior when needed. Despite its age, we learned about different ways to surface data throughout an Angular application, such as the use of providers versus nested controllers.
The use of Sketch and Zeplin caused us to reconsider the use of Photoshop throughout our company. Since the Stockpile project, designers at Lab Zero have been using a combination of Sketch and Adobe XD to create tighter, more realistic, more usable mockups.
Although we were brought onboard to help speed the process of implementing these new designs, there were many times where our input was instrumental in affecting the look, flow, and architecture of the Stockpile front-end.