br.vaal : A Brand Value Alignment Tool | UX/UI Revamp Case Study
My approach on rethinking a flash product’s UX/UI in a limited time frame to make it work in the present times.
Before I Start: This project is completely owned by the client (Let’s call them BrandCo), and it was designed & built for the company I used to work with. I am writing this to give a brief overview about my approach to complete the project’s design revamp with the given constraints. Although this a UX/UI case study, the UI colours shown are a misrepresentation to the actually built product. The brand’s visual identity including the Logo, Name and the colours is changed in the representations.
Structure of this Case Study: This case study will be structured in the following way :
- Project Overview
- Project Approach
- Process Details
- Problems I faced and learnings
- Result
Let’s Begin
The project came in right when I started reading the book Brand the change by Anne Miltenburg (I have finished reading this now). I was very interested and curious to learn about branding and how it is perceived since I wanted to create my own personal brand someday. I had already read it halfway at that time.
The Client (BrandCo in this case) is a well known brand consultation Agency here in India. They have been helping major brands in India for decades and have been an industry leader in Brand design. When my project manager told me that I was going to handle this project, I was really excited since I could really speak their language and also gain some real insights about branding from the people who specialise in it. After working on the project, I knew that it was a match.
Project Overview
This is the overview characteristics of the project. A fixed budget of 100Hrs (for the design, which got extended later due to CRs) and anc idea to revamp and redevelop an already existing Flash Product which helps companies of large or small scale to keep their core brand values aligned between the CEO and the employees for a better functioning company (Brand).
Project Approach
I firmly believe that in a UX/UI project with limited time budget, it’s really very important to dedicate some serious time to plan out the approach and see what’s feasible, and what’s not. The end result’s quality and functioning can never be compromised in this case. So, here is an eagle’s eye view on my approach for this project’s design.
Let me explain in detail how I went about in each stage. But first, if you have a question in mind (probably if you are a designer too) that why I chose to have UI/UX done in parallel way, then my answer is ‘time crunch’. Wireframes were skipped but scribbling on a design notebook helps in a good enough way. I also managed to have most of the feature lists and flows ready in the process flow chart step so I don’t miss out on anything important.
Process Details
Explanations about each step.
1. Thorough Analysis
I took a day to just put myself in the shoes of a normal user with fresh eyes, and used the tool. This step is very essential for the further steps, since all of my solutions will be based upon solving the problems found during this stage. I always make sure to keep a note by my side to jot down visible problems immediately. The problems that I found out were:
- Slow Loading speed
- Confusing Tutorial
- Fancy Slow Animations
- Non Mobile-Responsive
- Faulty survey results due to common interactions
- Non user-friendly Survey setup
- Non-tempting Email invites for employees
- Replacement of survey information due to absence of session creation.
- Instances of compromising anonymity of tests.
You may not be able to completely understand the context on the points mentioned above. So, let me give a brief explanation on how the product flow works.
Hope you got a clear gist on how Br.Vaal works. Now going back to the problems.
Slow Loading speed : As the application was made in flash, it took a very long time to load the whole application at once. It also asks for permission to use flash every time the user loads the website.
Confusing tutorial : The tutorial was a video, that’s a replicate of the actual User Interface and run on full screen. It was hard to differentiate from the actual UI, and I kept on clicking the video mistaking it for the UI. The tutorial was very long to follow, and took up at least 10mins of my time.
Fancy Slow Animations : I mean slow. Real slow. Based on the above product gist, there are three values that have to be chosen to test among the employees, and 10 questions have to be answered for each value. The old interface had it represented in the following way.
The questions came in swirly animation. The swirls took around 2–3 secs to show up. And you can visualise on how a long form question would look in the swirl format. It was hard to read and process all the information in the screen.
Non Mobile-Responsive : The Survey tool was in no way mobile responsive. Other than not being mobile responsive, it was impossible to interact and take the survey through mobile. Why? because the ratings would show up only if you hovered over the questions and we don’t have hover in mobile devices (Unless you have a Samsung Note).
Faulty survey results due to common interactions : The main survey was dependant on the takers to slide through numbers to rate the factors. Sliders were not the problem, but how they behaved while sliding was.
The Sliders were smooth and allowed users to slide over any point, but there is a catch. If I as a user wanted to rate a Question ‘3.5’ because I felt so, I can. But in the backend, it will register as ‘0’ which affects the overall rating. So the whole report will be faulty because of the sliders. This was a very important discovery.
Non user-friendly Survey setup : The survey had to be setup by the CEO or their assistant (ratings can be given only by the CEO, but invitations can be sent via the help of an assistant). The invitation process was hectic as it had a form which had to filled with name, email, phone of all the participant employees. This could be very time consuming for a CEO.
Non-tempting Email invites for employees : As a working professional, if you ever receive a mail asking to take a survey from an unknown sender (in this case Br.vaal for all the company X employees), how likely is it that you will open it? Very less. And the probability of giving importance to that mail further decreases if the mail is all text (around 200words) with credentials to take the survey hidden inside the mail body. It had to be made straight forward, and content had to be taken care of.
Replacement of survey information due to absence of session creation : There was only one survey creation for the entire company, and if the CEO wanted to take another survey, it would replace the old survey’s results and information. For increased Utility, I thought it would be good to have multiple sessions and have comparison allowed so it’s easier to check how the alignment results have improved with time.
Instances of compromising anonymity of tests : With power of receiving direct value level ratings from the employees, there is a big responsibility to keep the survey taker’s name anonymous from the CEO to avoid any personal problems. Br.vaal did quite a good job at it, but there was one loop hole. There was a page to show the list of people who have taken the survey, and who have not.There was also a page which showed consolidated results from the survey at that instant keeping the names anonymous. Combining these two pages, there was a loop hole case where only one person had taken the survey. The survey result showed up and the person’s survey was marked as ‘taken’. The result from the report section directly indicated the individual’s response. This had to be avoided.
These were most of the important notes made. There were more, but I want to keep this case study concise. Up next, came up the detailed Audit.
2. Detailed Audit
I created the Audit in an excel format having the module names, the problems and the suggested solutions. The Audit was based on the analysis I made. This would keep me as well the client aware of the problems that had to be focused on while designing, and had to be addressed completely without fail.
3. Process Flow Charts for Different User Types
The target users as per my understanding were : CEO & Assistant, Employees and br.vaal Admin. I make it a practice to create detailed end to end Flow chart for all the users to have a clear idea on how things work out. Most of the times, I get important questions about different aspects of the product while making these flow charts. It gets me thinking quicker and look at the whole product from a macro view, and in processes rather than just screens. I shared this flow chart and the audit I made to Brand Co through PM before having the call. This allowed us to confirm if we are on the same page regarding everything, and allowed us be sure that our understanding of the product is same.
I really didn’t want to post the High Resolution Full flow chart for you to go through since it’s very detail oriented. Well, I have attached a part of the bigger picture on the right side, showing options for payment processing from Brand Co Side (They didn’t have payment integrated before. So I provided options on where it could be included, and also those (??) were added because I needed to know whether they actually needed it.). Just a part of that flow could mean a lot of valuable information in terms of the UX. I’m just proud to boast on the large sized Flow Chart’s beauty. It consists of all the modules and all the use cases in not the old format, but the desired new revamp solving the problems that I found out during the analysis phase. This really helps the client see the bigger picture view of the whole revamp even before seeing the actual designs.
Who needs a white board when you have an open Figma Canvas? You can just go all in with your brain storming.
I made changes to the flow chart as and when any changes were mentioned by the client during the call (which comes in the next step).
4. Initial Client Call
The call started out with discussion about the product and my understanding about it, and the vision of the whole revamp.
We discussed about the problems mentioned in the Audit, and agreed on the points. Some of the things mentioned were out of scope from the initial plan, and those were marked as CR which were added later since they were essential for the product. These included Multiple project sessions and some more additions. These CRs were handled by the PM, and passed over to sales team to process.
I explained how the design budget is very narrow and to save time I would directly continue with the UI designs (I did start with the UI designs, but I had most of the UX related things in the flow Charts) skipping wireframes, but I will be following the flow charts.
5. UI/UX parallel design
I will be sharing some of the important screens and will be leaving out the rest, because there are around 100 frames I have designed. Note that the colours shown are different from the actual delivered project. This is only for representation.
My design Mindset for this project :
I didn’t tell one thing before as it was not design but development related. The time budget for that too was limited. So I had to make sure that my design choices didn’t affect their timeline in any way. It had to be “Keep it simple silly”.
Now I can’t possibly explain the whole project and the design thinking here since it’s gonna take me a while to write it up and edit. So, I have just attached the above image and some small text to go along with it. Going back at the initial problems that I mentioned before during the analysis phase, looking at the designs we can review:
- Slow Loading speed : Well, I have tried to keep the designs very simple and light. Now, the performance is really dependant on the development.
- Confusing Tutorial : I have completely removed tutorial, and added onboarding before the survey starts. The [i] s everywhere offer some help when needed by the users. The screen before the survey also has an important use. For surveys like this, it’s very important to let the users know clearly that it is anonymous, and also the CEO of the point that higher score does not actually mean better. Since they are not aware of branding and the scoring system before hand, it can affect the overall report and analysis if they are not aware of the importance of the numbers. The idea of Brand Co had to be understood in the same way by the CEO and the employees of Company X.
- Fancy Slow Animations : I have removed all animations to make the survey run and finish ASAP. Since we are not trying to keep the survey takers hooked to the system, the main objective is to get the survey completed quickly & efficiently, and let them continue with their daily work.
- Non Mobile-Responsive : Since the design mindset was Mobile first, I adapted the web version as a modified version of the mobile design which does not affect the experience in any bad way. This makes the development easier for the web responsive versions too.
- Faulty survey results due to common interactions : Since the sliders were changed to ‘on click’ rating, there was no room for error. Clicking is much easier and faster than sliding. So the error rate decreases and the speed of survey taking improves drastically.
- Non user-friendly Survey setup : The survey setup is made step wise, and the invite system now has an excel upload option which also has error checks. This makes it easier to get the details, since the company will already have an employee database.
- Non-tempting Email Invites for employees : The Email template shown above gives necessary details about the credentials, a clear cut Subject that she is invited by her CEO to take this ‘quick’ and ‘anonymous’ survey included with a clear CTA to take the survey. ‘Click to copy password’ helps the user with the overall experience and avoids any confusion.
- Replacement of survey information due to absence of session creation: Multiple sessions have been added to avoid this.
- Compromise of user anonymity: All the controls for CEO to see who has taken the survey are taken off, and every information and control to close the survey is given to the br.vaal admins to reduce work for the CEO. So, with added convenience, the actual problem was taken care of.
6. Presentation to Clients and Feedback Calls
Presentation of designs to the clients can be a very big challenge sometimes. Things that are needed to be taken care of are Clarity, Clear Communications and Context.
Before each client call, I used to share PDFs of a well design frame with all the modules and flows that were designed till that instant. It also included questions I needed to be answered for effective designing. The PDFs were meant to be versioned based on the set of updates sent at intervals. And each of those versions were meant to be discussed on calls.
Designer Notes on PDF : I included Designer Notes in the beginning of presentation. Reason being, a designer’s thinking and a normal person’s perspective may be different, and it is very important to bring everyone on the same page and give appropriate reasoning for the design decisions made. This is essentially very important when your designs are being looked upon by the client for the very first time where they don’t know what to expect visually. It’s a very high possibility that they’ll already have a preconceived vision of how they want their product to look like, but not what the users would need and what is feasible with the project timeline, budget and tech feasibility.
Included below is the note I attached for the very first presentation PDF I sent.
- The structure of the PDF consisted of each each module I worked on, and the updated version of designs attached in a flow-wise manner to easily understand how things work and not just how it looks. And before the designs, the flow chart of that module’s working was attached to easily see the macro view of its working.
- This PDF was meant for the clients to go through in their free time and see what’s changed, what was new and what were some questions I had. These questions were attached at the end of each doc labeled. This would allow them to be prepared during the next call where we would be discussing the designs & the questions and get feedback about the same to know whether we are in the right direction, what could be improved and what works fine.
- It also consisted the WIP designs to let them know that this was coming up next. This was marked clearly in an enclosed rectangle labeled as ‘Work in Progress’, and the pending items from the scope which were to come next (at later stages).
7. Dev handover and Support
The project’s design was completed within budget, and I supported the developers to understand the flows and features later. Working in Figma has been a piece of cake when it comes to developer handover. It’s just share and enjoy.
Problems I faced and Learnings
The Project’s journey had been fairly smooth without much problems. What I mostly learnt from the project was that fair design planning and having a good strategic approach can help you finish a fairly moderate revamp project in a low time budget.
Result
The Revamp Project was successfully completed and the development was processed. The Product of latest version is not live yet.
The product br.vaal is completely owned by the client and the project is produced by the company I worked with previously. The above article is only meant to serve as a representation of my thought process and design approach while revamping the designing and solving the problems in a structured way. I hope it helps my designer friends out there to gain any type of insights from this. Thank you for taking the time to read this :) .
About me
Hi. I am a designer and artist from India. You can find more about me & design from my website www.thebongartist.com/design .
