独家优惠奖金 100% 高达 1 BTC + 180 免费旋转

Sole Food Street Farms UI Redesign

The Challenge

Sole Food was designed to transform vacant and contaminated land in Vancouver into street farms that grow artisan-quality fruits and vegetables while providing job training for people struggling with adversity. Their main source of revenue is selling their inventory, but there is currently no direct page or content to showcase their inventory stock.

Outcome

We wanted to create a more comfortable way for vendors to see the quality and quantity of products by creating a direct link to a weekly produce list. We determined this service would mostly benefit restaurants who source locally grown ingredients. The fact that a large number of restaurants are using Square or other similar applications/hardware to charge customers, it made sense to use to display the content on a Mobile Tablet Prototype.

Step 1: User Research

User Interview Results

Pain Points:

· Josh usually has to wait for his vendors to email him the weekly produce list.

· Lack of an organized and fast ordering system will force him to work solely with a wholesale vendor, jeopardizing business of the local vendor(s) he wishes to support.

Josh observed Sole Food’s current site and told me that if he were to use their service, they needed a more communicative navigation menu, better photos for their produce on the ordering page, and pricing for produce.

User Persona

Josh Daniels User Persona:

Journey Map

The journey map below connects Josh’s current pain points and needs with his potential interaction with an online directory. Around “Discover” Josh uses the revised version of Sole Food’s online ordering system.

Step 2: User Flow Chart

After we interviewed Josh and conducted a usability test, we mapped out our revised version of the site.

Step 3: Tablet Wireframes

Homepage

We took the following steps:
• Changed the sidebar to a header

• Renamed navigation subjects to improve clarity
• Encapsulated media related topics into one category to save room
• Added information on “Market Share” to the body, as well as a synopsis and location to encourage users to create an account with Sole Food.

Produce List

Step 4: Iterations

Quantity Button

As a group, we decided to go with the iteration on the right to prioritize the most user-friendly tablet experience.

Checkout

Our team decided to go with the iteration on the right to make the order summary stick to the bottom as your scroll. This way, information is still accessible to read and everything is viewable when users decide to recalculate costs.

Step 4: Style Guide

Color

The top row is primary colors Van chose. Cool and green tones signify nature and vitality.

The second tone displays warm tones for vibrant accents.

Icons

Images

We tried to find pictures that were taken outdoors and used natural lighting.

Type

Both display and body typeface are Proxima Nova. Main headings are Proxima Nova–Bold, sub-headings are Proxima Nova–Medium, and sub-navigation is Proxima Nova–Thin.

12 Column Grid

Tablet: Total Width: 728px • Gutter Width: 9px • Column Width: 52px

Future Development

After finishing our high-fidelity prototype, we handed it over to Josh for testing.

Josh’s Feedback

Better Communication

In the future, we will keep information linear, such as bolding “Produce List”. We also can make sure information is not vague if we were to mention debit systems or memberships on the site. We will also color, underline, or highlight what page a user is on.

Pricing Organization

For our checkout cart, Josh asked why sub-totals of each item are on the confirmation page (the page after “Checkout Cart”) but not on the checkout cart itself.

We also realized that we should order information as the unit price, then the quantity, then sub-total so that when customers adjust the amount subtotals are automatically calculated. This makes things easier to read when evaluating the Sub-Total horizontally, then Final Total vertically.

Things We Would Do Differently

Color Blocking for Order Summary

We would alter the Order Summary by creating more line spacing between each item, then use color blocks to make it easier for users to scan for items. Color blocks look cleaner, more professional, and is consistent with other pages for checkout.

Responsive Grids

One can argue the assignment only required us to prototype on one device (tablet), but in the future, we could consider building prototypes for all other devices.

What We Learned

The most important takeaway for us was finding a user (or users) who have an authentic need for a company such as Sole Food. Not all restaurants prioritize organic produce nor work with nonprofits, so we were lucky to meet Josh. His interview gave us insight into making a swift ordering system that fulfilled his needs.

Add a comment

What is your view?

Send

Related posts:

Alternative Investments Are For Everyone

Join now and earn a 330% return! — The crypto craze Guaranteed fixed income of 15% with almost no risk — The P2P promise Will I get a 330% return? Perhaps over a short time but it’s VERY unlikely to…

Mi vida Entre Mundos

Me gusta el nombre que tengo pero no me gusta cuando lo pronuncian o escriben incorrecto. Aqui en EE.UU se pronuncia differente que en Mexico y no me gusta cuando lo dicen en español. Por Ejemplo, en…

How can i boost my credit score? I Have 0 Credit History and no card will approve?

I Am 19 And Wanted To start my credit, i cant find any card that will approve me. My Mom Approved Of Keeping The Card & Using It Once A Month Just To Keep It Active. Does Anyone Know ANY Website…