The moodboards and style tiles created for preference testing initially focused on illustration style that would be more relevant for later testing, Diverging themes ranged from a whimsical watercolor boho-chic to a more upscale elegant that alluded to a more “boutique” or “Artisanal” feel. Somewhere in the middle, was the more “Casually Hip” inspired by a combination of Starbucks and Urban Outfitters brands. It retained a hand-drawn aesthetic, but maintained a more smooth and defined elegance.
During the concept design phase, the client changed direction. While we had initially been focusing on the onboarding flow, the aforementioned research indicated that it may be of more importance to focus on the home-to-purchase flow in order to locate the bottlenecks leading to customer drop-off rates. Thus, instead of focusing on more illustrative graphic user interface, I turned my immediate attention towards icon/interaction design and filtering features.
Working from the smallest atomic element and building structures outward, I created the basic foundation by loosely defining typography, color, iconography and defining some standard components.
With information gleaned from the UX research, patterns provided by the Visual Competitive Analysis, design principles in place, and a modular system of components, I was able to rebuild the landing screen with a concerted effort towards problem-solving.
While most of my design efforts in the time allotted for that sprint focused on the map landing page and its related filters, I used the Starbucks model for the layout for the following screens in the flow for several reasons.
One: The Starbucks app and particularly its reward system have been noted for its success in customer usage and loyalty based on its ability to focus the flow and create value.
Two: Starbucks is a large, world-renowned company that has devoted a lot of time and effort to user research, and I figured we could learn much from their existing model and then try to build upon it.
Three: I had discovered that Starbucks, Like YoLo, used React to build their framework, so there was already a reference to a working library of components from which to build upon.
Finally, we planned on user testing a complete flow so we needed the additional screens to complete the home-to-purchase flow.