Design Case Study — Good Market
As a curious person exploring all things tech and design, I have been doing as much as I can to continue learning and gaining valuable skills required for today’s ever-evolving roles in the fields I’m interested in pursuing. Recently, I took an Interaction Design course on Designlab. The course was centered around learning interaction design principles and applying them to projects for a fictional business, Good Market.
The first half of the course was usability research focused. This included a competitive analysis report, a business goals + user goals chart, and context of use scenarios.
Beginning with a competitive analysis report, I looked at Amazon Fresh, Vons delivery, and Fresh Direct — three prominent grocery delivery services.
Sketching + Information Architecture
After working through the research and analysis required to design a successful grocery delivery service, I was ready to start thinking about the visual design and content that would go into the project.
In order to practice sketching, one of the projects in this section of the course was to sketch an app that you use frequently — I chose Instagram. I have never been particularly strong with drawing, but I really enjoyed getting to label all the UI elements and aspects of the layout that I never thought about or noticed. There’s a famous quote by Jared Spool — ““Good design, when it’s done well, becomes invisible. It’s only when it’s done poorly that we notice it.” This definitely applies for Instagram.
The next step in the Good Market project was to document the information architecture of the website. I had to think about ways the user would interact with the content — What categories would the user expect while grocery shopping? How would these categories be organized? What other screens/actions would they want to have for an intuitive and efficient shopping process? This is an early iteration of what I came up with:
While not definitive, fully detailed charts of a website, site maps are an important step towards more high-fidelity wireframes and prototypes.
User Flow + Wireframes
With the preliminary information architecture in place, I began thinking about how a user would interact between different screens, where they would click and the transitions they would expect to happen, etc. I used Sketch to emulate a flow of a user adding specific grocery items to their cart and then to create a basic wireframe of what those screens would like on the website.
Conclusion
While Good Market is a fictional business, I found it highly valuable to practice these major steps in the UX/IxD/UI process. These are all types of design deliverables that I will likely be sharing with future co-workers, clients, and stakeholders. I am very grateful for the opportunity to learn on Designlab and for the weekly feedback I received from my mentor, Christine Elbo.
