BGB

To comply with our non-disclosure agreement, I have omitted any confidential information and changed the clients name to BGB.

The Problem

BGB is a company that sells payroll software solutions to companies. Before reaching out to us, their entire system was paper based. They needed an automated system where salesman could create a customized quote without the hassle of paperwork. Salesman are only allowed to discount up to a certain percentage. Past that, their quote would need approval. With this in mind, we planned to create a two factor MVP. The first MVP focused on the basics – adding a client, updating the client’s package information, and adding discounts to a quote. The second MVP introduced statuses, allowing management to approve or deny, with feedback, each quote.

My Role

I was apart of the initial fact-finding team. I met our client along with the business analyst, product manager, and our senior developer. I was given some artifacts as a small jumpstart to the design plan. These artifacts consisted of rough wireframes, and their paper quotes. I worked alongside our business analyst, using his user requirements to create the first round of wireframes. I then transitioned these wireframes into prototypes the developers could develop against. I also created a style guide filled with all the components and colors that would be used in the application.

Worked With

I worked alongside our business analyst, their product owner, and our front-end developers.

Tools

I used Balsamiq to create the wireframes. I then used Adobe XD to create all the prototypes which I exported into Zeplin. I added all pertinent team members to Zeplin so they could view and comment on the prototypes. I also used Visual Studio Code to create the components and style guide with HTML, SCSS, and Angular Material.

The Discovery

I spent a few days at the client’s learning all about their current quote creation and listening to their desires for the new application. I was given some bare bone wireframes that gave me a deeper understanding into BGB’s priorities for the application.

The Process

Immediately after meeting with the client, I began to take the user requirements our BA was creating and flesh out some wireframes. These wireframes took many iterations to make sure the correct components (inputs, drop downs, accordions, etc) were being used. We checked in with the client numerous times during this process to make sure we were on the right track. These wireframes helped drive the user requirement creation as well.

After creating wireframes, I was tasked with prototyping the application by turning those wireframes into mockups.

From This
To This
From This
To this.

The front-end was developed with Angular, so I utilized components from angular material to create my mockups. The mockups were created in Adobe XD, and all the colors and components were the exact size and style the developer would use in the actual application. By exporting these designs to Zeplin, the developers could access the CSS and easily export them to the project.

Adobe XD Prototype – all responsive mockups (two variations).

Along with responsively mocking up the entire application (both MVP1 and MVP2), I created a style guide and fully functional components. This allowed for the developers to reuse each component by copying and pasting the code in different areas of the project. Angular material allows for custom themes. I created a primary and secondary color theme and imported it into the project.

Full-fledge Style Guide

Final Outcome

I had most of the mockups complete before the developers began creating the application. As they began development, I worked alongside them and altered the mockups when necessary. There were some tweaks and changes that had to be reworked. Towards the end, I worked a lot more with the developers than the BA.

During the beginning stages of development, I worked with the front-end developers on real-time design decision during the sprints. This was the final product for the first section of the quote screen.

My initial design on the left to the designs on the right.