American Pantry

6 weeks - UX/UI & Branding

The expat life has many blessings and challenges. You may not realize that many of the things that you loved from your home country will not be available abroad until you’ve already moved. At this time in history, when online shopping is a fact of life, it should be easy to find those products that you love. There exist a few online shopping experiences created for expats seeking a little taste of home, but none that display elegant design with a clean and responsive shopping experience.

The Problem

The problem was to create an e-commerce site catering to the needs of the American expat living abroad. This site should allow users to create an account as well as access that account by signing in via social media. The user should be able to view suggested items, to navigate categories and leave product reviews. Because of the international use of this site, several language options should be provided.

The Solution

American Pantry provides a clean, simple solution for those of us seeking a little taste of home. With simplicity in mind, the site delivers functionality without a confusing interface while still generating enough interest to keep the user engaged.

User Research

Research showed that a majority of those questioned shopped online and 48% of those shoppers said that they shopped online often. Maybe not so surprisingly for an online survey, but zero people said that never shop online; however, 60% of people have never shopped online for groceries. For a site like American Pantry, the majority felt that Snack Foods and other ready to eat items were the most important to have available while breads, cleaning supplies and stationery were relatively unwanted. It was surprising that few people were interested in products for american holidays and parties.

Graph on research results

Know Your User

After the survey, I developed 3 personas that would guide me in developing the website with the average user’s interests in mind. I created 3 very different potential users; one a tech-savvy online shopper, one a international traveller and the last one, a rather introverted and shy individual seeking a way to purchase outside of public view.

Know Your Competitor

It was at this point, that I needed to begin researching any competitors to find out what they did well, or didn’t do so great at. I managed to find a handful of sites similar to American Pantry, but none that was really well-designed. Most were extremely bloared with content, such recipe sections that were mostly empty, or page-long business guarantees with excessive fine print. I chose 3 to compare side-by-side.

Information Architecture

Using what I learned from the questionnaire and the competitor analysis, I came up with a comprehensive list of user stories that breaks down what I feel the research shows users would like in such a website. After gathering the data, it was time to start developing the stories that would keep me on track during the design process.

With what I knew about my users via the survey and the personas, as well as the information gathered via competitor analyses, I put together User Stories to break down what I felt users would like to see in this website. Afterwards, I created several User Flows to manage the process of moving through several processes on the site itself. With the collected data and the user flows, I then created a very rough Wireframe on Balsamiq.

Visual Design

With the research coming to a close, and finishing up the wireframes, I had a clear vision of how the site should be layed out. Next, it was time to work on the branding and other visual aspects of the deisgn. Using mindmaps, I created both the name and how I felt I would design the logo and settled with the saying “American as Apple Pie” as launching point.

The logo design went through an incredible amount of iteration until finally settling on something much more simple that what I had initially come up with. During this process, I also created a Style Guide. I wanted to choose a theme reminiscent of Red, White& Blue without being too cheezy, so I chose deeper reds & blues.

The Prototype

Much like the logo design, the visual design of the HiFi mockups went through many iterations. The initial setup seemed “sparce”. I condensed a bit, and added a lot more product trying to attain the sort of look one would see when physically looking at a shelf of product in a brick and mortar store. After some trial and error, I came up with a solution that I felt evoked the feel of walking through a physical while still remaining clean and simple in design.

View the clickable prototype on InVision here:

The Conclusion

In conclusion, my biggest struggle was with time. I can see and value the importance of creating and adhering to a schedule especially with design in mind because it’s very easy to go back and re-design something over and over and over again before being happy with the final product. I also found that I was designing things far too large and had to re-scale the entire project. If I had more time, I would like to evaluate the color just a bit more as I feel the white background isn’t very interesting.

Thanks for checking out my case study; if you liked what you saw, lets create something together! Hit the contact button below and lets get started!