The busy urban professionals are managing every aspect of their personal lives on digital devices. How can we create a digital grocery shopping experience that not only replicates but also improve upon the in-store shopping experience?
As part of DesignLab’s capstone project, my brief was to address the challenges in music sharing despite the plethora of music streaming apps available.
Based on user research, I designed a mobile experience focused on discovering and connecting with people of similar music taste outside of one’s existing network.
From there, users can discover new music from others’ listening history, or interact with each other via messaging. The possibilities are limitless.
User research to identify design opportunities
A solution for the end user starts with user-centric research. I used both primary research–user interviews and contextual inquiry to be precise–as well as secondary research such as competitive analysis to generate insights for design.
Empathy research that leads to key insights for design opportunities
I interviewed 6 target personas of the same demographic – young working professionals living in London – and their shared traits come alive as Amy Lopez, the primary persona of Instashop.
User Persona paints the profile of Amy in broad brushes to give us an idea of who she is. The empathy map dives deeper into Amy’s world and gets into her head even her heart. Finally the storyboard tells the story of a day in Amy’s life as she goes about grocery shopping.
Definine product design requirements to set priorities straight
Defining what features to design for Instashop has to take a few things into account. First off, I did a competitive analysis to get a clear view of what features competitive sites have designed.
Next up, I plotted out UI requirements by each task users will perform and how design can help them achieve such tasks. Going down the long list of features, I prioritized the most important features to design first by their value and cost to design.
Card sorting to help design a better information architecture
A grocery site has a myriad of products in many main and subcategories. Categorizing and labeling items for easier navigation is a challenge.
I led a remote card sorting session with 10 participants to design a better grocery information architecture according to their mental model. In the end, I was able to design a high fidelity sitemap with wireframes.
InVision desktop prototype
Marvel mobile prototype
Making shopping easy to use and navigate with usability test
Usability test ensures that the designed product doesn’t just live in the designer’s head. By testing the site functionality on real users, the designer can fix usability issues before moving into high fidelity interface design.
For Instashop, I recruited a few test participants for in-person usability tests, as well as conducted click test and home page 5 seconds test using tools like Usability Hub. Each of these tests serves a different purpose. I was able to test the navigation design, labeling, and value proposition design.
Branding and style guide for a component-based design system
To give Instashop a strong identity that would resonate with our target audience, I created a brand identity design to reflect the fresh, expedient and high-quality attributes of Instashop.
Before designing the interface for multiple screens, I created a device-agnostic UI kit including colors, typography, button styles, form input style etc so that the design could scale without losing a consistent brand experience.
From this project, I learned the crucial role of research in design. Solid research can save a failing design. Moreover, thinking deeply about research data will lead to innovation. In the case of this design project, I was able to think of innovative solutions to navigation based on user feedback.
User experience design is endlessly fascinating and ever-evolving because new research insights emerge and design solution evolves with it. I will insist on a research-driven design process from no now, because it is the only path to follow for design to be usable and delightful to end users.