I was surprised to see how outdated the Flatbush Co-Op website looked compared to how updated the store itself looks. I felt that while it had all the basic requirements the UX did not match what the store had to offer.

My revamp of the website incorporates all the important elements of UX: surface/skeleton/structure/scope/strategy.

The website overhaul provides the customer with eye catching images and simple clean details.

surface- When focusing on what the customer sees when they view the site I knew it was important to keep it clean and fresh. While food is the main focus I wanted it to be bright and realistic. 

I updated the logo with a more fun flowing font and used real produce as the colors were more vibrant and fresher.

The images on the original were fully covered with words. I wanted to show that you can incorporate them both and while the image is eye catching once you view it you also see the information necessary.

Next, knowing that people don't like to scroll too far on websites I thought it important to display the new pre-portioned meal kit service idea I created. This is a large trend that has been gaining momentum from companies like Blue Apron & HelloFresh. The feature can be preordered on new the app or bought directly in store.

The all important Deals section is a scrollable feed featuring the items with an eye catching price graphic and providing extra organic &/or locally sourced stickers.

While the old website provided a link to social media I thought it was important to have a scroll of #flatbushcoop images which are provided by customers and show the great products the store has to offer!

skeleton- I made sure the menu was aligned along the top of the website for better access as well as adding a search button and shopping cart which mimic the app in allowing you to pre-order groceries for pick-up.

The menus are drop down starting with the product choices, centered by membership which is an important aspect of Co-Op business and anchored to the right with contact information. In-between are "nice to haves" including recipes &the history of the Co-Op.

As the customer scrolls further they come upon new promotions and daily deals.

When reaching the bottom they can access social media outlets and join the newsletter.

structure- Defining how users move about the page and where they could go when they were finished there depends on what the consumer is looking for.

The new site offers the same information in a similar way as the original site but with less distraction. Making it just as easy to use for customers who have visited the site often and do not want to get lost. 

scope- The question of which features to focus on in the updated website start with why are people coming to the website in the first place.

Being that it is a Co-Op many people may want to know if they have to be a member to shop there. They may also want to know the hours and exact address.

If they are tight on time they may also be interested in the possibility of having groceries pre-ordered.

It is also a community store so it is important to show how the Co-Op gives back.

"Nice to have" options include recipes, which can be submitted by members and social media links that are easy to help to grow the brand and highlight what the store has to offer.

strategy- This incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well. In general it is a great and easy way to spread information about the store to the public wether they are active members or prospective.

For the public most importantly they can learn more about the company, what they offer and when they can shop.

Mobile version of website.

App Wireframes

App prototype