GROO
Web app dashboard redesign
Name : Groo. LLC
Scale : 1- 10 people
Funding: Not funded yet
Website: Groobusiness.com
Stage : Vague concept, need designer to brainstorm together
Visual Elements: Has complete brand identity
Target User: Teams on oversea BD
Style: Simplicity, Material Design
Start Date: 4/27/2016
Phase 1: Refined workflow, Wireframe
Phase 2: Hi-Fi Deliverables
Phase 3: Measurements and Widgets.
This project was brought by a SaaS start-up team from Sillicon Valley，whose key members are from Connell and UC Berkeley，and had experiences working at some SaaS based companies. Right now they are developing a web-app, of which basic functions are mostly finished , they are hoping to make some UI/UX optimization. The address is groobusiness.com，The app trial can be accessed at app.groobusiness.com. Since this is a 2B project , the client desires a professional vibe, looking simple and clean, in the meantime, I'm also required to looking into the current workflow , make some changes on the design perspective, in order to provide better user experience.
USER FLOW OPTIMIZATION
In order to understand the product, and evaluate the usability of current user flow, I personally walked through the main process several times , revealed the main problems that I encountered, and figured out what can be improved within my job descriptions from a design perspective.
ITERATION 1
Low level IAs
Integrate all prospects sections under one layer , the “prospects”category, and it becomes a general spread sheet for all prospect lists, which makes easier and more intuitive for user to concerntrate on info management.
We still keep “In app Search” out of prospects since it functions mainly as a data source and doesn’t really have its own saving list.
The client also would like to see "Upgrade Plan" integrated into "Payment Settings", So the final redesigned categories would be like this on the right. I also want to put a spacing between prospects related categories and others.
DASH WIREFRAME
First time logged into GROO dashboard, it shows that the plugin is not installed, and in the form there goes only "you don't have any prospect" yet.
After the plugin is installed , the user can click on "Linkedin" to their linkedin page.
Business cards
After finalizing prospects , I continue to iterate on other options, to see if I can put them in a clean order. According to client's assumption, "Upgrade Plan " goes to "Payment Settings"
The client is adding a group list for prospects allowing user to classify their prospects; The history for is split up into payment history and credit history; Also the general UI is polished and icon buttons are introduced to make it neater
RESPONSIVE LAYOUT
The list width is set to 1100px. No progressive layout beyond this point , considering the user's need for compatible working area for spreadsheet.
The list width is shortened for only 30px , in order to remain the high visibility, the left nav becomes a hamburger to adapt the 1280 breakpoint.
The list item tools ( the three icons )will be included into a expander action, in order to save more spacing.
Not a very recommended size for desktop browsing, but it enables tablet users to swipe left and right to view the spreadsheet.
VISUAL STYLE
Things I learned from this project about the difference between designing 2B products and 2C products, comparing to my previous experience
Generally users of 2B products have different types of objectives, and factors that affect experience. It is obvious that 2B is efficiency driven ; 2C is more versatile , sometimes the design goal is to make the user linger on the product longer or open some tabs more often.
When designing 2C products , designers 's dominant right is higher, can willingly add or reduce product features in response to all kinds of situations. However, when designing 2B, since designers are facing more professional and technical businesses, the client may have stronger decision making power because they are the experts in this field. So when you are given requirement directly from the client, you have to go back to the product and evaluate the significance in it again, and spend lot of time figuring out if it solves the substantial problems.
Because 2B products usually are directly related to the business goals of users and the client. Changes on the product would most likely have conflict with the client's business logic. Designers can't argue over even one button line from the client. So the issues over UX improvement can be delayed forever.
