nested hex logo

VegBox Wireframes



I have two ideas about what to do for this, though most phones will barely load it. One is to have this apple that has progressively more bites taken out. (I saw this once on a food-related site, and thought it was very clever.) The other is to have a small, drawn animation of hands packing veg into an open box. (Or possibly something like the PaperlessPost headers, where it's a little video. But those are usually large files and take a long time to load.)

- From GoodEggs, using images with text overlay : easily extendible and repeatable for adding more box types.
- Include 'About Us' for people who aren't users yet to get a better idea about the service.
- 'Browse' is for all users : get to know options and service.
 -> Question: Is adding to box is greyed-out / disabled when using Browse AND there isn't a user logged in?

-- User Action : Click Small --

- Selecting a size box brings you to the list of what's in that box.
- Accordion menu for each category, with number of items listed clearly.
 -> Details of this may change from week to week depending on supplies.
- List of special items below the regulars. They can be added straight to the box from there, or clicked on for further information.

-- User Action : Add Item --

- Clicking the add button brings up a quantity-entry field.
 -> Only if users can add more than one of that item. This will need to be a dynamic quantity based on the total from the producer and then everyone's selections. It will need to be updated on a frequent and regular basis.
- This, and all other, pop-ups can be dismissed by simply clicking anywhere on the screen.

-- User Action : Enter Quantity, Click Button --

- Because most Android phones don't have a 'Settings' or 'Options' button, it's good to let people know how to get to that sort of info.
 -> No iPhone has ever had that, though older Androids may still have one.
- Eventually, this will probably reveal a drawer with several different options - Settings, Order, Preferences, etc.
 -> For now, it goes straight to Order because this is a test.
- In a full version of the app, there will need to be more guidepoints.

-- User Action : Dismiss, Click Item --

- Clicking on any item will bring up an info page.
 -> Specials will have the price ribbon in the left corner.
 -> Possibly also a "Special" label?
- Information provided will depend on who is entering it for that item.
 -> Is this coming from the producer? Is there another user whose job it is to put in all this info for each product? Is it simply some search results?
- Producer section will have a one-sentence summary, and link to the Producer Info page.

-- User Action : Click Producer --

- Fuller information from the producer about themselves.
- Contains a map, which also includes the user's location if available.
- Clicking the map opens that location in the user's default mapping app.

-- User Action : Swipe Right --

- Always good to give people a summary of what they've put in their cart before asking what they want to do with it.
- Also important to make it clear that the total amount displayed here may not be the final total cost.
 -> Delivery costs are not built into box/item prices, so are charged separately.
- Easy link to clear the order and start over if needed.
- Press-and-hold or swipe right on any of the special items reveals option for removing.
- Are unit amounts of specials editable from here?
- If the user is not logged in, button text indicates that an account is needed. If the user is logged in, go straight to deliver options.

-- User Action : Click Button --

- Have a link for registering on the bottom of all pages when user is not logged in. Nothing more obtrusive than that.
- Logo at the top to remind people who they're registering with.
- Only ask for the bare minimum of info.
- Clearly mark required and optional fields.
 -> Don't ask for anything that isn't required.
 -> Mobile is hard for data entry.
- Is postcode required at registration?
 -> Could be useful for determining carbon footprint? ensuring they're in the right town? knowing what delivery options are available?
 -> Can it wait until the delivery page?
- Always always always always provide detailed information about password requirements, and allow long and strong ones.
- Always always always always validate your data as the user types.
- Possibly have an option for the user to enter payment information now/here if they want to?

-- User Action : Register --

- Either have all of this information available on the main page, or as a pop-up.

- Always let the user know when something has happened! Especially on success.
- Be clear about what the options from here are so they remember where they were in the process. It's easy to get lost.

- Is it worth having the logo on this page?
- Include a very short summary as a way of being able to know if it's something you want to pick up yourself. This is especially important if the user has just gone through the Register process, and isn't coming straight from their Order Summary.
 -> Maybe this is only needed when they've just Registered?
- Pick up needs to lead to information about where and when and how.
- Services could be local branches of other delivery services, if the council negotiates for fixed prices (or distance-based tiers).
 -> Include logo and name of the service if using something that already exists.
 -> Setting up a bicycle delivery scheme in conjunction with this app would be really great. Surface the mode of transport on these buttons!

-- User Action : Select Service --

- List the final total of what is being ordered, including any taxes and delivery fees. Also make it clear that self pick-up is free (or something).
- Is it worth having the logo on this page?
- For users who don't have payment information saved, be clear about the next step.
 -> If they do, go straight to confirmation of order.
 -> Trainline asks for CSC just above the Pay button on ticket order summaries, which I really like. Maybe use that instead.

-- User Action : Enter Payment Information --

- Is it worth having the logo on this page? To remind people where they are?
- Allow other payment services, if the council is willing to accept them. It may be a lot easier for users, like with social media logins, to be able to use another service instead of entering their card info.
- The grey box at the end of the Card Number field becomes the logo of the type of card based on the first four digits. It's a simple lookup table.
- CSC has a quick visual guide showing where to find that information.
- I don't know the details of what's required for accepting a credit card here in the UK. Nor how to ask for bank details within a payment system like this.
- Postcode is autofilled if the user has already entered it at registration.
 -> Or possibly not even asking for it again?
 -> Seems like a good idea to provide an opportunity to correct if needed.
- House Number / Name is auto-completed as the user starts typing, from the lookup list of addresses in the postcode.
 -> This minimizes the amount of typing someone has to do on a phone, because it's cumbersome and frustrating.
- Add Payment Later is available during the setup flow that isn't directly part of a purchase, possibly at the top of the screen, for users who don't want to provide such details while on their phones.
 -> Have a reminder in a few hours? days? to enter info.
- Allow website login for payment entry for anyone who doesn't want to submit that info on a phone.

- Always give the user confirmation!
- Message will be something about notification when it's ready for pickup, or delivery if that was the selection.
- I'm not really sure where the app should go after this. Possibly just to Browse?
 -> How to add items after the order has been submitted? Or is that an advance feature for a later release?