Brand Management
One of our applications did not get positive feedback from clients during the demo. Usability testing revealed that flows have some ambiguity, lack important features and navigation is not understandable to users. Overall the application is less intuitive. So, Stakeholders and product owners suggested revamping an existing application.
Role
UI Designer
Usability Expert
Timeline
3 Monhts
Team Size
10+
After 3 months of teamwork including heuristic reviews, multiple iterations, brainstorming sessions and internal demos. I have built our core business idea and client expectation into a final product. We got positive feedback from our stakeholders & a larger audience during demos. Moreover, This time we got 2 clients from offshore interested in our product with requesting some additional features.
I was the sole UX designer on an Agile team comprised of 4 developers, a product owner, a scrum master, and a Test engineer. I was responsible for determining the overall design direction of the project while collaborating with the rest of the team on ideation.
Research
Usability testing revealed there existing problems with the interface. I have attached the lists below. Since its an enterprise application, User research is challenging to gather. However, product owners done has done some marketing research and product needs. So we have a clear goal of what needs to be built.
I have started with some existing docs as background research. I had done stakeholders’ elevator pitches to understand product goals, vision and targeted users. I got answers for my what, where, why, and how. Since its solution-based approach, Once, I understood my goals and needs, I started my definition process with journey mapping.
Research observations noted here (Doc format)
Rerquirement
-
It should be possible to move work-step from one step to another once completed.
-
In case a team needs more information, they can push additional KPIs to fetch the information from Partner.
-
This will result in partner receiving email/SMS alert that they have to provide more information
-
Partner can provide additional information from Partner Portal. This will be seen as an alert in the Partner Portal dashboard as well.
-
Each work step will have a defined SLA (service Level Agreement). If not completed it will go in escalation flow to the team head. This will trigger Email and SMS alert.
-
Each module will have its own workflow and teams involved. Hence Workflow and involved steps should be configurable.
-
It should be possible to define teams with name and description. While defining team existing users to be associated
.
-
Rejecting the approval and sending the workflow to previous step
Existing issues
Too systematic/robotic process
Current system designed the way that looks like everything is auto processed and done by non humans. Inside a team there are some persons who processed the partner forms. So it's better to reveal names to feel like more human processing.
Creating custom fields
If a team needs any additional details for any queries related to form, they create custom fields and it requires a lot of learning curve. We may help team members to approach a simple process to get additional details for partners.
Update process for Internal team and partner
No system for tracking team activity and workflow details. If already implemented then it needs to be improvised.
No telephonic support (if needed)
Instead of highlighting email and chat. Telephonic conversation resolves queries faster than others. So it's better to give importance on UI. Emotionally it feels like more connect with partners.
Define
-
HMW approach
-
SCAMPER
Why
For our goal
Why is this product or feature important?
Answer: Workflow helps customers take a collective decision, there are different approving hierarchies as well as different teams who owns responsibility. This requires a well define workflow to address any approval requirement in the system
What problem are we trying to solve?
Answer: Request Approval, Collective Decision making
What impact does it have on the world?
Answer: A great impact when we talk about how enterprises work. Different teams own different responsibilities, hence collectively they should collaborate to perform an end to end task, like in our case Partner Onboarding, Billing processes, Dispute acceptant and closure, etc.
How does this product benefit customers?
Answer: This will mix well with the hierarchy and approval structure of any company that buy Subex PM solution to perform a task that needs multiple stakeholders to validate and approve
What business opportunities does it create?
Answer: Makes the Product flexible and brings in alignment to the actual business processes. This is a core needed and a must have for any product
How does it extend the company’s mission?
Answer: Makes the product more robust, have features that are expected from a product of this nature. Hence it is aligned to our strategy of #Thinkcustomer
Who
Define the audience
What are the different groups inside this audience that have different needs?
Age: 25 – 50
Gender: Male and Female
Location: All
Occupation: Doing Business
Devices: PC, Laptop, Tablet, Smartphone
Languages known: Arabic & English
Type of users:
-Direct seller
-Indirect seller
-Distributor
-Partner Manager
-Account Manage
-Finance Team
-Legal Team
-Billing Team
When and where?
Understand customer’s context and needs?
Where are they physically?
Across the Globe
How much time do they have to perform an action?
Normal/ Not immediate actions.
Are they on a specific digital app or platform?
Platform / Web app support
What emotions do they experience
Happy, Neutral, Disappointment, Excitement
What
List ideas
What could the company build to fulfil the customer’s needs?
-
Type of product: Digital
-
Type of interface
-
Partner management / Partner Portal
Task flow
Ideate
Navigation
Finding and assigning navigation are challenging in the existing UI. So I tried to keep the NAV simple, self-explanatory by using icons and upfront.
I have made 3 types of actions that users can do.
-
Main Nav
-
Quick Nav
-
Additional Nav
We chose to place primary icons on top because in many cases, use has to scroll down to engage with the content. In our initial design, I have used icons, Interface might be accessed from any part of the world. So I have tried to go with the icon with the button. But due to some guidelines limitations, we have removed it and went with a text button.
We have found out that users might spend more time on the Brand search screen. Quick nav action helps the user to sort the particular category listing form list.Admin/another user might handle partner details, so I have made quick access to sort partner forms. Colours make it more readable than text. So we have used colours to denote status. Additional nav has actions that users can do less often.
Layout
Background studies revealed that admin users manage the partner’s registration form without taking more time. I have tried to keep important information on cards and the rest of the information on the right side We choose a split layout like mail for the search screen. Since we are targeting desktop applications, We tried to utilize a full-screen size, So we have used a spit layout in many flows.
Workflow
Workflow is a streamlined process where internal users process the partners’ registration form with multiple verifications on behind the process. So I have decided to do some competitive research about how others are doing it. I have gone through Amazon, Swiggy flows and courier flow and management tools like Trello.
There are multiple flows that are required for workflow, Each form should move from one team to another team. eg, Admin got approved form, next it goes to finance team then the business team and so on.
Once the form gets processed, the registerer should get an update and should be able to update additional information if needed. So we have made two flows, one for internal and another of external user
View Fields/ Input Fields
While we designed a page where the admin can overview and take action, Initially DevOps team kept it in the input box-filled state for easier to implement and reuse the space while editing. I found that usability is affected due to this feasibility decision. It slowed down the admin to consume information.
'A Good Product is a balance of Feasibility, Usability and Viability.'
I argued with the devOPS manager and teams to understand the importance of making it information readable as fast as he can. After a few iterations, We settled down to keep form from left to right reading to overview and clicking on edit turn editable fields like the old one.
Checklist in workflow
In the workflow, There is some information that needs to supervise by users. For example, If a new company tries to collaborate then it needs to check whether campy existed, whether its officials are registered, govt ID and background information about the company. Generally, Humans make mistakes unconsciously. They also feel lazy when doing tasks on daily basis. Sometimes, the Autopilot mode drives humans to do daily activities. So In the workflow, we have to pause them and make then overview information. So we have a checklist for the user to make sure they have overviewe consciously. While we iterate, We had also thought of automating certain information which reduces human tasks and man-made errors. Since it’s a good to have feature, We went with a simple approach rather than automate.
Design guidelines
Hence feature focused product, Each Features has its own visual language. So there is no consistency between flows. So i have created that covers Colors, Typography, Components, Buttons, Iconography, Layouts and Input Fields. Since user attention is required in crucial times. So I have used colors sparingly to highlight important information.
Solution
UI Design with New Guidelines
Hence feature focused product, Each Features has its own visual language. So there is no consistency between flows. So i have created that covers Colors, Typography, Components, Buttons, Iconography, Layouts and Input Fields. Since user attention is required in crucial times. So I have used colors sparingly to highlight important information.
Initial concept vs Actual Implemented Versions
Hence feature focused product, Each Features has its own visual language. So there is no consistency between flows. So i have created that covers Colors, Typography, Components, Buttons, Iconography, Layouts and Input Fields. Since user attention is required in crucial times. So I have used colors sparingly to highlight important information.
Usability Review
Support
Once multiple versions of designs have been created, It needs to review with developers and stakeholders to finalize what is achievable to get better feasibility and usability results. Not everything I designed went into the development phase. I got convinced in many places due to technical possibilities. Luckily product owner was on my side. So he supported design over dev in many phases. Once the design has been finalized, I shared the URL with developers and have to support the dev team by providing icons and other resources. They worked on one week sprint basis. I also suggested layout references and shared insights on how the layout should behave when we interact like dragging, clicking and hovering.
UI Reivew
Once the dev team has completed the development phase, I need to review whether the designs and dev versions are the same. We are using a sheet which contains all usability issues noted and shared across developers and stakeholders. This helps to track and maintain UI issues in one place. Once we gave a sign-off to the screens, the Dev version got live.
Result
Heuristic analysis on completed versions revealed that we fixed 70% of the issues. Product demos with a larger audience got positive feedback from many people from the organisation and top management. Especially workflow approach got more appreciation. We did some minor fixes in further releases based on management feedback. After a month of dev, We got two new clients who were interested in our product and signed a deal with some additional features.
Challenges
- Working on the sprint method is new for me. My deadlines are shorter than I thought.
- MVP (Minimum Viable Product) gives a whole new perspective to the Design phase.
- Getting feedback from targeted users takes more time.
Learnings and takeaways
1. Usability review
We have started maintaining a sheet to track usability issues and shared it with the dev team. Earlier I used to sit with the team and fix. Few issues might be missed. Now, that we started recording those observations is easier to prioritise and fix them.
2. Presentation skills
I was the facilitator in brainstorming sessions and UI presentation meetings. So, I Improved my presentation skills and learned how to sell my ideas to stakeholders.
3. Enterprise applications
This tool is targeting employees, managers, analysts and leaders. So, users expect to do tasks faster and better. So we have crafted UI based in a logical way that mimics real-world processes.
4. Experimenting
I have tried the prioritization technique with a team to prioritize the next items to pick for development. I also have tried a lean UX with a solution-based approach.