Perkins + Will Internship
UX/UI Designer + Front-end Web Developer
Overview
I worked in the Corporate IT department of Perkins + Will as a UX/UI Designer and front-end web developer. Our team in Atlanta comprised of two full-stack web developers, a senior UX/UI designer, another front-end development intern, and myself. Our directive was to develop internal web and mobile applications around existing processes. Perkins + Will is an architecture firm with many different teams that work on various phases of building design projects. Our applications were meant to make the communication and information flow between teams more efficient. We used Google's Materialize Framework to design and develop our applications. Below are some highlights of projects I worked on:
My Role
I was initial brought on as UX/UI Designer. I worked with the senior UX designer to understand project requirements and use cases in order to design optimal application interfaces. Our users were the firm's principals, managers, designers, and architects. The user's ages and technical expertise were very diverse in addition to the fact that most of the processes we were trying to replace involved intricate Excel spreadsheets. We needed to design for multiple use cases while not venturing too far away from previously established workflows. Luckily, because our users were in-house, we were able to gather requirements and do research with relative ease.
Due to a high influx of application requests and a small number of team members, I was asked to take on a front-end development role in addition to UX Design. With the help of another senior developer, I learned some new programming languages including Jade and AngularJS. I also learned how to use the Grunt task runner, Node Package Manager, and Bower. After familiarizing myself with the necessarily technologies, I was able to autonomously design and develop application functionality. The senior developers created the databases and exposed APIs which I then leveraged.
Technical Highlights
P+W Pattern Library and Style Guide
One of the first things our team wanted to establish was a visual and technical pattern library and style guide. The goal was to create a unified brand for all applications developed for Perkins + Will. The need for a style guide spurred from the fact that current applications used throughout the company were developed by individual teams in design "silos"; they all looked differently and could not interact with each other.
We downloaded Google's MaterializeCSS site (Google's Materialize style guide) and adapted it to Perkins + Will's brand. We added our own templates and edited HTML/CSS of the elements we wanted to change. We also used the Jade templating language to speed up the development time since there were so many pages. A senior developer also made the CSS/JS available on a CDN for internal use. This style guide ended up being an invaluable resource not only to our team, but to the Marketing team as well.
Strategic Action Planner (SAP)
The first project I worked on was called the Strategic Action Planner. The purpose of the application was to provide managers and principals a consolidated list of objectives/tasks/projects they want to keep track of. The application provides the objective name, action-items, people involved, relevant corporate groups, and completion status.
My role was to take the CTO's requirements and redesign the main table using Adobe Photoshop and Illustator. I worked with the senior UX designer to design the various elements on the page. The main challenges of this project were around how to condense a lot of information into small spaces. We had to prioritize information to be displayed immediately while creating a user-friendly way to display details; all without allowing users to fall down a rabbit hole of new pages and links. Below are some of the prototypes I created in Illustrator:
i/o Landing Page
I was tasked with creating a landing page for our internal team (named 'i/o'). The purpose of the landing page was to provide information about the services we provide, information about the members of our team, link to the Pattern Library, and eventually link to a 'Request A Project' page. I developed the page using our own pattern library mentioned above.
VIEW PAGEED&D
The proposed ED&D application would function as a project management dashboard and tool for all parties involved in a research project from Principals to Arch 1's. Integrated functionality would provide information about team members, project status, and act as a repository of project documentation from start to completion. Working on these wireframes provided me another opportunity to explore elements and patterns which could be added to the team's pattern library.
HUB Redesign - Opportunities App
Perkins + Will utilizes an internal 'HUB' which provides information about employees, company projects, sales opportunities, and other resources that might be useful for employees to know. Our team was tasked with redesigning the existing HUB with the new pattern library as well as add new functionality that can hook into the new apps we were developing.
I was tasked with designing and developing the 'Opportunities' section of the HUB. This section provided information about every sales opportunity including the client, stage (i.e. lead, awarded, lost), project cost, offices involved, etc. After working with the team to gather requirements, I began to design and then implement the following features:
I would like to note that all of the following functionality worked 100% in our staging environment but was not yet released to production.
Opportunity Table
I worked with a senior developer to implement an open source table library for AngularJS. The senior developer provided the APIs from which I retrieved opportunity information and he also created the pagination system. I used the json data from the API to populate each table page. I also utilized Chart.js to create a progress visualization in the table (see screenshots).
Filters
One of the requirements for the app stated that users should be able to filter opportunities by various information. I implemented an expandable filters side-nav that allows users to filter the table in real time. When a filter is selected, an API call is made to repopulate the opportunities based on the filter criteria. The user can select as many filters as they want. I learned how to search and sort nested json objects with this feature.
Quick View
The quick view modal was created because of user feedback. Users wanted to view the opportunity details without leaving the page. I designed and implemented a side-out modal that appears when a user clicks on an opportunity in the table. The user can still click on the table to view new opportunities, and when they do, the quick view modal automatically updates. This design satisfied the needs of managers as they tend to oversee many opportunities.
Notes Tab
The Notes tab exists on the quick view page and allows users to leave notes/comments on an opportunity. Initially, I tried to implement a version from another app but it was not compatible. As a result, I design and developed a new notes/comment system that was hooked up to the database. Wireframes are on the right.
Opportunity Details Page
The details page is dedicated to one opportunity. It provides every available detail about the opportunity plus options to edit or delete it. Also, as some opportunities had location data, I utilized the Google Maps API to visualize the location. If edited or deleted, a POST request is sent which updates the database which then becomes visible in other parts of the application.
New Opportunity Workflow
I also developed the new opportunity workflow for when users want to create a new opportunity. Users are presented a 3-part form where they enter information into input elements. Based on the input, I build out a new 'Opportunity' json object. When the user saves, a POST request is sent to save the new opportunity to the database. The main challenge lied in figuring out which input methods to use for the many different fields available. In some cases, I had to use APIs calls to fetch dropdown selection choices as opposed to using a fixed list. The reason being that the selections changed frequently and we only want to update one master list in the database.