Summer Synopsis

As my internship comes to a close I reflect on the highlights of my summer and all of the new things I learned. To start, interning at Industry Dive was a very beneficial experience. The amount I learned about web design as well as the digital media industry and start-up culture was astounding. Here are ten lessons I learned this summer either from the intern program, the design team or from the company. Some of these may seem obvious or cliche but often times you have to experience something before realizing the truth in the statement. If you want more specific technical lessons and the projects I worked on you can find them in the rest of the blog posts.

  1. Office culture matters

    One thing that Industry Dive really brags about is their office culture and the fact they have been selected as a Washington, DC best place to work. I didn’t understand the importance of this until I started working here. Really enjoying where you work and who you work with makes the tasks seem much easier. Feeling comfortable to ask questions and recommend new ideas allows everyone to feel like they are a pivotal part of the team.

    20160721_185230
    Industry Dive employees on the company boat cruise!
  2. Never stop learning

    Our weekly company meetings surprised me in that I didn’t expect to enjoy them as much as I did. The meetings consisted of each department sharing what they were working on and allowed people to celebrate co-workers accomplishments. At the end of the meeting a different department presented what they do on a daily basis. The fact that everyone wanted to learn about each other reflects the overarching collaborative and inquisitive environment.

  3. Coffee is a way to network

    Another company wide event was the coffee challenge. The challenge tasks each new hire to take different co-workers out to coffee. The hope is to encourage all new hires to interact with other departments one-on-one and make personal connections. Since I am typically more of an introverted person this gave me a way to reach out to individuals and push myself out of my comfort zone. This taught me the importance of getting to know different people throughout the office even if they aren’t in your department. It also inadvertently taught me to tolerate coffee.

  4. Group projects will always be hard

    Part of the internship program was the internship project. The challenge was for the five interns to create a data driven featured article. In the end we were very proud of our final product but it wasn’t always a seamless process. Group projects will always face challenges around divvying up roles and solving unanticipated road bumps. The difference compared to school projects was that all of the interns wanted to succeed and contribute to the project. I found working with a group of intelligent individuals on a real-world project was much more satisfying than a grade.

    interns_2016
    Industry Dive 2016 summer interns
  5. Dogs are great work partners

    A fun highlight at Industry Dive was the open dog policy where employees can bring their dog in for the day. Being able to work with a dog at your feet was definitely something new and brought smiles to everyone at the company. I grew up with two dogs so it was great getting to have some canine friends around. I also learned that I would probably never bring a dog in as I personally wouldn’t be able to get anything done.

  6. Resumes don’t have to have everything but the kitchen sink

    Part of the internship program was the resume review. I was given the opportunity to send my resume to my supervisor for feedback. Initially my resume included every accomplishment I had ever achieved since my freshman year. The review helped me focus my resume and set me up for success for when I decide to apply to jobs.

  7. Startups have a lot to offer

    One of the most impactful lessons from this summer was realizing the opportunities that startups hold. The variety and scope of projects I was able to work on wouldn’t be possible at a larger company where roles are much more cut and dry. Seeing just how the design team could offer up new ideas that were implemented in a quick time frame really opened my eyes to the benefits of small companies. While startups may not hold the prestige of working for a household name, being able to make a difference and shape a product is something that I have always considered a career goal.

    corevalues

  8. Career paths are not linear

    Another internship program event was the new hire panel. Note that at Industry Dive “new hire” is relative term since the company has doubled in size in the past year and new hires are abundant. During this event all of the interns were able to hear about how different individuals ended up at the company. The most surprising aspect was the fact that not many of the employees graduated expecting to be in the role they are in now. While I know I am interested in web design I understand I probably can’t predict the exact role I will fill come a few years after graduation.

  9. Gifs are still relevant

    One prominent part of the Industry Dive community were gifs. I quickly learned that my gif knowledge and experience are greatly lacking. While I still have a lot of room for improvement I have learned about making, finding and sending gifs.

  10. There is always a way to improve

    The final lesson I learned from the design department was that you can always be improving and optimizing. While I was here the process for different design team projects was continually being optimized and questioned. Rather than just settling on something that worked the desire to be constantly improving drove all the tech and design decisions. In just my ten weeks a new mobile site was launched, a new mobile application was drafted, a new desktop site was started and a new design workflow was developed.

    giphy (3)

Advertisements

UI Makeover – Data Part 2

As the internship project wrapped up, another exciting thing happened in the office this past week: the deployment of the new mobile application. Both the design and tech teams celebrated the successful launch of the new design onto the Utility Dive mobile site. Once the site seems stable and if no large issues arise, then the tech team will deploy it across the other industries. While I was not an integral part of the redesign, I was able to provide user feedback and help with the test of the site across platforms.

