Redesigning Oracle NetSuite’s Onboarding UI and whole UI/UX of Expenses and Timer.
What I did in this project?
In this project, I’ll be sharing my detailed process and the reasoning behind the design decisions that I took to redesign NetSuite’s Login, Company SSO, Expenses & Timer Screen.
​
What is an ERP & benefit of ERP system like NetSuite in India?
Enterprise Resource Planning (ERP) are systems that are one of the most crucial assets for any organization because it tries to integrate all the different departments and functions of an organization into a single computer system to serve the various needs of these departments.
​
This not only gives us a birds eye view of the needs of the various departments of the organization. It’s very cost-effective with an integrated solution; different departments can easily share information and communicate with one another.
​
Oracle NetSuite(an ERP based software) can become an important asset which the small and rising businesses need because it’s need of the hour to get their work online. In India, small business can easily afford an android smartphone than a desktop. Hence, if we can rethink the android application from a businessperson’s perspective it will be very beneficial for rising businesses and could create a good market.
​
What was the challenge
I volunteered for this project because of few reasons which motivated me, are as follows:
​
-
The impact of changes in this application will be worldwide.
-
It’ll make more than thousands of users’ workload lighter.
-
There is a gaping hole to fix between the desktop application and Mobile Application, especially for android.
-
Users of this application have been asking for it. Source: Android Play store reviews.
-
Opportunity to work on a real-world application.
​
My Goal?
My goal is to rethink the application’s UI/UX from scratch keeping in mind,
-
To preserve the functionality of its old version.
-
Application’s Accessibility & Usability.
The Redesign Process
For the redesign, I selected one screen or goal at a time and followed the process below —
UX Research : First, I identified key pain points in each screen and the user flows from one current screen to another.
Ideate : Next, I came up with ideas to overcome the pain points and redesigned one screen at a time.
Design : I designed each screen and user flow.
Test : I conducted two rounds of user testing with 5 of my friends and improved the design from their feedback.
​
Research
I approached researching for this project with 3 ways in mind. User one on one Interviews, Accessibility testing and Google Play store reviews.
Reason behind opting for these methods :
-
User Interview- to know the people using product to better understand them on emotional and psychological level.
-
Accessibility testing- to ensure people with diverse abilities and from all background are included.
-
Google Playstore review- to define user’s needs and problems.
But due to some unexpected events and busy schedule of business persons I couldn’t get their one-on-one interview. So, I had to move ahead with Play store reviews. On Playstore, I decided to go for design only reviews which were low rated and highly rated as well to learn what made the user give that kind of review.
​
After reviewing I did an Accessibility test as well to get the perspective of users with diverse abilities. For this, I used the Google Accessibility Scanner app. And from the results, it was vivid that, how much this application was in dire need of rethinking.
​
Lastly, I used my own personal insights to try and get into the shoes of a first time user.
​
Google Play store reviews
Google play store reviews showed that there was little to no satisfaction with the current UI and how much users wanted a new user interface and better experience.​
Accessibility Testing
I did accessibility testing on the NetSuite app using the Google Accessibility Scanner app. With that app there were 6 places where these 3 problems occurred.
​
-
Text Contrast problem
-
Touch target problem
-
Item label problem
​
Additional points — (personal insights)
​
Apart from traditional methods to understand user and products. I used some other readily available resource like YouTube and personal experience with the app to learn more about the NetSuite and it’s way of providing support. I gathered some additional problems on that NetSuite has
​
-
A steep learning curve which is understandable from the fact that how feature-rich NetSuite app is, and it’s evident that this learning curve is being flattened by several NetSuite tutorial videos but it wasn’t accessible directly from inside the application.
-
Moreover, we really needed to think in terms of customer service and how can we help users when they are stuck at some point from inside the application.
After knowing the user reaction of the current version, user’s needs and problems which needs to be addressed from my personal experience. I gained lots of knowledge on what to fix. Then, I started finding ways to-do redesign for each screen by defining it’s pain points.
Redesigns
In this stage at first I thought of redesigning only by adding new features to the app and tweak a little in design. But as I did my usability testing I learned that, users needed a minimalist and clean approach to the app due to lots of information being served to them. So, I went ahead with this approach in my redesigns below.
​
​End User license Agreement Screen
-
Pain point : Difficult on-boarding and conversion rate.
-
When a user installs the application EULA is shown to the customer upfront, which isn’t a proper way to present. As in many modern-day applications, it is observed that user is given a choice to go through EULA or get started right away if they want to.
So in my redesign — When the user opens the application first time they can easily get started right away and still have the choice of reading the EULA as well. It helps the user to get onboard easily within 3 clicks.
Home Screen
Pain point : When a user wants to log-in, giving them two sign-in options in form of tabs isn’t the preferred way as it may confuse the user.
-
The alternative sign-in options are primarily kept as secondary actions, tabs are mainly used where there is a collection of something, for instance, a collection of pop music and a collection of rock music.
In my redesign : the sign in with Account ID is placed at the bottom.
-
So, the whole focus of the user is on signing in through email-id and password and then looking for the alternative which is Signing in with Account ID.
Help & Support- new feature
Pain point : While going through the play store reviews, users demanded the feature of help and support which was missing in the app.
-
It was a very frequently requested feature. Users wanted a step-by-step guide and in-app support through which they can get their problems resolved. Help & Support can enhance the user experience two-fold.
And due to the fact that NetSuite is such a gigantic service which would be having many queries resolved in the past. It will be very beneficial for users to search their queries and get answers from that pool of knowledge. And if their query remains unsolved, they can reach out to customer care and get it solved or they can do it by themselves by adding screenshots of the problem.
In redesign : Keeping that intention in mind I added this new help and support feature.
-
I tried to design that idea by giving a search bar to search for their queries in form of the questions that get results, and other support features which NetSuite can provide enhance the support for their users.
Sitemap of Help & Support
Expenses Screen
Pain point : In old design expenses are giving very little information with a wrong hierarchy because in an expense its memo is containing relatively more information about the expense hence memo should have an upper hierarchy than its date and time.
Due to no clear distinction between each month’s expenses of a particular year, the user struggles hard to locate its desired expenses.
​In my redesign : I made months as a heading and below, all of its expenses done in that particular month. I made Memo and its amount bold and kept dates and time as regular with low opacity because they’re like metadata of an expense.
New Navigation: Add expenses->Create expenses->Memo
Timer Screen
New Nav: Play button->Stop & Save->Timer Memo
Pain point : In old screen of the timer, everything which was timer related is compressed into one particular section of the screen and it was distracting the user while the timer was running.
-
Users felt perplexed and distracted whether they should focus on the timer and fill out the memo first or should go through the previous timer memos first.
-
Time log feature needs to be labelled since it is a different entity unlike + sign in Expenses screen which creates new expenses.
​In my redesign : I placed the Timer play button and recent memos on the same screen. While the running of the timer takes on the next screen after the user taps on the play button.
On this screen, the user can fill out details related to the timer memo and can save it which will take him to the Timer memo screen. The timer memo is containing the collection of timer memos created so far. Using a tab was an easy choice to go for since it helped the user to focus on one task at a time without being distracted.
I also labelled and made the timer log icon bigger to take care of the accessibility problems:- item label problem and touch target problem.
Time Log->Time Log
Accessibility Problems
Text Contrast Problem : Consider increasing this item’s text foreground to background contrast ratio. The contrast between the foreground and the background colour is not enough.
​Item Label Problem : This item may not have a label readable by screen readers.
Touch Target Problem : Consider making this clickable item larger; the height of the item isn’t 48dp which is essential for any clickable item to have
Accessibility Problems
Issue 1: Text Contrast problem of Alert Card
Got it button & Warning text both were having text contrast <4.50:1. In my redesign, I used the colour code #365782 and the contrast ratio now is 7.38:1 making it accessible to AA and AAA groups. I also increased the touch target area of the okay button.
Issue 2 : Touch target problem of Remember me
Since toggle is a clickable item, it’s target height which is toggle touch perimeter should be 48dp. Its current height was 27dp. After redesign toggle touch area is 48dp now.
Issue 3 : Touch target problem of the dropdown
In my redesign, I made the drop-down at 48dp which was 46dp in the old redesign and was creating inaccessibility.
Issue 4 : Text contrast problem of call to action buttons
Both the feature TAKE A PHOTO and PICK A FILE suffers from the Text Contrast problem where the current text contrast is 3.01:1 and recommended is picking those colours which have contrast at least of 4.50:1. In my redesign, I used the hex code #365782 which has a contrast ratio of 7.38:1.
Issue 5 : Item label, Image contrast, Touch target of Help button
3 problems lie with this single icon
-
Item label- This item may not have a label readable by screen readers
-
Touch target issue here its 24x24 dp consider making it 48 dp.
-
Image contrast — its current contrast ratio is 2.03:1 while suggested is 3.00:1.
In my redesign : for mitigating the problem of image contrast problem, I used a text link instead of an image for forgot account id. Increased its contrast ratio to 7.38:1 also its touch target area is now 48dp.
Issue 6: Text contrast problem of Forgot button
In the old design, the text contrast was 3.01:1 which reduces the accessibility. So, in my redesign I used the colour #365782 which has more contrast than the #0B9DE5.
Test
Everything till now, every design and decision has gone through countless brainstorming hours and iterations. Yet, there is always a scope of improvement which can be done only by user testing.
In this phase, I tested my prototype with my friends and took their feedback for improving the usability of the design. I also went through various other User Interfaces to try and learn. So that I can bring up the minimalist and informative designs because businesspeople are the busiest people on this globe. Hence, in my opinion making the application look clean and putting the important action placed upfront is more important.
Here are a few examples that my designs underwent to reach the final stage.
End User License Agreement
Login
Company SSO
Timer
Timer Memo
Create Expenses
Future Scope
The future scope of the redesign can be understood from the fact. There are some features that can be designed further after learning how they will be functioning inside the app.
-
Search in Expenses.
-
Sharing of Expenses in form of the excel sheet.
-
Sorting of Expenses according to year.
-
Search in Help and Support.
Conclusion
It’s been an amazing experience. I believe I achieved all of what I set out to do. The objective of this exercise wasn’t to create an entirely new product but to add features to an existing one and giving new experience to the user, while seamlessly weaving their brand and message throughout. It was also a great learning experience! I got to practice my UI skills. And I am super happy that I worked on a great product like Oracle NetSuite which impacts lots of lives.
I am excited to add new features to existing digital products in the future. I feel a lot more confident on my abilities after creating this case study.