Homepage - First Time
- After first invoice is created. The user closes the invoice and is taken to the homepage.
- On top we have a sales chart. We hint at the past months (04, 05) and hint at the future months (07, 08). It is a monthly sales chart. Of course, this is all TBD. How do you scroll this, what other charts are available? Can I switch this off? -- TBD. Tovin has lots of good ideas here.
- The second section is the To Do. We introduce features here and let people get them going or not. We also use the To Do module to remind people of anything that needs to be done. As in, invoice in draft that needs to be sent. A payment that is overdo (either send a reminder or just mark it paid)...
- TODAY. is the next section. It combines the things I did Today and anything happening today (as in an appointment).
- Since we just create an invoices. It is in today - is a way for people to access things they just created. We mark the latest things create with New - that extra feedback helps the user find the things they created.
- The primary components of the invoice block is the client. I keep track of client by people. The name of the company, the amount, invoice number are secondary. The the date created and the date due is tertiary. On the right top - is the status of the invoice. I can quickly scan down the feed and find an invoice by person, or quickly scan the right side and see how my invoices are doing by status.
- The bottom is the publisher - the create module - Instead of forcing people to double tap for an invoice - make the primary action of the homepage to create an invoice - it is the core of the application, we can be less than robust on everything but be exceptional in one thing - invoices! (Make it simpler + faster to create an invoice from the homepage)
- Colors - Since I am just wrapping up. Here is a new color system. It is very hard to work with everything being the logo color. I like my sky blue, my ground is beige and in valley below is the field of dark green forest. The sun highlights things with a deep orange. PLUS. Why be an another generic app? Our users are independent minded small businesses - they might appreciate things outside the realm of boring. BTW. Thank you for letting me explore things.
Homepage - Create
- The right of the Create Invoice button is the ability to launch a publisher and see other things that I can create directly from the homepage. The tray slides up. The button could be (...) or (arrow down) - make it the same color as the primary color create invoice button.
- Tap the overflow create button - then slide-up the tray of things I can create.
Homepage - Feed
- The homepage is the app. Everything you do is on the homepage. After the Chart and the To Do section, we have a transaction feed. It includes everything the client has done with the application. Organized into Future, Today and Past.
- We hint at the future. It is a create placeholder for new appointments. If people create an appointment for a future date, we highlight with new and slot it in the future.
- We might have lots of future appointments, we don't want the future things to blow-up the feed. Contain it, user taps the 20 upcoming and funnel down to a page that list all future appointments.
- Today. Is things the client created Today - PLUS. any appointments that are today. The thing I just created is highlighted. The highlight goes away after.
- Past is the .... past. We mark anything paid, anything overdue. An overdue invoice will be here PLUS it will in the To Do section - so people can tap the invoice card and send a reminder or mark paid.. or do the same thing in the to do section.
- The focus of each card is the client name. If a client is part of a company, the company is noted
Homepage Clumping
- This takes the concept of the feed of transactions and moves it forward - by clumping related transaction into one card block. As a business owner, I want to see all the client related transactions together in one clump. An appointment generated an estimate that generated an invoice... generated a payment. Those are not discrete transactions they are steps in the relationship with the client. I can continue to tap the individual transactions and deal with them.
- This needs more work, and might be the future of the feed of transactions.
Homepage - Roll-Up
- As you scroll the feed and move back in time. It doesn't make sense to continue and load a card for every invoice created. At one point, we begin to clump past years and roll-up a summary. In the screen above. We roll-up all of 2016 and 2015.
- If somebody generates lots and lots invoices, maybe we roll-up after a month closes. Example - It is June, the user sees a card for all the invoices create in May - but April is roll-up summary card. They can still browse to a specific invoice in the past, they just need to tap the specific month or year. OR. Search works.
- This should not be an endless scroll-feed of every invoice I create (if I create 10 invoices a day x 200 working days = 2000 invoices a year x 5 years of work = 10,000 invoices - just sayin! ). More details on the recent things I did and care about -- and more summary on things I did in the past.
Homepage - To Do
- The To Do section is a consolidated place for people to do all the things that need to be .. done.
- We don't start the app experience with To Do because we don't want to disrupt the quick creation of things. Essentially, our client is visiting their customer - they need to quickly generate an invoice. They launch invoice2go - we don't want to hit them with overdue invoices, with new features, new call-outs --- all that does is annoy and delay things. Taking care of outstanding To Do's might happen during a downtime - on the train on a couch --- essentially, when the customer is not pressured to do something.
- Instead of jumping around the app trying to clear things out by object type (invoice, estimate, time, mark invoices paid, delete drafts, send drafts... We consolidate it into one place.
- The call-out to tap To Do is a top level item on the homepage. BUT. We contain it as one aggregate call out. We leave it to the user to deal with to when they have a down moment. Keep in mind, the user might never mark an invoice as paid, even though they were all paid. To do might be overwhelming on the homepage.
- To do might might contain quick actions inline. User can still tap invoice card and be directed to the invoice.
- We also use the To Do section to highlight new features. OR. Things that can be enabled and setup. We keep those highlights off the homepage, so the is not distracted with the primary purpose of the application - quickly creating an invoice.. or ...
- PERHAPS, if people realize that it is pain to mark each invoice as paid - they might opt to switch to online payments and see the extra benefit.
HomePage Concept
All your work is on the homepage.
Conduct all your business from the homepage. It is a feed of transactions. You don't have to navigate to another section of the application to see an invoice. Create from the homepage and come back to the homepage. The current hamburger/menu becomes a way to filter transactions. If you do is invoices, they are all here.
Summary of Concepts
- Leverage Scroll. It is the simplest form of interaction. Scroll back in time.
- Analytics is important, but contain it
- Feed of Activity. All Activity. You don't have to go someplace to see the latest invoice, or the latest of anything. The latest is here.
- Add a To Do Section - Make it clear to people that some things are lingering and need to be done. Could be an overdue invoice that needs to be marked as paid or a in invoice in draft mode. This could also be the section to introduce things as - add logo, enable online payments... If nothing is To Do. The section goes away.
- Explore feed Clump, maybe in the future of Feed V2. How do we show related transactions? An appointment, leads to an estimate, leads to an invoice.... - Should we show it all as one block in the feed?
- The Create. Create Invoice is the primary action on the homepage. Invoicing is the core of the app. Bring that to the home page. Everything is secondary. The Create tray can be open on landing - Let people create quickly and makes things more discoverable - as soon as they start to scroll the TRAY tucks down. Solve Discoverability + Speed.
- People can still tap Menu > Invoices -- All that does is filter this feed to only show invoices. Perhaps, with more filter controls, although filter controls can move to here.
- Notification vs. To Do - need to solve it - Notification can resolve a todo (payment made) - but still need a quick way to access all things lingering.
Create Invoice - First Time
- Instead of taking a user down a pre-setup path, asking for the business name, we drop them into the first invoice create flow. The first invoice create flow would include things that just need to established once (your business name). As soon as you get it done, we store it and auto-populate it in the future.
Create Invoice - Draft
Add Item - First Time
- Add Item Flow Discussed Below
Create Invoice - Draft > Unsent
Create Invoice > Tap Send
Invoice - Click Add Item
- Image on the left is the current create invoice screen. Putting it here for context. The left side is what we do now and right side is what is proposed.
Step 1 - Entry plus List Item View
- Left side is current - using iphone 6. Right side is proposed - using iphone 5 (less space)
- 1 One primary action on the top. Dim state until user enters something.
- 2 Multi-purpose entry. Search or Create.
- 3 Instead of tabs. Use filters. Multi-select takes input from the filter. Make it a secondary item (after filter controls) on the filter bar.
- 4 More robust list of existing items. Organized in priority of importance and scan-ability. Include Name / Description - Price / Part or Labor (if enabled) / Date (for expense or time) / Extra note: Recently used - note: only expense and time get a the special visual treatment with an icon.
- The $$ amount from the right side to the meta information under the name of item. Reason - more space for longer names. PLUS. That will keep it at two items to process for each thing on the list. Top/Bottom - vs. Top / Right + Bottom... Too much.
- No idea what the cancel does on the right side in the search field - remove it. That is one thing less that the user doesn't have to process.
- Change the title from "items" to "item" - we will use the "s" when you enter multi-select.
Step 2 - New Name
- As the person begins to enter a name. The Next button goes active
- Search results update to find something that matches what the person is entering.
- Small x appears in the text entry field, let people erase what they enter. So minor, changing it from all gray to hint of blue, makes it clear-er that this is an active tap target. Not a big deal either way.
Step 3 - Item Form
Step 3 - Item Form - All Options
Step 0 - Invoice
AddItem-Filter List
AddItem-Add Discount
Multi Select Add - W/Search
- User switches to multi select mode
- Multi Tap Icon - changes states to single (actual icon is TBD).
- Goal is to NOT radically change things on the user. A "s" to item.
- We make it clear that the text entry is NOW just search, before it did two things.
- Note. You cannot create something new in this mode, this only applies to selecting something existing
- I would leave the keyboard up, maybe slide down on scroll -- TBD
- One Primary Action is now Add - NOTE - if user selects something that needs extra input (as in a time that does not have $ associated with it) - then the button to be NEXT. And people add the extra fields to the selected items in the next screen before it is added to invoice. OR -- Another option - multi select does not allow the user to select items that need more input... leave that as a TBD for now.
Multi Select 2
- Update the header with the quantity.
- Primary button is active.
Multi Select Search
- Ability to search in multi select mode.
- BTW. App does not do this now, no comparison screen.
Add Item - After Several - Alternative
A - First Time = Setup + Create Invoice
Concept - A - Set 01
Concept - A - Set 02
