Reimagine commercial lending workflow for a Canadian Bank
As the lead designer, I worked closely with PMs, developers, and stakeholders from the bank transformed former Excel based, decentralized, unregulated Commercial Lending workflow to a highly effective, collaborative, regulation compliant web app.
Sample works showed above, details are protected under NDA.
fooriend is a profuct design project I did with my friends
fooriend is a passionate project I continuing working on my part-time. We just launched our MVP.
You can checkout our website here.
Interaction Exploration for the Emerson Suite
This is some exploration I did for the assign task interaction.
I build the prototype using Origami Studio by Facebook.
My Role is the UX/UI Designer.
The company website is here.
UX/UI Design for the Emerson Suite Mobile App
This is a iOS mobile design for the Emerson Suite app.
My Role is the UX/UI Designer.
More details will be updated soon.
The company website is here.
UX/UI Design for the Emerson Suite Help Center
The Emerson Suite Help Center is a knowledge library that provides helps for the Emerson Suite users. It reduced the time and stress for the user to find the answers they need with well organized information structure and easy to use user interface. My role was to research, design and test all UIs related to the project. I collaborated with design, product develop and engineering to launch this project.
Project Duration: 2 x 2 week sprints
My Role: UX/UI Designer.
- Lead the UX/UI design and deliver design documents.
- Cooperate with Product Manager and Developer team to implement products
Team: Product Consultant, Product Manager, Customer Success Manager, Front End Developer.
Previous Version
The Help Center is a piece of the app that stands outside on Zendesk. It is suppose to be the hub to help users find their answers. But as we kept evolving our product, the Help Center was being forgot about for a long time, making it less relevant and useful. I identified a few problems through analytics data, user feedbacks, and user testings:
1. Analytics data showed the usage of the search function was very low, at the same time, lots of tickets were created for existing questions.
2. User testing showed more than 80% of users failed to find the article they needed.
3. There was nearly no navigation within the Help Center.
The overall goal for redesigning the Help Center was to assist users to find the answers they needed easier and faster. To do that, I set a few key metrics to measure that:
1. Increase the usage of the search function.
2. Decrease the percentage of user fails to find the article.
3. Build a navigation system so the user always knows where to go.
There were two big challenges when I was working on the redesign:
1. Design within the ability of Zendesk.
2. Content in Help Center was being updated as we shifted the direction of the product.
Inspiration Board
Since our Help Center is living on Zendesk, it meant I needed to design it within Zendesk’s ability. So the first thing I did was read their support documents, as well as explore other Help Centers built on Zendesk, to understand what I could and couldn’t do. Also, I had a sneak peek at a few competitors’ Help Center designs, and created an inspiration board on InVison to share my findings with the team.
After understanding what the feasibility of Zendesk was, I quickly sketched a few wireframes that would work for us.
Sketched Wireframes of Possible Help Center Designs
After discussions with the team, I built the wireframe based on the problems we needed to solve, and from feedback from the team.
Wireframe
One common issue when building a content heavy product is how to categorize the content. The customer success team was working on rewriting the content as we shifted the market focus. So we did a card sorting exercise to categorize the content.
Card Sorting Exercise
In our card sorting exercise, the customer success team did it internally first, to come up with category names that made sense to the team. Then we sent out the online cart sorting exercise to select groups of users. They were asked to put the articles into the categories that made sense to them, but they also had the option of adding new categories by themselves.
In the redesign, I followed these three rules:
1. Make it easier for users to find what whey are looking for through categorized content and build better information structures.
2. Make it easier for the user to search for content by providing popular search topics and tag contents with users’ words.
3. Prioritize frequently asked questions, as research shows 80% of user questions can be answered by 20% of documented answers.
Search Bar Design Before and After
A big problem we had before was users were not using the search function. That was actually a little bit odd to me, until I did the user testing sessions. In the home page, primarily because of the background image, the typography size and colour, most users just scrolled down immediately without noticing the search bar at all. In the article pages, the search bar was positioned on the right side of the bread crumb navigation, and because of the typography and weak colour contrast, most users still didn’t notice it at all.
So, in the home page redesign, I did three things to improve the search bar design. Firstly, I made the search bar stand out from the background; secondly, I used big headings and instructional texts to draw users attention; lastly, I used popular search topics to provide popular search results to the most searched keywords and reduced the amount of work to just one click to search. In the article pages, I put the search bar on the sticky top navigation bar, and utilized high contrast between the background and the search bar, which made it visible all the times. After the redesign, the usage of search function increased 4x over the previous design.
Redesign Home Page
Another big part of the redesign was the home page. It’s the entrance for all the help content. The old design was just simply a search bar and followed by a huge list of article titles. It was hard to scan and to find a specific topic.
In the redesign, the home page was divided into four sections that are most needed by the user: search function, content category, FAQ, and product updates. A scroll to FAQ section button on the page header was added after, because user testing showed the users don’t know there were FAQs on the bottom half of the page.
Ohter Pages
The other major pages are for specific roles, topic page, and article page.
In the specific role page, the categories have come from the card sorting exercise to make sure users can find what they are looking for easily.
The topics page has a bread crumb navigation to help the users oversee where they are, and a side navigation was added to help users navigate within the section without going back to the specific roles page.
The article page has a bread crumb navigation and side navigation as well. Also on the bottom of the article we suggest related article to users to help users find related content as they needed.
In all these pages, one or more short cuts were provided to help users submit a question, if they couldn’t find what they were looking for initially.
The results after the redesign were great:
1. The usage of the search function increased 4 times.
2. The views of articles increased 8 times.
3. User testing showed 80% of users could find the article they were looking for.
When I first had the card sorting exercise with the customer success team, I was having trouble with understanding the article titles. Card sorting is a great exercise to understand how to categorize content, but when you send out your exercise to your select users, please have team members go through the exercise first to see if the topics are clearly written, so that you won’t get useless results from your users.
I also published this article on Medium, you can read it here.
UX/UI Design for the Emerson Suite JEP tool
When I first joined the team, I showed my friends the product I was going to be working on. One of the comments I can’t get away from is “it looks like a poorly edited PDF document”. But it’s actually an app, a cloud-based web app. That’s how bad it was and what really excited me.
A screenshot of the original app
After getting my hands on a few small projects, I started working on redesigning the app itself. I started with the Job Effectiveness Plan (JEP) tool, the core part of the app. The goal of the JEP tool is to help users manage their objectives. It’s like a variation of OKRs, but also different in many ways. I still remember the first time the team walked me through JEP. I was exhausted, it was like I was just taught how to send a rocket into space.
The original JEP creation process without input error from the user
The original JEP creation process was way too long and complicated. It included six user input steps, two user review steps, and a few learning and sharing steps. The navigation was a disaster. The back button had different behaviours on different pages. And lacking feedbacks for basic user actions, because it was designed first for mobile, while the reality was more than 90% of users were using it on a desktop. It took me a few days to figure out what was going on over there and how to navigate within the app or go back and forth to edit something.
The original JEP creation completion rate
Our data showed that almost 50% of users weren’t able to make it through the JEP creation process. Users were not coming back after their initial interaction. I won’t even bother mentioning how many users didn’t come back after a week, a month, or a quarter. We were losing users, all the while the team was working very hard to get new users to the app. On top of that, we were struggling to get our paid users back.
At the same time, the team had decided to shift the product from coach-leader market to team market. We redefined our market fit. The product needed to be redesigned to accommodate that.
After we identified the problems we had our goals became very clear.
1. Switch product from coach-leader market to team market.
2. Redesign the desktop experience with mobile users in mind.
3. Make it easier for the user to create a Job Effectiveness Plan.
4. Get the users back to the app after the initial interaction, a week, a month, a quarter, and a year.
As a small team with big goals in mind, we decided to take some baby steps to test some of our ideas first. So the first thing, which was also the most important, we worked on is how to make it easier for the user to create a JEP.
I could probably give you a huge list of issues we found about the JEP tool, but we had to start from somewhere, so I focused on making it easier for the user to navigate through the tool.
Original navigation mapping and proposed new navigation system
I mapped out how the navigation was working and redesigned the navigation structure. I changed how the navigation system works by building a status indicator and changed the language of the buttons.
Completion rate after changing the Navigation
The result wasn’t as great as I expected. There was only a roughly 7% increase compared to before redesigning the navigation system. But the JEP creation process was still unchanged and quite complicated. We decided to work on that next.
Although the Emerson Suite as a software is only 3 years old, the methodology behind it has been used for more than 45 years and has proved to be an effective way to manage a team. So it was important to thoroughly understand the methodology by talking with the company founder, consultants who used this methodology before, as well as meeting with the product manager and the tech team to better understand how and why some decisions were made before.
In addition to that, I went to several new user onboarding sessions to see who the users were, how they used the app and received feedback from them. This leads us to the next step in the redesign.
User interview guide
A user interview is a primary way to get to know users. What are their goals? What do they use? What technology are they familiar with? Why do they need your product? What problem do they want to solve? User interviews can help you get answers to all these questions.
I found that having an interview guide will help a lot to direct the conversation to the issues you want to learn about. It helps you to better pose your questions and follow-ups, leading to better results. For someone new to user interviews, having a guide will also enable you to feel less nervous.
My goal for the interview was to get insights about our users and how they used our tools, especially their experience with the JEP tool. I conducted three in-person interviews and three phone interviews. The interviewees came from different industries and had different positions within the companies they represented.
Of course, some interviewees don’t really see the value of the tool, while the others had integrated the tool into their process and were hoping to get more value from it. In general, those that see value in the product usually give more helpful feedback and insight, while those that do not see value will be less fruitful.
4 Personas
After talking with stakeholders and users, along with reviewing the market fit, I built four personas. Collectively, they represented Leader Manager, Owner Operator, Product Buyer, and a Manager from the Asia market.
The Emerson Suite Hook
We were struggling to get the user back. To help the user make the most of our product, also to have them come back to the app more often, we applied the hook model to our app. This provided a great outline when we were mapping out the user journey.
User Journey Map
I created the user journey map and went through a few review sessions with the team to refine it. It not only helped with building a user habit but also provided insights for marketing and sales.
Original JEP creation process
The original JEP creation process matched how it was being taught in the consulting world. The consultant met with the client, they started the process by coming up a list of outputs the client wanted to achieve, then worked on finding key metrics to measure outputs, and finally wrote objectives using the metrics defined previously.
That process was undebatable when a professional was there to support the client and the work was done on paper or an Excel form. But when it came to digital, one problem the user had is they constantly had to go back and forth to edit an input from previous steps, which also broke the natural thinking process.
The new JEP creation process
But when it comes to the digital product, without the help of a consultant, it’s very difficult to think about a few outputs and objectives at the same time. The new JEP creation process allows users to focus on one thing at a time. They think of one output they want to achieve, define the metrics and objectives, then they move on to the next output if they have more.
JEP creation process redesign key screen
After rethinking the JEP creation process, I built a prototype using InVision. We tested it with a few current users in their offices. All users did not have any issues completing the JEP creation process.
Through the test, we found out a few things:
1. For adding a metric, users need to pick a category for the metric. A lot of times users found it was hard to pick a category. It was an obstacle for them. When I took that feedback to the team, I also learnt that picking a metric category was not part of the original methodology. It was added to help the users think of a metric. But in reality, users are thinking of objectives first, then they go back to fill out the metrics. There were even some users that put their objectives in the metric input box and put a number in the objective input box.
2. For non-experienced users, they found it was hard to complete a JEP for the first time by themselves.
3. Some terminologies and languages were confusing and were being translated differently by different users.
So after discussion with the team, we removed the metric category. Later tests showed positive feedback from users after removing that element from the process. We also tried to build in AI suggestions, based on the user’s role and industry, using our established 45 years worth of data. This was done to even further simplifier the process by assisting the user in creating their JEP. However, after an internal review, the AI feature fell out of scope after the team reprioritized the app design, and it was removed.
JEP card redesign
I started the redesign with JEP card, which is the result of user’s input. The card will be viewed by the user for a year, the standard length of a JEP, so it was really important for me to get it right.
So here are the key takeaways from talking with the stakeholders and the user interviews:
1. The original JEP card design was very confusing. It was hard for even experienced users to distinguish which are outputs, metrics, and objectives.
2. When a user creates a JEP, one output could have multiple metrics and objectives. In the original design, a user could not establish connections between related objectives. The structure of the card was not aligned with the structure of a JEP or how the user reviewed their JEP. It took too much effort for the user to see the whole picture.
3. In the consulting way, JEP is an Excel list. Users are familiar with that format.
4. Users didn’t know how to edit and add a JEP item.
5. Users didn’t know how to add a JEP item.
6. The original design didn’t support multiple JEP instances.
In the original design, each page only showed one objective. If the same output had multiple objectives, the user needed to click through a few pages to see them one by one.
In the redesign, to make it as easy as possible for the user to understand their JEP at a glance, I added labels to each area and used different positioning and visual treatments to distinguish them. Then I put metrics and objectives, that related to the same outputs, together. This resulted in the user being able to see the full picture of a JEP item at a glance.
JEP page redesign
A lot of our users used the JEP tool before when it was not transformed into a digital product. They could easily understand their objectives just by having a glance at the Excel file they made. The original digital design broke the whole thing into several pages, thus, connections were drastically weakened.
In the redesign, objectives for the same outputs are displayed in one card, and all cards are being seen on the same page without too much effort. Also, we provided the list view option, so those who got used to the tradition Excel view can adapt to the app quickly.
The JEP redesign was the first step for us to enter into the team performance management market.
It established new visual styles and UX patterns that will be used on our other products.
Since the first version of the JEP was released, the JEP activities have demonstrated a 61% increase.
The ultimate goal for the Emerson Suite as a tool is to help each individual in a team work more effectively and get more things done, thus making a team effective and enabling them to reach their goals. And JEP is the tool to help users reach their goals. In the redesign, one goal was to make it easier for the user to create a JEP. There were a few obstacles that hindered users from achieving that. One was the previous process was too complicated and exhausting. The other one was users did not know what to write or how to write it correctly. But due to limited resources and time, we only partially achieved our goals by making the process easier.
Creating a Job Effectiveness Plan does not necessarily mean someone will be more effective. They need to have a smart plan, that being a plan that is specific, measurable, aligned, realistic, and time-based. To achieve that there are two things we can do to assist the user. One is to suggest good examples based on a user’s role and the overall team goals. Another would be to provide real-time analysis to help users see if what they entered is relevant to what the team is trying to achieve and how they can improve it to make the goal smarter.
Also, a smart plan with no followup is useless too. Flexible, but regular check-ins, is the key to seeing if users are on track with their goals and if the team is keeping the same pace and are aligned. But users never remember to update their goals unless someone asks them to do so. So to make smart goals that actually work, we also need to build a check-in process to help users track their progress and align the team.
From the beginning of the project to the development team released the first version of the redesigned JEP tool, took about 4 months in total. Here are the most important things I learnt during this process.
Pause a little bit, once a while, to do some design exploration. It will give you long-term views on your product. The initial exploration I did didn’t make a huge difference to the product, but both I and the team gained a great deal of valuable insight from it. Many features we came up with in the later redesign, have either come from the initial exploration or have been inspired by it. I don’t regret the work we did at all.
The other thing I learnt is to design a few steps further. Working at a startup, the resources are limited. Your development team will probably have to implement the design in a few phases. But by examining your product roadmap, backlog, stakeholder and user interview feedback, it enables you to design a step or two further and allows the development team to leave space for the advanced features you have in mind.
Both learning outcomes have served my current projects, immensely. I look forward to learning more!
I also published this article on Medium, you can read it here.
