Estelita’s is a small catering company based out of the Healdsburg, California. Owned by Jaime Dillon, a longtime chef and gardener, it strives to be a shop selling unique Mexican made goods, as well as a little food kiosk and late night bar. He wants to create a website for his soon to open storefront and online shop, while also creating a fun space on the internet where people can understand his mission and vision through the experience they have online.
UX/UI Design for Estelita’s
Client
Estelita’s
Year
December 2022-February 2023
Named Estelita’s, in honor of owner Jaime’s mother, Estella, the company is just starting out, and hoping to reach a large and diverse audience with an eye catching website and easy to use online store.
Research
The research I did helped my client to understand the reasons behind the design and UX decisions I wanted to make. As there aren’t any direct competitors in our area for this kind of business, the businesses I chose to highlight had crossover traits with Estelita’s that got us close to understanding competition.
-
Who is the customer Estelita’s is looking for? I decided to do a survey for this user research, to understand both what someone wants from their online food shopping experience and what they look for when shopping for Mexican goods.
-
I assessed four different companies with similar goals and products to Estelita’s.
Miracle Plum is a speciality grocery store in Santa Rosa, California. They sell a variety of foods, kitchen products, and wines. They are known in the area for their unique shop, and the contemporary and interesting branding. Their website is useful but the UI is a bit clunky.
Known as the premier Mexican grocery store chain in the Northern Bay Area, Lola’s Market has a strong brand identity. Their website has a lot of products listed but also has a confusing UI and there is a lot going on, but I don’t think this is off brand for the market itself. They are a strong competitor because they offer so many items at cheap prices. The key for Estelita’s is to be speciality.
Pop Up Grocer is an online and (recently) a brick and mortar speciality grocery store located in New York City. They have an extremely bold and contemporary brand. It feels very of the moment tho and is not a style of design I feel we hold up throughout the years. They have a large array of unique products, all with their own interesting and contemporary branding, so I would imagine a simpler interface would be more effective.
Of the several online Mexican grocery stores, Mex Grocer has a very large and extensive inventory of products, making it tough competition for a smaller store like Estelita’s. It has a very forgettable UI and Branding so it is not very competitive in that sense.
Survey Results
User Persona
Biography/Behaviors
Anthony was born in Marin County in the Bay Area of California, and grew up traveling with his parents and younger sister, getting to know many cultures and geographies different to his own. He has always enjoyed meeting people and credits his sociability with his success in life and with food.
Since graduating from UC Berkeley, he has worked for a variety of tech start ups in the Bay Area, and has landed at Open Table, working with a devout but small team of food writers. Anthony has written for publications such as Eater, Lucky Peach, Bon Appetit and has appeared as a guest on several food related podcasts.
Anthony and his partner Tom are big into shopping locally, and are always eager to try out new restaurants and speciality food shops. Anthony appreciates good design, diverse flavors, unique experiences and quality products.
Anthony F.
Age: 35
Gender: Male
Occupation: Food Writer
Location: Oakland, California
Information
Architecture
Task Flow
Wireframes
These are the wireframes for our first Flow, taking the user from the landing page, thru the shopping experience and finalizing with a confirmation screen.
These are the wireframes for the second Flow, taking the user from the landing page, to the events inquiry page.
Branding
Estelita’s branding is meant to be fun, authentic, and a little wacky. They wanted something that would catch people’s eye without being overly zeitgeist or contemporary, so as not to exclude customers.
The color palette was chosen using images of traditional Mexican pastries, including Flan, as well as utilizing colors popular in Mexico, such as green and pink. These colors evoke familiarity with the subject, creating a sense of trustworthiness towards the product.
For the logo I decided a legible but also rounded font would be a strong choice. It is called Paytone One and is a sans-serif font I found for free on Google Fonts. It is designed by Vernon Adams, a prolific font designer, who has created many popular fonts for the cloud based era.
Responsive Screens
I knew I wanted a bright and fun landing page, something to differentiate and be memorable. I also thought a lot about what our user is curious about. They want to know right away how to shop, eat, and experience. They want to know the hours, the location, and ultimately, view interior shots of the space. As a new business starting out, Estelita’s doesn’t have the inventory of Lola’s or Mex Grocer, but we are more interested in quality over quantity, and so each illustrated block is given a little personality to draw the user in. There will be an overlay feature to access the following page and find out what is being offered. Illustrations keep it interesting and different. Once our user clicks thru to “Home/Casa” they are also offered a limited array, creating a more curated experience. I chose photos for this portion because I think its important to offer a small glimpse of what the product
is, it can create some curiosity and with a limited amount of options, clicking thru doesn’t feel overwhelming. Page 4 is our product page, and is simple and straightforward so as to keep the focus on the user finishing the task of purchasing the product. I referred to some of my own excellent online shopping experiences and found that the pop in check out screen is usable and effortless. The check out screen and final confirmation page are pretty standard examples of a simple check out flow. On our second flow we have our user finding out more about events. They can very clearly find out information as well as fill in a simple form to inquire about booking an event, something that was very important to the client.
Prototyping
Prototyping the website was a simple process as the outline of user movement was clear from the responsive screens. The initial flow I wanted to represent was the most important to my client (ordering an item and booking an event) and from there I know prototyping for the remainder of the website will be relatively straight-forward.
Estelita’s Going Forward
Estelita’s was very pleased with the prototype for the website but going forward want to replace most of the photos with photos from the actual store, which will change the art direction a little bit, but will overall bring a cohesion to the pages.