Branding Yourself Online for the Workforce
The new era of the interactive resume
Overview
For the project, I implemented the principles and skills I obtained throughout my Master’s Degree concentrated in User Experience Design to design and develop an online portfolio. As graduation is approaching, I wanted a digital showcase to show to prospective employers demonstrating what I have learned throughout the Kent State University Information Architecture & Knowledge Management program.
From designing the brand logo to coding a complete online portfolio, the project uses practical application to showcase the knowledge I have gained from within my program. From designing the info graphic resume with the principles of information design to developing sitemap as I have done in my User Experience Design course, the project sums up my degree.
Branding myself, from start to finish, was a very insightful process. The logo had to reflect my background as well as convey who I am as a professional. After multiple iterations, the logo had to be perfected to be used across all channels of self-marketing - business card, resume and site.
Purpose
To thrive in a job market within an information society; a hard copy resume will barely suffice. With the world interlinked by the web, via Facebook, LinkedIn, and Google, etc; one has to brand themselves to stand out among the competition. Not only do they have to keep their image crisp and clean for potential employers, but they should possess an online portfolio for which they can enhance their experience.
Today, anyone can be a publisher with the amount of tools and resources accessible to everyone. To have an edge over the competition, it would be pointless not to take advantage of these benefits and stand out with a technological competitive edge. The purpose of the project is to demonstrate how the knowledge I have acquired throughout my master’s program can be applied in life and how an interactive resume enhances the job search of a traditional resume.
If you want to become a user experience designer and you have the skills, the ultimate way to present your work is by hosting an online portfolio. Between my master’s degree in User Experience Design and my coding skills, the best way to communicate my abilities is through this showcase.
Overall Process
With prospective employers as my primary audience, the process of creating a brand identity for myself within the job market was crucial.
The first thing you think of when you think of brand identity is a good logo. So, I started my self branding journey with the creation of my brand logo. From the logo, my design stemmed to other print promotional materials including my business card and resume design. I applied information design principles to create an overall image which would convey my strengths and UX skillset.
After the print channels were complete in design, I moved towards a media platform, creating an infographic resume which visually showcased my experience and education and could be used across all social media channels, including Pinterest, to achieve maximum reach for my resume.
Once the complete branding package was finalized, I began to work on conceptualizing my site through the creation of a mind map. From the mind map, the brainstorming invoked the thought process behind the tentative site structure. After having an idea of how the content would be structured, I created a content inventory to organize all my portfolio samples from various locations into one place within the hierarchical structure.
With the planning process near completion, I began working on the wireframes to get how everything would come together on the site. After several rounds of wireframes, designing the web's "look and feel" was my next priority. I used Webflow as a wireframing/prototyping tool to produce several iterations before deciding on a design.
Method
Following are principles and skills developed within my coursework to the project. Select a course to see a phase of the planning and implementation processes.
Designing Brand Logo
As demonstrated below, I turned my initials G.Z. into a computer screen and added the keyboard to further drive the symbolism behind my logo. I chose blue and purple based on the colors of emotions. As blue projects emotions of trust, dependability and strength; purple projects imaginative, wise and creative. I used these colors as I aspire to design creative and reliable services.
I wanted to create a contrast between my name and my field of profession to improve readability. Also, I added enough negative space for contrast to make the wording standing out and not mesh with the icon.
Eventually though, my design took a left turn and I ended up going with design 5 for a more flat “look and feel”. I wanted the design to be less busy and simple and straight to the point much more like the work I do and have done. My style is classic, simple and clean. The previous icon was a creative endeavor, but not exactly accurate in portraying my brand image.
Designing Business Card
Before finalizing my decision on the new logo, I proceeded to design a business card carrying through the design of my original brand image.
After the addition of the new logo, the business card design was updated and I added a dark red (#663333) to my palette to complement the navy blue (#00003e) of the logo.
I wanted to carry forth the color psychology of blue - trust, dependability and strength - into my new image, but navy blue alone wouldn’t have the contrast to create a fluent design. The colors together reflect my simple, classic style and the darker red creates certain energy of excitement and boldness.
The contrast of the new logo - white on a darker shade of blue - drew the attention to my initials. Negative space carried through the flat design of my logo and improved the readability of my contact information for a potential customer.
From the business card to my resume and beyond, my design carried forth a sense of excitement and simplicity. Consistency carries these colors and design principles throughout my entire self marketing package - from the business card to the online portfolio.
Designing Resume
Updating my resume with the design was my next task. From the original one, I replaced the logo and color scheme with the new template. I expanded the resume from 2 to 4 pages to open add white space thus improving readability. The resume demonstrates consistency with my brand image as it matches my business card.
Designing Infographic Resume
Switching from print channels - business card and resume - I began working on my digital brand image through the designing of an infographic resume. This design highlights key points of my resume as well as visually represents time and skills. A QR code will be added to lead the consumer to my website. This resume format leads to the sharing of my resume across social media channels including Pinterest especially.
NOTE: I replaced the original logo and colors of the original infographic resume with the latest edition of my brand logo.
Finally, I decided to save the older version of the logo for GabComm.com and after many iterations, I took a turn towards a more clean, flat design which has become my logo today. The blue alone provides enough emotion in itself to stand alone. My design is less cramped and utilizes more negative space.
I thought I would be incorporating my old logo into my services website, GabComm.com , but unfortunately the logo has been retired for now.
After building a brand image, my project redirected to the user experience design process.
Developing the Site Structure
Here is the original concept map presenting the relationships between my education and career. The goal of the concept map was to brainstorm how to effectively organize the components of my background. I chose an easy to understand non-linear structure as there are too many overlapping experiences to craft a linear structure.
My background in Technical Communications strongly aligns with various aspects of my Master's degree in User Experience Design. User experience design, information architecture and technical writing are all interrelated elements co-existing under the Technical Communications umbrella. The map helped to set up a tentative framework for weaving together the components of my background in an effective and efficient manner.
The preliminary content inventory helped me to evaluate my existing content for organization within the site. Between my portfolio pieces and resume, these initial steps in combination gave me a better grasp of the big picture and the experience I wanted to create for my visitors.
The final step of the preliminary planning process, the site map, was derived through a combination of the concept map and the content inventory. This phase began to tie the ideas and the concrete materials together in a practical organization scheme.
Designing Wireframes
The next step was to wrap up the planning process and dig deeper into my ideas to create a layout of the webpages. The preliminary planning phase gave me this ideal starting point. The wireframes served as a visual representation bring my ideas to life.
The main purpose of wireframes is to create a structural foundation just as an architect produces a blueprint from the initial research. After researching existing and potential content, I designed a layout that would accommodate all the pieces of the puzzle. I wanted the structure to be straight forward and easily understood by my target audience.
Through my research, I reviewed competitor’s sites to examine the nomenclature and information architecture they had used in their very own portfolios to give me examples of what users expect as normal conventions on the web. After several revisions, I realized the simpler the navigation structure, the better. Once again, I had to redesign to eliminate the noise and to simplify a crowded interface.
My objectives were to minimize the number of categories and subcategories by broadening the sitemap, to reduce the number of clicks by combining similar pages, to lead the users to important content via an intuitive navigation system, and to provide an easy to use, enjoyable site using consistency and simplicity in design..
I proceeded with several more wireframes which eventually they led to the development of the global navigation structure for the information architecture.
Creating "Look and Feel" of Site
Here is the initial design for my site. Beyond the numerous changes from logo change, the work behind the design included an extensive iteration process. From redesigning the wireframes (the wireframes are available for download in PDF format ) to adding a design that clearly conveyed my message, the design process did not run as smoothly as I had imagined in the earlier planning stages.
After learning what I can and cannot do due to technical restrictions within web development, I had to harmonize my content with the layout. When drafting it up on paper, it doesn’t necessarily give you the best ideal of how this actually can be implemented with HTML5 and CSS3. Through Webflow , I quickly learned what I could and could not do beyond the interface of the web application.
The following wireframes were created using Adobe Illustrator CS5.5.
Wireframe 1
Wireframe 2
Wireframe 3
Wireframe 4
My initial design included the following logo within a header.
As the design evolved, my global navigation evolved to fit the layout.
After exhausting the design process, I started designing and developing my website according to accessibility and usability guidelines.
After finalizing my design with Webflow, I decided to move the design and content to Bootstrap which gave me more flexibility and less limitations in personalizing my site. Through trial and error, I learned the pros and cons of both technologies when developing a personal site.
Even though, Webflow is an outstanding wireframe / prototype tool; Bootstrap allowed me to go the extra mile with additional customization and interactive features.
Read more information about the final product on the Web Design & Development page.
Best Practices | Designing for Accessibility and Usability
- To provide a greater experience rather than just an informal view, I effectively wove together a combination of text, graphics, layout and interactive elements.
- To support the user experience, I kept clicking to a minimum with a broader versus deeper site structure, kept the most important information "above the fold" and enhanced scan-ability with contrasting headings and visuals.
- To support better navigation, I maintained consistent components and naming conventions across the site as well implemented pagers, breadcrumbs, content outlines and "Back to Top" buttons.
- To contribute to the accessibility of the site, I chose a Level AAA color palette (very good luminosity contrast ratio) to accommodate color blind users.
- To support readability, I chose a very easy to read font family ("Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif).
- To increase site performance and reduce page loading time, I implemented various methods including, but not limited to: implementing gzip compression, reducing the number of CSS and JavaScript files, minifying the CSS and JavaScript, adding scripts to the bottom of the pages and compressing images.
Lessons Learned
- It's hard to conceptualize an entire site in the beginning and expect it to turn out exactly how you imagined in the final product.
- It's more difficult to design a site for yourself, then to create websites for others.
- It's easy to structure a site and imagine its design, but it's not as easy to fill in the content.
- I learned the true beauty of white space and how it enhances the professionalism of sites.
- I understood the true meaning of "less is more" - keeping it simple contributes to a much more valuable user experience than overcrowding a site with useless content just to fill the void.