StartWith - Designer's Essential
An app to streamlinethe design process from start to finish.
Overview
At Zoho Corp, we started building a new screen design tool that allows designers to complete the entire design process from designing wireframes to handing off to developers and to stakeholders.
It would help the designers to accomplish their tasks without jumping between tools. Most importantly, it would cut-down 80% cost of purchasing multiple designing software for Zoho Corp and its clients.
Role & Responsibilities
Senior Product Designer | Zoho Show
User Research, Interaction, Visual design, Prototyping & testing
Client
Duration
Feb 2016 - Jan 2019
The Problem
The design industry is being revolutionised now (2016) more than ever. Adobe Photoshop and illustrator had been dominating the industry for decades. We had to decide between Photoshop, Illustrator or Coreldraw for design purposes. There were not many options left for designers to choose the more efficient tool just a few years back. And there were no distinct tools for interface designs which contained specific features. But now, Sketch has taken down the Goliath and redefined the course of the field. As a result, task-specific tools are emerging in the market every day. This shift empowers designers and allows them to accomplish their goal much more efficiently than before. As a wise man once said, With great power comes great responsibility, the responsibilities of designers are also increased tenfold.
There is no option for designers to do brainstorming, wireframing, interface designing, prototyping, testing and collaborating in a single platform. Designers use at least 3 to 4 tools on a daily basis to accomplish the tasks. Shifting the assets from one tool to another, sharing the output for stakeholders in a feasible viewing format, managing files and folders and so on are hectic secondary tasks. So the demand for the tool that handles all these trivial tasks for designers and rescues them from these frustrations is on the rise.
User Survey
I conducted a user survey to collect information and data points about users' needs and factors that influence their decision. It gave me measures about users' design choices, how they plan their project, and what they would like to see in a design tool. It helped me identify my potential users and their level of understanding with technology, pain points & frustrations, needs and wants. The User Survey pointed out some key characteristics of how users plan their projects and tools in particular.
Findings of the survey
- 80% of respondents only use Mac for design purposes.
- Traditional media are still best for brainstorming.
- Sketch is the most used tool for wireframing and Interface Design.
- Though Windows’ users use Photoshop for wireframing and Interface Design.
- Figma moving forward in the market and gained strong trust from the users.
- Invision is the most used tool for Prototyping.
- Adobe tools are facing strong competition in all segments.
- Respondents use an average of 3.5 tools to accomplish their goals.
- Most of the respondents don’t use handoff tools for delivering designs.
- Zeplin and InVision have almost equal usage.
- Users rely on the local machine or internal server to back-up the files.
- Identified huge scope in File Management and Version Control.
User Persona
Based on the survey respondents and after identifying my potential users, I interviewed 12 of them to know more about their design experiences, how they would plan their project and UX methods in particular, what considerations they make, what makes them to choose a particular tool, and if they are willing to suggest improvements in the existing tools and processes. I clubbed similar users into one group and created three unique user personas to summarise their goals, needs and their frustrations regarding the product design process.
Competitive Analysis
I analysed numerous competitor products on wireframing, designing, prototyping, handoff, and collaboration to see how they help their users-potentially solving their needs. It gave me a great understanding of the current market and potential opportunities to grab on. I found at least one new tool every day on the web as it indicates the design market is booming more than ever.
I formed the analysis questions based on the needs that allow completing the process of building a product from inception to placing it in the market. Though Photoshop has so many cool features like image filters, masking options, brushes, it does not contribute much in designing an Interface. Those features are not relatable to the current needs, therefore Photoshop falls short in the competition.
User Stories
My next step in the design process was to organise everything and give a structure to the app. I started by defining the minimum requirements or features for the app by drafting the User Stories.
I put the users' needs and goals and competitors' features into different user type buckets. The information collected from surveys, interviews and competitive analysis have been grouped into the user types accordingly. That laid the foundation for the next step i.e. wireframes and defines my MVP goals in a clear way.
Wireframing
Wireframe sketching is the first step which I do to translate written matter into a visual layout. I have done tons of wireframes for each screen and features and got approval from the Product Manager and Dev Team before making the Visual Design. That helped me to decide the visual layout by placing appropriate UI elements and sizing them accordingly.
Visual Design
It's the most exciting part of the design process. It's also the most crucial project stage as it involves designing detailed visual design screens of the application. I chose an appropriate color scheme and typeface and eventually set up a style guide that describes the usage of each type of design elements used in the application.
Following the framework established in the wireframes, I created each screens and elements with proper alignment, size, color, and suitable icons. I conducted preference tests to base my design decisions.
Prototyping & User Testing
I created an infinite amount of interactive prototypes to implement usability testing before starting software development. It created the opportunity to check functionality, design, UX, marketing and business goals. We did multiple rounds of testing within our team as well as a selected group of designers from multiple teams. It allowed us to observe the users working on various features of the product, trying out complex interactions and tasks and helped us to remove any last minute glitches.
Also, creating prototypes helped developers to understand the flow and complex interaction.
Learnings and Outcomes
It was tempting to think that I understand the users because I am a designer too. By assuming so if we compromised on the research part, it would have risked the product’s result and my team’s effort. But we decided to put aside the temptations and we were building the product based on the validations from the start. We conducted in-depth research, online surveys, user interviews, trade shows, and competitive analysis to understand the users as well as the market. It opened the gateway to great possibilities which we could have missed If we went with assumptions.
And testing the product in all stages of the product evolution helped us to identify the problems early on. We did multiple rounds of testing within our team as well as a selected group of designers from multiple teams. It allowed us to observe the users working on various features of the product, trying out complex interactions and tasks and helped us to remove any last minute glitches.
Creating a design product from scratch could be a dream project for any designers. Though It was thrilling and glorious, it was also dauntingly huge. It tested my tenacity and patience along with my skills. The proper guidance from the product manager, close communication with the team members and of course a lot of research and testing allowed us to build a world standard product.
Other Projects
EXADS Website Redesign
FlyUX Flight Booking App
Let's Connect
Get in touch via email or LinkedIn, and let’s discuss how I can help you.
