Responsive Web-App Design
Redesign of the Zoho Documents module to create a more intuitive and user-friendly app.
Overview
Zoho Docs is an Online Document Management System where you can store all your files securely in a centralized location, and access anywhere online.
The company has more than 25 online apps and a range of online applications making it easier for individuals and businesses to manage all their work. Zoho hired me via Upwork as a freelance UX/UI designer to redesign one of its Web-based applications ZOHO Docs.
Problem Statement
The Company has reached me to redesign the app so it would store and manage files effectively and easily and users would access them via smartphones and tablets.
Timeline
4 weeks to redesign and provide final materials.
Expected Outcomes
Competitive Market, More Features less Functionality
My Role
-
User Research
-
Experience Design
-
Information Architecture
-
Form a strategy and set the goals for the team.
-
Coordinate the team, and create a workflow that is motivating and productive.
-
Define Problems and create user journey mapping
Process
I have used a research-first approach and divided my process into three Phases
-
Discovery and Planning
-
Bricklaying
-
Usability Testing
.png)
PHASE 1
Discovery & Planning
I have spent 4 days at Discovery Phase to gather internal perspectives, catalog existing content, and conduct a heuristic evaluation of the current site.
Step 1: Stakeholder interviews
The main purpose of Interviewing Stakeholders was to get some insides into previous research that has already been done and make sure that Stakeholder understands the Value of MY RESEARCH.
Sample Interview Questions I have used in phase 1
-
Who are the users?. Because stakeholders are not users, they often have an incomplete perspective about what users need.
-
How will success be defined? Is it higher usability metrics, like task completion and conversions, or something beyond analytics, like revenue?
-
What has already been decided? What is the deadline for the website launch? What technology will be used to build it? How many developers will work on the project?
Step 2: Content Audit
Before jumping into a new design I have listed the website's content and created Information Architecture for each flow separately in order to be armed with the knowledge that will aid in a comprehensive analysis of my content.
.png)
Step 3: Heuristic evaluation
I have typically followed some variation of Jakob Nielsen’s model and focused on four areas of heuristic evaluation: visibility of system status, user control & freedom, consistency & standards, flexibility, and efficiency of use.
I compile results in a short report that includes “problem” and “recommendation” information for each heuristic.
PHASE 2
Bricklaying
With input from stakeholders and a review of the existing content and design complete, I have bravely moved on to the bricklaying phase and focuses on end-users.
Step 1: User interviews
I did a video interview with 2 current and 3 future users of the app and asked them questions from my script which I have prepared in advance. Talking to potential customers helped me to understand how they interact with Zoho Docs and How my redesign can help them?
Based on the interviews finsings I created user stories to highlighting main user goals.
As a lawyer I always keep documents from my clients and having Customized Folder would allow me store them appropriately.
As a lecturer when I receive questions related to grades from my students I want to have an option to quickly view their assignments.
As an accountant, I want to take a screenshot of annual reports and directly upload them from my Mobile.
Pain Points
The main pain points which I have highlighted after User Interviews are:
-
Uploading the files process is confusing as the app is not responsive.
2. View File option not available
3. Confusions among files /need to be customized/
4. Storage issue
Step 2: Personas
Previous research has uncovered two user groups so I have created provisional personas representing each Group
They are paid and Unpaid users who are currently using the app.
Target users are middle-aged adults who are more serious and less fun people. Like an accountant and lawyer.
The Business Owner
Behaviors
Demographics
Goals & needs
-
Manages multiple Organizations
-
Spends free time with family
-
Is punctual and never late from work
-
Save time
-
Stay organized
-
Needs tool to keep all important documents safe
-
Needs to read daily project quickly from the phone
-
39 years old
-
Has two Startups
-
Lives in India
-
Owner/Manager
PHASE 3
Usability Testing
With input from stakeholders and a review of the existing content and design complete, I have bravely moved on to the bricklaying phase and focuses on end-users.
Wireframes
First, I create low-fidelity wireframes. Then showed these wireframes to users and stakeholders and made changes based on their feedback. Eventually, the low-fidelity wireframes become a clickable prototype, which is what I use for usability testing.
Solution #1 Improved Navigation at Create Folder flow
Problems
Solutions
Solution #2 Responsive design to solve the main issue with accessibility
Usability Testing & Test Evaluation
After conducting validation tests, the user experience improved in the following ways;
LESSONS LEARNED
After successfully delivering all the material that the ZOHO team needed to move on to their next production phase, my collaboration with the team ended.
Working with ZOHO and building an experience from the ground up has taught me valuable lessons that I will take with me to my next project.
Going wide and not deep:
As this was a small project and I was the only designer in the team, my hands were full of different design tasks including app redesign, web redesign, market research, usability testing, UI design, brand identity design, etc.
This situation allowed me to take a wide range of tools and skills to use which I found very beneficial