Contributions
Leadership Role
As the sole user interface and experience designer on this project, I ultimately metastasized into a product designer. Quite often we looked to the proposed design direction to completely flesh out a skeleton of a feature. It was imperative to put our user’s first, using data to drive a majority of our product design decisions. No feature was put into development without design’s complete buy-in and confidence we had the user’s best interest at heart.
User Experience
Eye-tracking, user-testing, competitive analysis, stakeholder interviews, on-site shadowing, analytical analysis, paper testing… You name it, and we put this system’s experience through the ringer. Breaking into an already saturated market was daunting, and we needed to make sure all of our ducks were in a row as the system was being built. There’s nothing more demoralizing (yet inspiring and insightful) than having your pixel perfect design fall flat during a user-test. Those resulting furiously scrawled pages of notes are worth their weight in gold and only helped shape our product into a beautifully streamlined piece of software.
User Interface and Layout
Leaning heavy into my good friends: 12 column grid, 8 pixel spacer and atomic design, gave us a strong foundation to develop a reusable, future-proof and visually pleasing user interface. Designing unique baseline patterns that could be built upon and used throughout the vast system allowed us to pull from a library of reusable components to quickly develop and deploy seemingly entirely new features.
Visual Design
From soup-to-nuts, I lead all aspects of the visual design process, ensuring everything fell within a cohesive visual style while retaining all accessibility requirements. From iOS and Android, to desktop and web systems, this enabled us to create an incredibly optimized system allowing us to re-skin the entire web interface in just a few hours, from concept to deployment.
Interactive Design & Animation
No interface is complete without a suite of appropriately subtle interactions and animations. To ensure all major messaging was delivered adequately, and users were delighted throughout their journey, minor yet impactful animations were integrated within the experience. A pop of color for items added to the cart, a snappy slide-on notification for favorited or saved items, a gently pulsing indicator during the order-fulfillment process. All of these and more add an air of comfort to the experience, reinforcing confidence to the user in their actions, letting them know, “Hey, we got your back here, we’re here for you.”
Notable Features
Contextual Content
High complex systems can result in highly complex interfaces. For this reason, we only surface certain information when it is contextually relevant. Small quality-of-life improvements that anticipate our user’s needs. For example, if we determine you are in a customer’s store, we can tell you which aisle a product can be found in. If a customer is at a store to pick up an order, we display a button they can use to tell the store they have arrived. If a customer has an order in flight, and adds another item to their cart, we provide them the option to add it to the existing order instead.
Optimized Design System and Workflow
Being a white-labeled product, it was important that the design needed to adapt to any branding system thrown at it, while staying accessible and pleasant to use. I built a comprehensive and dynamic symbol library within Sketch that, from just a few color palette swaps, could easily have the entire app rebranded for approval by stakeholders. From there, just a few more clicks had the entire set of branding revisions exported and sent off to developers for implementation. Entirely new sites could be branded and launched within a day.
Administration Portal
The immense size and scope of the KornerShoppe admin portal was a feat unto itself, driving every piece of data on the front end. Creating, designing and scheduling promotional runs and custom pages, cataloging every single user and incoming order, building custom and monetized search results, and more… Not only for a single store, but potentially hundreds of stores at a time, that could be driven as custom groups of stores, or all meticulously done one by one.
Multi-faceted Point-Man
Working as the sole designer within four separate development teams (iOS, Android, Web, Administration) was a mammoth undertaking, but ensured that all systems, patterns and visuals were consistent from system to system, only fracturing to work more fluidly with native patterns for iOS and Android (for example: app notifications, typography structure, or high level navigation patterns). This was all brought together with a single shared library of assets and colors that ensured the visuals were consistent no matter where the system was accessed from.
In-Depth User Testing
We knew that if KornerShoppe was going to stand a chance in the eCommerce space it had to have a top notch user experience. To ensure this was done to the best of our abilities, we ran every test we could. Paper testing quick and dirty early on, taking in-store tours, studying the analytics of existing solutions, and a deep and thorough competitive analysis left us with treasure troves of data to parse through and utilize to develop a full user experience we’re incredibly proud to have.
Modern UI and Icon Sets
While the intention of KornerShoppe is to be branded to our customers’ needs, it was imperative we entered the room with a thoughtful and modern design that appealed to the everyman. After many iterations, a clean and accessible design was established that leveraged subtle gradated interactions, close to 100 pixel perfect icons, snappy animations, and my font of the year, Montserrat.