Scope of Work
Primary work included
- User Research
- Omni-channel Platform Design (Web/Mobile/
- UI Design (iOS/Android/Desktop/Print)
- Design System (both Corporate Website & Web App)
- Digital Branding - Identity + Typography + Brand Colors
- Content Strategy
Business Goals
The client was very clear that the project has.
- Simplify accounting for small and mid sized entrepreneurs
- Establishing Hisab as an attractive alternate to legacy players like Tally, Quickbooks, Zohobooks, Etc.
- Native suport for Indian tax and accounting practices (as most big players follow US based practices and vocabulary)
- High customer acquisition
- While primary focus is Indian sub-continent, design for eventual release in middle east
- Create a distinct brand and project it as such
- With a focus on migration (from other platforms) – so that Hisab is easy to adopt
- Cloud first approach for easy access anytime, anywhere – without geographical limitations
- Design to reduce customer support costs
Design Strategy
As the product designer and strategist it was very important for me to create a strategy that would not only help deliver a quality product but also a product with a compelling proposition and deliver it all within the constraints of time and resources.
For any design project the standard approach is to Learn/Empathize then design and then iterate. More stages can be added to this process and they can have different names. But these stages are like the seven fundamental musical notes. Infinity happens with and in-between these notes. Similarly, design craft also takes place in and around these prescriptive sounding stages. Merely following prescribed steps is not design process. Thus, any product design project is a unique blend of circumstances, resources and of course the team strength.
Product design project is a unique blend of circumstances, resources and of course the team strength.
In this project we decided to focus on the opportunities that we can exploit as a new entrant into a saturated market with many big players. Instead of fighting the battle of features and coverage depth, we decided to design for a sharply defined use case and market. Research section has more on this.
We decided to focus on the following aspects:
- Easy, adaptive, familiar: going beyond traditional software
Including GST reporting, TDS - Conversational language instead of accountancy jargon
- Make data entry efficient and simple - don't try to physically mimic real world documents
- Apply business intelligence to manage & filter data and search; custom dashboards with BI features
- Comply with UX best practices of table & form design
- Use AG-Grid to display data throughout the interface
- Optimize design for HI-DPI screens i.e. take advantage of extra screen space intelligently
- Use AI/ML based automation such as smart templates based on frequency of tasks
- Design for print and bulk operations
- Add built in sharing/mailing capabilities
- Keyboard acceleration for power users
Project Plan or Design Process
In design agencies, such as mine, the project plan is a collaboration between sales team, design head, designOps head, design lead, the clients as well as various other people who need to be consulted depending on the project type, industry specialization, previous experience etc.,
The plan for Hisab was no different. We consulted research specialists to estimate the time, logistics and resource requirements, DesignOps head for availability of designers, our esteemed clients for their appetite for risk and their comfortable budget range. Our sales team did a good job of setting the expectations in terms of essential project stages, criticality of budget for research and the exact deliverables and their final format of various delivery artifacts. See plan below.
Based on the project budget, timeline and allocated resources, initial project plan was for a 17+ weeks project with the understanding that extensions to the timeline maybe required.
Official team*
1 x Senior Strategist & product designer (that's me)
1 x Senior Researcher
1 x Senior UX/UI Designer
Resources on loan
1 x Senior Visual Designer (3 weeks)
1 x Content Writer (external agency)
*Unplanned bounty of 8 part time volunteer UX/UI designers at various times during the project.
As is apparent above, we did not have a dedicated visual designer and branding expert so we needed to use the time of the allocated resource smartly, we couldn't ask the visual designer to spend the already short allocated time to create logo for the product as it would have left us with little time for him to work on the complex design system needed in the project.
To got over this challenge, we floated an inter-agency, intra-studio design competition for logo design and were rewarded by some very high quality submission. The client loved the results and happily selected one of the the entities, solving our resource crunch issue.
Key Activities
Some of the major activities undertaken during the project can be divided into the following major areas:
Governance
- Conduct periodic progress review with the the client and stakeholders
- Execution analysis of the project based on backlog activities to diagnose and/or stave off bottlenecks
- Send daily and weekly progress reports with the team and all stakeholders
- Conduct daily stand up with the team and client and agency SPOCs
Discovery
- Internal Preparation - relearning Accounts and Book Keeping
- Desk Research - competitor analysis, parallel product study, gaps and opportunities mapping, UX and feature audit of major competitors, navigational analysis, understanding domain eco-system, best practices
- Conducting all important Discovery Workshop and consolidation of workshop findings to identify user segmentation, personas, setting platform objectives and brand alignment
- Primary Research - stakeholder interview, user interviews, practitioner interview, working with marketing research company for persona creation
Analysis
- Consolidating platform objectives
- Analyzing gaps and opportunities
- Mapping Key User Flows
- Finalizing Features & Functionalities
- Initial Information Architecture
Production
- Creating Basic Brand Style Guide and Logo
- Exploring Visual Direction & Selecting Theme
- Creating Process Maps (macro level)
- Creating Low fidelity sample wire frames for key templates
- Creating Design Style Guide
- Design System Creation (App + website), Reusable Component creation
- Complete wire frame production
- Content audit
- Hifidelity screen production
- Micro-level screen audit(s)/reviews
- External design review
The Big Activity - Workshop
Research
Bulk of the research load was taken up by an external market research company. This freed us up to concentrate on making sure that we used the research report to its full extent. One of the major contribution of the research agency was the concrete market segmentation and primary persona creation. Through out the project we relied heavily on these inputs.
On our side, we started with the desk research in the following areas:
- Understanding the direct and in-direct competitors with competitive analysis
- Feature matrix analysis to make project more useful and effective
- Trend analysis to understand the market trends in the market
- Keyboard accelerators analysis to save the time & effort of users
- Heuristic evaluation of competitors to understand their pros and cons
- UI Forms analysis to make data entry for the users
This was followed by in person interviews with accountants, entrepreneurs and subject matter experts in accountancy software like Tally and tax professionals.
Understanding the target user(s)
Final Personas
Project Management
Setting up a shared and accessible project workspace is important for smooth functioning and clear communication. A properly setup workspace also helps in change management within the team as well as for long term documentation.
Below is a screenshot of the project setup page.
Over the years, I have used several project management software (Jira/Basecamp/etc) however, cloud based shared spread sheets are the easiest to maintain and manage. Housekeeping tasks are easy for designers and stakeholders are easy and frankly less intimidating.
In this case, our shared Backlog Google sheet helped manage and track tasks and task progress played a vital role in keeping the project on track. Daily review of the Backlog became a ritual and kept the clients update in real time as well. Thumbnails below are screenshots of our Backlog activities.
Besides the Backlog, all stakeholders and team members were sent daily and weekly updates about the work progress and pending/blocking issues. This helped build confidence and resolve issues very quickly. Keeping the client in the loop also got us their full involvement and confidence in the team.
Branding & Design System
Before any visual design could begin, we had to get the digital branding in place. This was a challenge for our small team so we had to get creative and float a company wide logo competition to come up with options for the client. Logo design idea along with client approved typography and color scheme became the basis of the complete branding and Design System design.
Major Activities
- Share vision with stakeholders
- Coordinating with marketing research agency for branding inputs
- Working out brand communication and content strategy (for identified target audience)
- Getting logo direction approved and then refined for online use
- Post branding working on Design system on multiple fronts
- Manage a separate backlog for every thing that was part of branding and DS
- Design review of all components with lead visual designer
- Validate and review all delivered designs and components
Logo Design Competetion - Winning Entry
The Design System
A multi-modal SaaS platform's Design System by definition has to be much more comprehensive than usual. Some of the use cases that need to be considered are as follows:
- SaaS Application portal (think Gmail Web)
- SaaS Mobile Apps for iOS/Android
- SaaS Desktop Application (not web containers)
- Company Website (Marketing)
- Accountancy related print material such as memos, invoices, financial document templates etc.
And everything in multiple breakpoints (screen sizes)
But before the everything, comes typography! Typography being the glue that keeps every visual element together on the web, we paid special attention to it. Three different type scales had to be created to accommodate the above mentioned use cases. A simplified scale was created (with fewer headings and weights for the App) and the full scale for other more visually complex use cases such as websites etc.
The Typographic Scale
After thoroughly testing grids and layout it was to the usual grid of component creation. To accelerate things we used an in-house component library to speed things up.
Final Deliverables
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Design & Production
UX design and production process is pretty straightforward once the design system is tested and vetted. We started with creating a preliminary information architecture, we brought in all the data into our Miro board. Data such as IA, vocabulary items, financial documents and forms.
Hidden relationships between entities were articulated and agreed up by all stake holders. For example, what does an account in Hisab system entail? Can it, or should it, be connected to one business or multiple business? Are there any generic SOPs to handle core features like data entry forms? Etc. Agreeing upon these articulations is important to be agreed upon between all stakeholders in order to ensure design team (and dev team) is first time right (FTR) as often as possible, thus reducing production cost ($$$).
Armed with process maps, SOPs, information architecture (IA), etc., the team progressed to the beloved stage of wireframing and much adored hi-fidelity visual design.
In general, wireframe are articulation of a product's implicit and explicit facets visually on a macro level... and visual design mockup is marrying wireframes with branding, communication, typography etc...
Low fidelity wireframes were first designed to create macro level consensus between tech, content, marketing and business stakeholders. Then we moved to final wireframes development which became the precursor to visual mocukups.
Visual design mocukups went through rounds of review for micro level details, visual accessibility, UX writing, etc.
