Enterprise - Sales App

Transcription

1 Enterprise - Sales App Mobile App Wireframes March 06

2 What is a wireframe? A wireframe is an outline of a digital product expressed in simple block layouts and representative text that conveys structure, hierarchy and content at a broad level. Wireframes are highly effective in: Communicating and validating ideas, Getting early stage clarity and feedback for improvement, Increasing collaboration between multi-disciplinary teams, Saving substantial time and money. Our wireframing process A UX expert thoroughly evaluates the goals of your business and understands the end users pain points to ensure your product is rooted in user needs and delivers business impact Next, the expert focusses on ideation and meaningful innovation. S/he brainstorms and sketches creative UI alternatives based on latest UX design trends, user centered design best practices, up-to-date research and established usability conventions. The most promising UI ideas are then refined further into digital wireframes to craft an experience that is effortless, meaningful and delightful.

3 How to read this document This document contains annotated wireframes for all the key pages you indicated Wireframes are marked with numbered circles. Annotations related to each number are at the right side of each screen. Annotations typically document key design decisions and features. Usability best practices and top tips are marked in a box with this icon The Overall Recommendations section at the end of the document contains top 5 UX recommendations for your product.

4 Table of Contents Dashboard Report Accounts Tasks Teams More Notifications

5 Dashboard Note: As per the minimum viable product (MVP) goals these wireframes have been designed to support most frequent actions and care-abouts of a specific user type - Sales Manager. Year 4 Carrier 8:08 AM 00% Dashboard Quarter Month $0M $0M Sales Revenue Sales Target 0% since last year Custom 50% The most critical information for sales managers is determined to be ) Sales numbers ) Accounts ) Tasks 4)Teams. Search, notifications and user profile should be persistent at top.. A separate dashboard view for every user type is necessary. The dashboard should provide business critical details at a glance.. When Custom is tapped user should be allowed to enter custom date range. Selected date range should display on top. 0 $0M Deals Closed Deals Closed Amount 4. Tapping on each card should lead to detailed reports 5 $M Avg. amount per deal 6 $8M Deals in Pipeline Pipeline Deals Amount Dashboard Accounts Tasks Teams More 6 5. To flatten information hierarchy and to make navigation easily accessible and visible make use of a tab bar instead of the navigation hidden under a hamburger menu. Limit tab bar to display between to 5 items. 6. Less important information should be grouped under More. As an additional tap is required to access this information it leads to low discoverability. Information under more should not be critical. 5

6 Report. Detailed reports should have a view of their own. A back arrow will navigate users back to the main dashboard Carrier 8:08 AM 00% Sales Revenue -06 By Region By Sales Managers 0%. Senior sales managers will be able to view reports based on regions or their sales managers.. For users to analyze and view data in a simple way it should be presented visually in form of graphs and charts*. More details can be added in a tabular format at bottom. 5% $0M 0% 0% 4. Detailed tabular data should be available for users to dig into the details. * Recommendations based on UX principles. Actual data visualization is out of scope of this engagement. 5% 4 Region Revenue Target Completion Northeast $ 0M $ 0M 40% Midwest $ 0M $ 0M 0% West $ 0M $ 0M 0% Dashboard Accounts Tasks Teams More 6

7 Accounts. All accounts under the current user should be listed here. Accounts can be listed as per performance. Top performing accounts can be distinguished by an icon. 4 Carrier 8:08 AM 00% Accounts 5 Active Accounts 5 Account name Short description lorem ipsum $M Deals Closed Amount $M Deals Pipeline Amount +0 Account name Short description lorem ipsum $M Deals Closed Amount $M Deals Pipeline Amount +0. User should be able to sort and filter accounts based on different parameters. When tapped the icons should open a popover with sort/ filter options e.g. Alphabetical, active accounts/ inactive accounts, top performing accounts, accounts with low performance etc. 4. Most important account statistics should be listed upfront. On tapping each account a detailed account view should open. 5. Sales teams/ members working on the account should be listed here. When tapped this should lead to the teams tab. Account name Short description lorem ipsum Dashboard Accounts Tasks Teams More 7

8 Tasks. Tasks pertinent to the current user should be listed here. All tasks tab should be open by default. Tasks can be divided into a) All tasks with the most recent on top All Carrier 8:08 AM 00% Overdue Tasks 4 overdue tasks Approve sales order Account Task Account Name Requested by Mary H. on 6 April 6 Was due on 0 March, 06 Approve Pending Performance appraisal Team Task Account Name/ Team member Name Requested by David S. on 6 April 6 Was due on 0 March, 06 Dashboard Accounts Tasks Teams More Completed Customer visit & demo Account Task Account Name Assigned by by Alicia M. on 6 April 6 Was due on 0 March, 06 Performance report.xls 5 Disapprove 4 6 b) Overdue tasks with the most delayed task on top c) Pending tasks and d) Completed tasks For optimum usability limit segments in a segmented control to 5.. Number of tasks under each section (All, Overdue, Pending, Completed) should be mentioned. Tasks with due dates can be viewed in a calendar view 4. If tasks are limited to some categories each task description can be labeled under a specific task type for at-a-glance recognition e.g. Team tasks, Account tasks, Operational tasks. 5. Quick action controls for certain tasks should be provided upfront e.g. Approve/ Disapprove for simple tasks; Set reminder/ add to calendar 6. Tasks can be dismissed from this list by swiping out. (Similar to s in an app) An undo action should be available for a dismissed item 8