With both of these exciting projects coming to a close, I had to start making moves on the data visualization tool (which I introduced in the Internal User Testing post). I left off with the next steps for the internal data tool being to determine the requirements and prioritize them so that I could start implementing them. The first thing I did was take all five user interviews and list out all of the desired features and sort them into front-end or back-end. The front-end issues were the ones that I thought I could address before the end of the internship. I then further divided them into either a priority or reach goal. This allowed for me to show which goals the users had brought up that were good ideas, but were maybe not quite as feasible. I then added all of the goals (both priority and reach) to GitHub as individual issues. I began with around twenty issues but this number fluctuated as I learned more about Shiny applications and R.

Challenge and Approach

My challenge was to take all of the front-end issues and solve them using my HTML/CSS experience, along with learning how to solve them if it were a Shiny specific design issue. The issues I solved can be broken down into two categories: visual and accessibility adjustments. The main focus for the visual challenge was to incorporate an external CSS sheet so that I could have easier access to the design styles. I ended up using the ported SASS for Bootstrap since the Shiny apps are built on top of Bootstrap and Bootstrap is initially built with LESS. Once I had the SASS files I created a custom file to override the Bootstrap styles when necessary. While this is more extensive than just attaching a CSS file, it allows for easier customization in the future.

The visual issues involved not only adding a stylesheet but also figuring out how to responsively size the graphs and tables. I also addressed the complaints concerning the visual hierarchy of the tables versus the graphs and reorganized accordingly. The accessibility adjustments consisted of helping make the tables easier to use as well as indicating when the application was loading. To improve the tables I added default sorting from descending order, changed the labels to be semantic rather than the variable names, and made the sorting arrows more visible. To confront the loading issue (the user couldn’t tell when the page is loading), I added an overlay that appears whenever the application is either initially loading or recalculating. Overall, all of these small changes made a very large difference in the user experience.

Results

Visual Improvements

The main visual improvements were the addition of a stylesheet as well as making the graphs and tables responsive. As you can see in the first screenshot, the graph extended past the edge of the screen.

Screen Shot 2016-08-08 at 5.31.19 PM

Screen Shot 2016-08-08 at 5.31.01 PM

I also updated the Dives page to better reflect the users priorities. Rather than having a table that showed only one data point I instead called out specific values.

Accessibility Improvements

With the addition of a loading screen, the user no longer has to wonder if the application has frozen or if it is just still calculating the results they requested.

loading_screan

As for the tables, the most apparent adjustment is the styles. There are also improvements in the sorting capabilities with clear column names and easy to find sort features as well as the removal of the non-intuitive bottom search feature.

I also added a legend for the graphs to help the user know what each line represents. In the left column I added helper text for the y-axis dropdown and added delete (x) indicators on the multi-select filter.

 

The Intern Project – Part 2

As the month of July came to a close, I continued working on the intern project and finalized the new email blasts. I completed three different designs for the email blasts based off of the original template: webinar, survey and lesson. Each template design borrows from the same premise of being easily customizable and attention grabbing, while remaining unique in style. The webinar template includes speaker profiles, the survey template has a call-to-action above the fold, and the lesson template incorporates iconography. Together, the emails create a consistent message but also allow for the ad operations team to include topic specific details for each email blast.

The rest of the week I focused on the internship project as we prepared for the featured articles to be published. The editorial intern worked hard to finish each of the pieces and have them reviewed by publication editors while the tech intern and I kept busy finalizing the layout and design details. We met multiple times to discuss what the design requirements would be and how the aesthetic would be consistent across the three publications.

Challenge

Previously, I had broken down the project into three parts: design aesthetics, data visualization, and compartmentalized articles. While I drew off of these inspirations for the final iteration, I also had the challenge of recognizing the necessity of stepping away from some of the more intricate ideas. Most of the deviation stemmed from the fact that the content management system restricted the scope of the design customization and also that the article needed to be stylistically consistent with previous featured articles. With that being the case I focused primarily on the pull-quotes, chart design and graph stylization.

Approach and Results

Pull Quotes

The approach for the pull-quotes was to look at pull-quote styling throughout other publications and see what made them successful. Using my inspirations, I decided that I wanted a headshot of the speaker to incorporate more photography throughout the piece. I also wanted to include a little bit of red to make it stand out more.

Screen Shot 2016-07-20 at 10.28.51 AM.png

Tables

The table took a few iterations before the design successfully supported the data. The challenge here was that while I wanted to incorporate color, at first it caused more confusion rather than helping the message. By removing the strong color from the first iteration and emphasizing the US data over the state data I found the chart to be more successful.

Graphs

Finally I tackled the graph stylization. The first challenge for the graphs was that the data itself was not what we had anticipated. Initially, we wanted to use line graphs to show the difference over time of worker populations. However, we soon realized that the difference was not significant enough to show visually in this manner as it was often less than 1%. I then tried different ways of communicating the same idea such as the percent difference. While this was interesting to look at it, the graph was even more confusing. Finally I decided on a donut chart; though this chart is less powerful due to less data, it is more direct in its purpose. The chart now allowed the user to see the worker profile of the current year in a clear way.

Check us out!

Utility Dive

Construction Dive

Education Dive