Project Background Information

I just wrapped up production on my first real-world project for an application called MicroFund. MicroFund is a startup company that has not yet pushed its application to production. They are in the middle of an acquisition process. Our team of 5 developers was the second team to inherit this application/codebase. The purpose of the application is to connect individuals seeking small business grants to other businesses that are providing the funding called "partner administrators". The app in and of itself is owned by main administrators, referred to as the stakeholder in this blog post. This application has a multidimensional authentication process handled by OKTA.

Our stakeholder for this project asked for a serious revamping of the UX/UI for his application. The main concern for the stakeholder was ensuring that the interface was clean and able to match any partner logo designs. So the main color scheme of the app is black, white, and shades of grey. The look and feel of the application were the main focus of our project with major updates made to the backend database design.

When undertaking this project, my main concern was ensuring that we could meet as many UX/UI stakeholder needs as possible. My role in the team was wireframing, debugging, engineering architecture, and technical documentation writing.

Our Key Feature Updates

Main Updates To Features
Key updated features: Improved the overall user experience of the application. Overhaul of UX/UI design features. ThemeProvider implementation for individually styled-components. Creation of signup page for User Interface. Generation of user flow and new user stories.

Technologies Used
React Query, ThemeProvider, Java Spring.

Team Efforts:
Agile Planning Methodology
Wire Framing
Engineering Architecture
Feature Planning
Application Debugging
UX/UI Updates
FrontEnd Design
Generation Of User FLow & User Stories

Working With An App That's Not Working

As soon as we gained access to the application we quickly realized that our app was not functioning as expected. Our plans now need to be altered. The user roles were not working properly due to an unknown OKTA authentication issue. We discovered this issue after spending a significant amount of time trying to login to the application with the given credentials. The issue caused us to interact with the application in different ways. We all tried different approaches to get to the point of updating the admin and partner admin-related data.

Together as a group, we worked past a few blockers but we still needed to gain access to the applications dashboard and backend user tables. We did connected enough dots to lead to a more executable solution for the next team to inherit the application. We flushed out a lot of data for the application user stories and planned a lot of UX/UI updates. These updates were completed on time. The main blocker for this was finding a way to completely override all of the previous stylings which had been implemented in each individual component. The solution was a theme override via styled-components.

Example Of Theme Override Provider

module.exports = {
  '@primary-color': '#39ec39',
  '@link-color': ' #ec3944',
  '@success-color': '#52c41a',
  '@warning-color': '#faad14',
  '@error-color': '#f5222d',
  '@font-size-base': '14px',
  '@heading-color': 'rgba(0, 50, 0, 0.85)',
  '@text-color': 'rgba(0, 0, 0, 0.65)',
  '@text-color-secondary': 'rgba(0, 0, 0, 0.45)',
  '@disabled-color': 'rgba(0, 0, 0, 0.25)',
  '@border-radius-base': '2px',
  '@border-color-base': '#d9d9d9',
  '@box-shadow-base':
    '0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05)',

  '@layout-header-background': '#9c9',
};

Updating The Documentation

One of my roles on our team was to update the technical documentation. My first step in writing the necessary documentation was ensuring that the application was clear to navigate. This was all included in the technical documentation file. Contents of the documentation file include; the necessary configuration instructions, environment setup instructions, as well as commentary on the known bugs of the application. Deployment information is included as well.

Documentation Snippet

Configuration Instructions
Please check the package.json file. You will need to install any dependencies you need when you start up the app. Another requirement is the .env file with the correct environment variables. These should connect to OKTA for authentication purposes.

Operation and Installation Instructions
This application is running React and React Query for the frontend of the application. You will need to have your environment set up to run the dependencies you see in the package.json file. You can install the required dependencies in the terminal. Be sure to install the correct

Known Bugs
Problems with user roles: Unable to differentiate or create user roles, blocks ability for user flow and user interaction. Can not sign in as a microentrepreneur which makes you unable to apply to the program, which makes it impossible for the main admin to accept or reject the application. Same for partner admins. An unknown issue with OKTA authentication process. Environment issues where some users may not be able to log into the backend of the application.

Future Updates To The Product

For the future of this application, the newest updates to the UX/UI would need to be carried over to the mobile version of the application. The creation of two more authenticated users is also relevant to this application's future development. With the multi-admin nature of this application continued updates to the user roles are imperative for future developers. Our team also created a new sign-up page that will need to be connected to the future application at some point in the app's continued development process. This could be challenging to navigate with the OKTA authentication process so proper planning will need to be set in place.

Peer Feedback

My peers did provide feedback for a few updates that I could make to the technical documentation. I incorporated our contact information and pictures from our social profiles in the technical docs. Since we worked on separate features than the previous team it was important to add a separate file specifying exactly what was added rather than erasing the previous documentation.

Final Thoughts

This project gave me a new appreciation for project planning and technical documentation. There is a lot of back and forth conversation that goes into fleshing out data. At times we spent hours talking, creating wireframes and plans. We had to make sure we checked each other's work. Spending hours talking through blockers and debugging problems via a Zoom chat was difficult. We spent our days in constant Slack communication while posting screenshots and code snippets from our computer screens. After all that hard work was done that information had to make its way to the technical docs. It is extremely difficult to navigate what needs to be included and what does not. We had to stay in constant contact with the team. Talking through our environmental issues, setup blockers, and missing data together.

So, what are my main takeaways? I have a newfound appreciation for software development teamwork and agile methods. I got to experience firsthand what it's like to work with an application that I did not build from scratch. I learned how to face challenges head-on and to keep asking questions, asking for help, reaching out to my peers, and pushing through to find answers. I was able to plan user stories and work with my team to redesign an application. We were able to ship features for a stakeholder's project. At the end of the day, I feel as though I have left labs with a newfound appreciation for development, and I feel more prepared to take on my next development role.