Designing my first platform agnostic SaaS product.
The inside process and takeaways from designing the first version of Zoho Sheet — a SaaS based spreadsheet application on mobile platforms.
Zoho Sheet is an online spreadsheet application that lets you create, share, collaborate and publish spreadsheets from anywhere. Given the role of product designer, I was responsible designing for its mobile products. I am sharing the process of designing the multi-platform products from beginning till it was made available for the users.
#1 Challenges and goals
Designing a product from scratch can be quite laborious as similar to constructing a building from its base. Good understanding of the user goals is highly important while building a complex application, especially designing for the mobile platforms. Studying various existing products available and conducting personas were the primary tasks.
From the initial few researches and personas, we identified that the users are trying to accomplish very shorter and quicker tasks through mobile applications. With respect to designing a spreadsheet application, the primary goals for most of the user to access and view the spreadsheets or just to share the sheet they have viewed. A minimum number of people would want to do very complex stuff on the go.
#2 Ideation and low fidelity sketches
After having found the basic goals of the user, we jotted down all the features that we could deliver that would appease most of the user needs in the first version of a product. Using low fidelity sketches gave me a perception and help me conceptualize a vision of how the product and would shape up.
#3 Visual design and Platform adaptiveness
The phase that excites me the most as you get to see your ideas come alive as high fidelity prototypes. This part of the process gave me a chance and challenge for my visual design skills. Desingning for an application that involves complex and vast amount of data had a lot of use cases to satisfy and also give more room for the user to view the data with ease.
“We just stuck to the basics by adopting to the native guidelines of each platform”
i) Designing for multiple platforms
The application was designed to cater in the platforms of iOS and Android. Although it is impossible to meet up with the guidelines completely, it adheres to its maximum with a very few custom elements. The iOS Human Interface Guidelines and the Material Design guidelines were followed for the respective platforms.
Why go with native guidelines and components?
- In the context of mobile applications, native elements are one those provided by the platform vendors themselves in an attempt to differentiate themselves.
- Comforts the user with familiar navigation pattern same as that of the operating system he is using.
- Perfomance can be optimal when using the components as it would directly impact the user by saving time when performing data heavy tasks.
- Helping developers with the components familiar with them to bring out the designs alive effectively.
- Accommodates itself when the operating system bring in a visual change to a component.
ii) Framing a design system and visual standard
The visual elements are the skin of an application through which the user communicates with the app. Visual elements primarily involves weaving the colour, typography and framing the style of interface components.
“Visual language primarily involves weaving the colour, typography and the style of other interface components”
To streamline this we created a style guide that will document a list of all the colours, typography properties, grid system and components used throughout the application. This also helps the developers to get an idea of the components and importantly the consistency is maintained when a second person works on the design. Each platform (i.e) Android, iOS had its own style guide designed to accommodate to the respective operating system, display resolutions and form factors.
iii) A Component based design
Reusability of components helps in maintaining consistency across the application. Unleashing the power of symbols in the sketch app, adapting component-based design has been easy. Nested symbols can be created for multiple variations of a single symbol.
iv) Grids and resolution
A grid-based design improves readability and presents an even spacing between elements. An 8px grid @ 1x resolution goes well with both Android and iOS as their components are mostly based out of the same and also provides more legibility to the design. Having the power of vectors in sketch, icons in 1x can be scaled to assets for multiple resolutions.
v) Iconography
The icons used in each platform were designed adhering to their respective guidelines. The iOS followed thin line icons and some bolder icons for android.
#4 Iterating solutions
A long-winded process and also a time consuming one which would take another writing to explain about 😝, yet another essential part of the design process. Iteration is good when done to the right amount and for its need. There is always a better version of what we design. We went into iteration based on some feedback from internal users and A/B tested and multi-variate tested various prototypes when entirely needed.
“There is always a better version of what we design”
#5 User flows and interactive prototypes
This can help when there are a large number of screens or subflows. User flow diagrams helps identify the interaction between various screens and also gets us to know the various use cases involved.
Interactive prototypes are used to demonstrate by providing a hands on experience of a feature or a micro interaction.
Tools that can be handy in this phase:
- Adobe after effects (for micro interactions).
- Principle ( For UI interactions and on event transitions) .
- Marvel app ( Screen by screen interaction).
#6 Design to adapt to the newest
Similar to garnishing a dish, these are few add-ons that can make your app your standout giving a perspective of an up to date fresh application. Zoho sheet makes use of all the native integrations.
Native add on integrations with respect to each platform.
iOS:
- View recent spreadsheets on 3D touch.
- Use another application simultaneously with Split View.
- Drag and drop files from another application.
- Send files via iMessage.
Android:
- App Shortcuts
- Split screen
- Home screen Widgets
#7 Conveying designs to the developer
Conveying designs to a developer plays a vital role as it is more important to bring your designs alive. Conveying specification like spacing, colors, font size manually can be quite tedious. Hence using tools like zeplin or Sketch measure has helped us with this phase to do it with ease. My tool of choice has been zeplin since it also helps me handover the assets and we had also been using it as a collaboration tool and it even conveys designs as code snippets that might be handy for developers.
#8 Audit and validation
The job doesn’t end there when the hand-offs reach the developer. This is the final phase where you get to see your designs transform into a beautiful product. Close inspection of how a feature turns out to live and cross-checking and validation of the given specifications and working closely with the developers to bringing out your designs are the imperative tasks of this phase.
My Takeaways :
- Had an Opportunity to design a complex SaaS product from scratch.
- Experience designing for multiple platforms and multiple form factors.
- Understanding platform guidelines and deliverables.
- Inside happenings of an app development process.
Give it a spin! Download Zoho Sheet on the App Store | Play store
—-
P.S: Thanks for reading! This is my first attempt at Writing 😀
