icon_home Created with Sketch.

Fluff Control

Table of Contents

The Last Two Years

I joined a digital consultancy Buildit as a Senior Creative Technologist. The title represented a blend of UX design and front end development. The consultancy leaned technical with mostly developers, and creative technologists being the most design-minded. About a year or so in, there was internal restructuring, and I transferred to the sister consultancy of Designit. Where I maintained my title, and now worked with a group of mostly designers.

Working as a consultant in a hybrid role of UX design and front end coding.

Creative Technologist, UX, UI, Design Research, Front End Development

Banking Project Project

I was embedded mid-stream of a new customer portal project. The preexisting designs fell short of both business needs and developer requirements. So I worked to restructure the entire design to fit those needs. The delivery was an Invision prototype that exposed the design specifications.

banking, rearchitect, Invision, prototype, customer research

My first project was with a bank. I was embedded into their corporate office for the duration, and worked directly with the team. The goal was to create a new portal for their high-value customers. My role was to translate some existing work in preparation for the development team.

The Situation

On the client side, there was a product manager and an UX designer dedicated to the portal project. The development team was run by another embedded team from my parent company. A previous design agency had produced some initial designs that the client was modifying to fit their needs. They also had some high level personas. Because of the timing and the nature of the clients, getting customer research was limited.

My Hurdles & Actions

The existing designs fell way short of both business needs and the picture the development team needed to start. The first set of work was to prepare the designs to be scalable to mobile and responsive design. Rethinking how the information will reflow in different devices. After that, there was a set of features and business needs to be added into the designs. We, the other designer and I, were able to schedule a few phone calls with customers and subject matter experts that let us make more confident decisions. Finally, I rebuilt the design assets and exported it to Invision from Sketch, so the dev team could inspect the prototype for front end coding.

Highlights

The design outcome was pretty standard. I'm most proud of the trust I was able to build in a short amount of time. I wasn't sure how they would react to a major restructuring of the design. But I had held off on that until I was able to meet all the stakeholders, talk, catch up to previous discussions. And once I found the right audience, it was about presenting the idea and then executing on it. It went well enough that my role was extended well into development to assist with decision making.

Pharma POC Project

The next project was a quick one. A research team in a pharmaceutical wanted to streamline its research process. Namely, almost every research project starts the same way, but they never formalized the process. Resulting in ad hoc assets, and random duplication of the same PowerPoint presentations. So one team wanted to build a proof-of-concept that a custom application to manage all the research could be beneficial.

Our development acted as the middle person developing the live prototype. My role was to fill in the gaps of the incomplete style guide, and code the front end components in Angular.

pharmaceutical, Angular, front end, components, atomic design

The Players

This was a complex chessboard of stakeholders and vendors. Designit had the existing relationship and the direct client access. My team (Buildit) was brought in to support Designit with building a live prototype using Angular. Another vendor was responsible for back end architecture, namely creating the "data lake" that would feed this potential application. The client would be both the stakeholders and the users of this application. The specific client team was working with the data lake vendor to champion this idea across the organization to get further funding.

Challenges

Time and politics proved to be the biggest challenges. Our internal team was two back end Angular developers, two Creative Technologists (myself and another), and a project manager. Our team worked pretty well despite being onboarded very late into the process. Early hurdles were catching up to a lot of domain knowledge to pharmaceutical research and then we were waiting on designs to be fed into us. That was smoothed out eventually. But ultimately politics got the best of us. The data lake vendor fell behind on their schedule which ultimately hampered our efforts to connect to the data. A number of meetings and finger-pointing later, we bowed out with an unhappy client.

Highlights

Things were shifting so quickly at first that it took us a while to gel. But eventually we worked out that the creative technologists should handle the front end code and design. Which meant learning Angular in a week, and some paired programming to get the proper QA tests in-place. I was the only member that was co-located with the Designit team, so I became the primary front end dev, and a designer that filled in the UI gaps. Despite the politics, we were able to build a fully realized API-driven prototype with full test coverage and components adhering to atomic design.

Internal Project

When not on a client project, Buildit had a number of internal projects. I was interested in the career development work, and started building a prototype to match the proposed structure. Basically, Buildit was looking for a flexible skill-based system that discarded titles in-favor of what you could actually do. So you may have a developer title, but also have extensive design experience or ability to project manage. The goal was to capture those nuances.