9 Teams Adding gamification to enterprise apps enhances user experience by adding a fun element and increases engagement. Carrier 8:08 AM 00% Teams View Leaderboard TEAM NAME 0 Jane S. Sr. Sales Manager Me Alicia T. Sales Lead Derek M. Sales Exec. Top team 00 Pts. 80 Pts. 80 Pts. 80 Pts. 4 Gamification features should be used to foster healthy competition between teams and team members.. Tapping here will lead to a leaderboard which should display the current user s standing in his team and organization. This can be based on points earned due to sales and other performance parameters etc.. Teams under the current user Sales Manager. These teams can be displayed in an accordion control closed by default.. Top teams based on performance and points can be displayed on top of list TEAM NAME 0 David S. Sales Lead 50 Pts. 80 Pts. 4. List of team members within each team. Tapping on each member will lead to performance details and responsibilities and top metrics of each team member Dashboard Accounts Tasks Teams More 9

10 4 Carrier 8:08 AM 00% Make an Announcement Sales Handbook My Learning Track Settings Help More More Dashboard Accounts Tasks Teams More Defer secondary content to a list under the More tab bar section. Ideally this should be content that the user does not need everyday. Keep this list limited to no more than 6-7 items to avoid overcrowding and findability of content.. Feature for admin and top level executives and managers to make organization wide or team wide announcements/ broadcasts.. Knowledge base including tips and tricks, sales handbook, customer domain insights and similar material can be made available to users.. Learning management system features can be integrated for upgrading required job skills in employees and preparing employees on key client domain related topics. Training videos, quizzes etc can be integrated. 4. Overall app settings and help. Help should have documented help or onboarding tutorial for the most critical features of the app 0

11 Carrier 8:08 AM 00% Now 0 min Notifications Notifications Meeting Meeting with Paul S. for disc Yes No? Maybe Announcement Alicia T. Sr. Sales Manager All hands meet for this quarter. Notifications can be distinguished with an icon based on type of notification and a user photo where applicable.. Admin and top level executives and managers can make organization wide or team wide announcements. Such announcements will be displayed in notifications. Announcer details with the message can be displayed on tapping this notification. A character limit can be set for announcements.. In later phases of the product, the system can allow users to set reminders for self or team for certain events. The reminders will appear in notifications. 0 min Sales Classroom Training Sales training for sales interns :0PM Dismiss Snooze Dashboard Accounts Tasks Teams More

12 UX Recommendations Overall App

13 Top 5 UX App Recommendations and Tips Touch targets: For touchscreen devices, ensure that touch targets are appropriately sized (Apple 44 x 44 pixels, Android 48dp (48px on an MDPI device), Windows - 4px with a minimum touch target size of 6px). and well spaced to avoid selection errors. Also, when possible `place touch targets in the appropriate screen zones; for example, put destructive actions such as those for deletion in the Reach zone. Onboarding For users to get a good start, complex apps such as enterprise apps, can benefit from progressive onboarding of users or providing specific tips depending on how a user has used the app. E.g. The app can prompt a user after a period of time to let them know about features they haven t used yet. If your app has an intricate workflow, multiple sections, hidden functionalities, and/or gesture-driven interactions, then progressive onboarding is the best choice. Data visualization and dashboards on mobile devices As the goals in dashboard graphs is to provide insight, simple text summaries often work better than tiny charts or maps on small screens. Graphs are best designed keeping into account viewing distance and screen density (pixel per inch. Specific graph types can make use of device orientation e.g. Portrait mode is best suited for bar graph and landscape for trending line graphs etc. Mobile productivity Since the aim of this app is to improve employee productivity by building a mobile app in addition to the web interface, building an MVP is the best starting point for other user flows too. To start with identify: ) key tasks ) key information ) business benefit for each user type and how that can be delivered in a simple way on mobile devices. Then test with actual users, iterate and then expand the MVP. Progressive Enhancement When implementing UX solutions across devices provide enhanced interactions that take advantage of specific user or device capabilities, but ensure that they are not the primary and only way of accessing interface features. E.g. Hovering on a graph in the desktop environment can show additional details about the graph. These details if not critical can be stripped down in a mobile app graph.

14 Follow up services We are happy to provide follow up services for your product. To engage with us for follow up services or know more drop a message at info@uxwireframeexperts.com It is our promise to get back to you within two business days. Custom services we provide UX review of an existing digital product Competitor analysis User stories Persona creation Click-through wireframes Remote focus groups Remote moderated and un-moderated user testing Visual design 4

15 Thank You! 5