7 Ways to Improve UI/UX as a Developer
How a Full-Stack Developer took on the role of Design Lead to improve the user experience on an existing application
When I was first assigned to the Human Rights First Asylum (HRFA) development team, I was excited to dive right in and explore the existing code base. Human Rights First is an amazing non-profit organization that challenges America to respect human rights and live up to the ideals of freedom and justice for all. HRFA provides a place for asylum lawyers to come together and compile case data from all over the United States.
Lawyers who visit the site can easily upload case data to contribute to the database. They can filter data about case outcomes and judicial rulings to assist in building a compelling case for their existing asylum caseload. They can also save case and judge data in their saved queues for later reference. The data provided will be used to display visualizations to give lawyers a quick snapshot of asylum cases and rulings by each individual judge. This data could help shape policies and asylum laws in the future.
I was part of a team of 9 Web Developers and 9 Data Scientists. We worked remotely on the site over the course of a month. Within the first few days, our Project Manager requested a developer to step up and volunteer as the Design Lead to implement UI (User Interface) and UX (User Experience) changes. I volunteered and was excited to take on this challenge. After reviewing the existing code and documentation provided by a previous development team, it was clear I had a lot of work ahead of me. The project was in its last phase of development so our team needed to polish up the site before launching. The code still needed a lot of work and I set out to map out all of the changes needed in order to provide the user with the best experience.
First, it is important to note that UI/UX is not just for designers. A developer should know how to put themselves into the shoes of the user and imagine how they would utilize the site. UI helps make the layout enjoyable and UX allows the user to easily navigate. Working with a designer is a wonderful experience but Developers should learn how to work with and operate tools like Figma, Sketch, and InVision to help map out the UI/UX of their projects.
As the Lead Designer on this project, I was able to come up with seven ways for our team to implement a better user experience:
1. Understand Your Project
The first step to every successful build is to really understand the project. What is the purpose of the site? What is the vision for the company? What do you want your user to get out of the site? How do you want them to interact?
Our team did a deep dive into the code and walked through the existing deployed site to really get familiar with the experience and flow. We imagined ourselves as the asylum lawyers and found the areas that needed clarification or better structure. Using the task manager app, Trello, we easily organized our tasks and kept our team updated in real-time. We were able to include all of the details needed to meet our Minimum Viable Product (MVP) and included ideas for stretch features that could be implemented if time allowed.
2. Create a Visual Wireframe
I knew the next step for success was for our team to get on the same page and really visualize how the components would work together. So, I set out to create a visual wireframe. Our team was given a Whimsical map as a flow-chart which allowed a better understanding of how the front-end and back-end would work together. But we needed a better visual representation to establish a style direction. Figma was the obvious choice in my mind.
Figma is a great tool used heavily by Web Designers and I knew it would benefit our team. As a Developer, Figma allows you to easily communicate styling guides and I had used it in previous projects. However, I was provided a Figma by a designer and during this build I did not have that luxury. It was up to me to really get to know Figma and build out the details myself.
I found that Figma was easier than I thought and I was able to master the basics with the help of YouTube videos and a UI/UX designer who happens to be my spouse. It is not necessary to be married to a designer, but it sure helps.
I was able to create a detailed Figma and share it with my team. My team was not only able to begin to visualize the site but they were also able to comment for clarification, request changes, view font colors, and access custom icons. At our second stakeholder meeting, we were able to better communicate our changes and show the direction we were headed with the site. The stakeholder was able to comment on changes before the components were built out, which saved our team time.
The Figma board allowed our team to streamline all of our meetings and establish a clear direction. I was also able to build out new features live while the team provided feedback. Figma was a game-changer and was a big contributor to the success of our build.
https://www.figma.com/file/V2XbE5rpvqrNLOXs3m82k8/HRF-Asylum-Labs34-A?node-id=217%3A150
3. Stratigically Organize Components
Now that we had a clear direction and layout, it was time to reorganize. When our team first approached this project it took us a minute to really understand what each component in the code was for and where it lived on the application. There was a Components folder with a nested Pages folder, with a nested folder for each element on the application, with nested .js files, images, and a mixture of style files. It was a bit confusing and needed to be reworked.
This brings up my next tip: strategically organize components. Not only, does neatly organized and properly labeled components help you navigate the code but it will allow future developers to easily find components and know where they live on the application. When displaying those elements on the app, you want to keep the user flow in mind.
To the left, you can see an example of the side navigation when our team was first assigned to the project. At first glance, it is not bad. But we wanted the user to navigate the site a little easier. We were also adding additional features and the navigation bar would soon fill up.
So, we reorganized.
We were able to create a menu that grouped similar pages into a submenu and we were able to reloacte Account, Support, and Log Out to the header which freed up space in the navigation for future features. When making these changes we were also able to reoragnize the folders and files in the code base to better reflect the elements on the page. For example, an Admin Tools folder now housed a ManageUsers, ManageFAQ, and a ReveiwCases folder. Clear and concise naming to match what is being showed on the live app.
4. Create a Dashboard or Landing Page
Now that our components were getting cleaned up, we needed to focus on the first introduction. You only get one chance to spark the interest of a user. The moment they sign in, the user will judge your site within the first two seconds. So, a landing page or home dashboard is essential.
The landing page or home dashboard should be a place where users can get a snapshot of the most important data that your site offers. Previously this site opened to the Cases page. But we wanted to give the users a better visual experience and really invite them to explore the data further. We implemented a Home page that now greets the user with visuals that tell a story about what the site offers. Then, once their interest has peaked, they can dive deeper and explore the case, and judge data on the other pages. Below you can see the difference from the original landing page to the new, reimagined home page:
5. Set Global Styles
Now that your user is engaged and exploring the site, you need to keep things consistent. An application should have a clear style guide before any styling is done in the code. The Figma we created provided a style guide with fonts, colors, icons, and button styles.
Previously, the code had imported icons from several different libraries, the logo was inside each component that used it and several different fonts and colors were used throughout the site.
I was able to remove the images and place them into a Styles folder and import them into the components that needed access to them. In Figma, I was able to utilize icons from Iconmonstr and then create my own custom icons to match. I then imported the icons into the Styles folder for global access.
The existing code had a lot of MaterialUI (MUI) components that we were transitioning over to Ant D. Ant D uses ‘Icon’ to be able to display custom icons into their elements. It was important to our team to keep the site consistent throughout and provide an overall cohesive feel so it took some time to learn how to get the icons working.
I was able to create an orange bar icon to display under headers to tailor the look of the site. In order to use this icon I used the following code:
I imported in the less file where I was able to customize the styling. I then imported in ‘Icon’ and my custom icon ‘OrangeLine’. Then in the return, I was able to use the Icon.
In addition to setting up global access to the icons and images, I also used less to set up reusable fonts and colors. I am still learning the ins and outs of less but named variables are amazing! They allow you to name a variable at the top of your code and then reference it within your styles. This has been a great tool when changing colors or fonts. You simply change at the top and all the elements are changed with it.
I would have loved to implement less at the beginning of the build and had a single less file for global use. But, with so many moving parts and styles implemented with StyledComponents, MUI, and CSS, it made more sense to convert to less as made changes to the site instead of starting from scratch.
6. Have Clear Action Buttons
Another great way to improve the UI/UX is to make action buttons clear and visible. The success of the HRFA site relyed on asylum lawyers to upload their case data to share with other lawyers. However, the “Upload a Case” feature was hidden in the navigation sidebar. When clicked, the site directed you to a new page to upload a single case file.
We were able to convert ‘Upload a Case’ to a button, place it inside the header of the site, and put the feature into a modal. This allowed the user to have a constant reminder to interact with the site. They can now easily find the button and the interaction would not interfere with the user's current actions on the site. We were also able to incorporate a “drag and drop” feature to allow users to import multiple files at a time making the feature more efficient.
7. Modals Are Your Friend
Last, but certainly not least, is modals. Modals are a great option for forms or other elements that require user interactions. Modals allow the user to view detailed information or complete an action without having to navigate away from the current page they are on. We combed through the features of the HRFA site and converted every form, action, or detailed information into an Ant D modal. This provides a more uniform experience for the user and looks really cool, too.
Modals required user interaction so it is important to utilize clear, visual action buttons or links to remind the user to click. Avoid automatic pop-up modals. Nobody likes a pop-up.
What I Learned…
The most important thing to take away from this article is to put yourself in the user’s shoes. UI and UX have one main thing in common, the user. If your user is confused, you failed. If your user is lost, they leave. If your user is annoyed (by a pop-up), they scream.
The main thing that I learned while working on the HRFA build, is that UI/UX should not be an afterthought. Mapping out the user experience from the beginning would have made all the difference. Understanding the user and planning is essential when improving the UI/UX. If I were to continue to work on this project, I would love to implement more features to improve the experience and really fine-tune the styling. Our team made a huge dent in transitioning from MUI to AntD, but I would love to see only Ant D throughout the site, even down to the Notifications. Keeping the experience consistent is key.
“If you don’t know exactly where you’re going, how will you know when you get there?” -Steve Maraboli
I am excited to take this experience and apply these tips to future projects. I loved being a Design Lead and I was able to help implement some real change. I have a newfound passion for UI/UX and I can’t wait to learn more.