Attempting to learn new technologies, I leveraged Vue and Google Firebase to build a skill tracking system for employees.

Vue, prototype, Firebase, user management, NoSQL

Vue & Firebase

The original proposal was a massive 150-slide Keynote presentation. I wanted to build something that represented all of those ideas and specifications, and could be the basis for tracking everyone's skills. As a learning goal, I also wanted to try out some new technologies I hadn't used before. I chose Vue as a framework as I heard good things about its simplicity. Also, Google's Firebase as it seemed like a holistic platform to store data and manage user accounts.

Results

The prototype ended up being one of the primary showcase items that the leadership used to discuss career development. It was realized that this skills matrix could potentially fit into other internal processes. On one level it acted as a skills and career tracker for individuals, but also allowed leadership to view the organization as a whole. There was now visibility if we were lacking specifically visual design skills or mobile development skills. It could also allow for better team composition for new projects, and so on.

Research Project

After I transferred to Designit from Buildit, my first assigned project was primarily a design research project. The client was a package logistics company, and they were planning on retiring an old mainframe. The goal was to enable a new system to take over functionality by the end of the year. Our team was coming in to research the current state of the mainframe, and then produce designs for the new system that would replicate all the features.

This was a design research heavy project with many on-site interviews to figure out how all the internal groups used an application that was being retired soon. We found common functionality and potential for innovative features, but the client ultimately didn't want that.

logistics, mainframe retirement, on-site interviews, wireframes, cloud enterprise

Hurdles

The design work itself was fine. We conducted on-site interviews with various departments. We discovered as the company acquired different businesses over the years, each business had their own way of doing operations. Which meant everyone was using the mainframe differently. There was also a mismatch between the leadership's long-term view of how everything should work versus how each individual business operated. Our designs were supposed to thread those disperate wants into something cohesive, and potentially innovative and valuable.

Friction

However, the thing that ultimately broke the project was stakeholder alignment. We couldn't overcome it. The stated request of the contract was to streamline and innovate the process. But in truth, key stakeholders disagreed with that premise. They wanted to simply replicate the existing processes one-for-one. They would put up roadblocks at every phase of the project. By the end, their perspective became the dominant opinion, and our work was pivoted to recreating the UI at-hand.

Consolidation Project

The client is a software company providing functionality to downstream software providers. Their main issue is that over the years of growing, they had a multitude of different portals trying to serve their customer base. The project was to design a new experience that would serve as the foundation for consolidation.

A straightforward design project, but it was conducted completely remotely. My contributions were workshop facilitation, conducting research, UX design, and producing wireframes. The project was then extended so I could build those designs into Angular components.

fractured experience, customer interviews, stakeholder alignment, wireframes, Invision, Angular, components

The Team

Our team was a tight crew with a lead designer (leaning UX), digital designer (leaning visual), and myself in a mostly UX role. The client had a few product managers, and the development team was a vendor from our parent company.

Process

The process was straightforward. Kickoff led to a round of stakeholder interviews where priorities, goals, and hurdles were compiled. A round of customer interviews (both internal teams and external customers that use the portals today.) The data was synthesized into archetypes with broad backgrounds, wants, and needs. Combining the two sets of information, we created speculative concepts. These were vetted by the customers to find which ideas resonated and which ideas faltered. From there, wireframes were produced with feedback from stakeholders. A clickable prototype from the wireframes were produced, and user tested. That final round of feedback produced a list of changes that refined the ultimate design.

Highlights

The project went extremely smoothly all-in-all. The biggest learning moment was that this project occurred during the pandemic. Which meant everything was conducted remotely. We used a variety of video conferencing tools, and collaboration tools such as Miro to get this research and work done. Internally, we used Slack, Miro, and iCloud Keynote to brainstorm, develop research protocols, and presentation materials. Externally with the client and users, we organized special online workshops to facilitate conversations and gain insights.

In Addition

As the development team ramped up, we realized we could further smooth out the delivery process by augmenting the front end work. As the dev team onboarded, I could use the transitory time to code the components directly. Instead of just a prototype or design specs, we could build components in Angular for immediate consumption by the dev team. That way, design behaviors could be coded in, and best practices established from the get go. This also meant the project was extended for further revenue.

Gotcha, anything more conceptual?

I got the gist now.

612-643-1555
phong@phonghtran.com

This reminds me of…

Back to Home