PH!

L

> Page Under Construction <

I am in the process of writing and developing this case study. Please check back for updates! In the mean time, feel free to browse over my final deliverables, designs and current insights for this particular project. More info on the way!

client: Designation

project type: UI/UX

project length: 3 weeks

tools: Sketch, InVision, Principle, Illustrator, Photoshop

medium: Web

Designing for Designers - A Tool for Job-Seeking Bootcamp Grads

> A Brief Overview

safhire is a design project I received during my time at Designation. Made up of four sprints, with each sprint lasting one week. I worked on a team of four designers to conceptualize, design, and present multiple visual solutions.

Our task was to design a visual design system from scratch for a web application with little to no direction. This project was a pseudo-hypothetical exercise to immerse our team into the intense agile workflow that Designation is known for. As our first project where Designation was the client, we took advantage of complete creative freedom to design however we saw fit, based on research and wireframes provided to us by a UX team from a previous cohort.

Our challenge was to design a product that design bootcamp graduates can use to help them organize and manage the daunting task of job hunting. This presented a unique scenario for the team. We understood that it is taboo to design for ourselves (being designers), but for this situation, it was considered a humorous exception.

> Project Deliverables

The following is a list of my final deliverables for this project, available for viewing. These files may be useful for you to get a high-resolution look at my designs. They are also what I have shared with our Designation colleagues at the end of the project.

1.

Moodboards. Inspiration for the creation of style tiles.

2.

Style tiles. Initial design explorations to pitch to the client.

3.

Logo designs. Logo creation for our product designs.

4.

Invision prototypes. Click-thru demos of our designs for user testing and client feedback.

5.

Presentation decks. Communication between our team and the client. Showcases design progress and facilitates discussion.

6.

Low-fidelity wireframes. The foundation for our visual designs.

7.

High-fidelity designs. Every iteration of our designs from initial mockups to final drafts.

8.

Style guide. A rulebook recommending how our designs may be used after handoff.

9.

UI kit. A collection of every component in our designs. Includes buttons, text boxes, illustrations, etc.

10.

Microinteraction animations. Animated mockups for how elements behave based on user interactions.

11.

Marketing page mockup. A web page design to communicate the message of our product designs.

> Style Exploration

After doing some research on the general audience of the web app we're creating, I empathized with the users, mainly because I was going to share the same frustration and convulsion they were dealing with in job hunt. Knowing this, I developed three style tiles to explore these feelings that bootcamp grads are dealing with after graduation.(Click on thumbnails to view full-resolution images.)

Style Tile #1 - Energetic, Pleasant & Nostalgic

The first style tile mirrors the energy that bootcamp grads possess towards their new careers. The bright and vibrant color palette is meant to change the perspective of the user from fear to excitement. To create a friendly approach, the use of round corners and buttons calms the user, while the use of cartoon elements, such as the character below, creates a personable and pleasant appeal. The clever use of posts and "pins" reminds the user of their experience in Designation, or other bootcamp, weather they learn UI, UX, or front-end web development.

> 1st Iteration

> 2nd Iteration

> Insights

The first iteration lacked the incorporation of interface elements, creating a lack of cohesion and misinterpretation of the intention of the design. From a design standpoint, the usage of pink was overwhelming and needed to be toned town. I wanted the style to invoke more of a tactile appeal, so I incorporated a wall-like texture. This makes it so the cards and modules are "pinned" to the wall. To make the design a bit more delightful, I added a small gradient to the profile card to help the text stand out a bit more.

Style Tile #2 - Warm, Social & Engaging

Being that Designation was in an urban environment, I understood the popularity of coffee shops for designers who freelance or work remotely. For professionals, I assumed that a coffee shops was the best place to connect with colleagues, to do business, and to socialize with friends. For this style tile, I drew inspiration from coffee shops to develop a warm and engaging interface.

My first thought was to create a chalkboard that the main interface would sit on. The clever use of post it notes, again, create a nostalgic feeling for the user, reminding them of their Designation experience. The heavy use of neutrals was important to create a warm appeal, especially with the leather-like brown color. The orange is meant to be an engaging and actionable accent color, keeping it aligned with the overall warm vibe of the style. The use of a chalk-like typography makes the experience more engaging and tactile.

> 1st Iteration

> 2nd Iteration

> Insights

My first iteration felt messy. The alignment was off intentionally, but this would make the user feel unorganized and frustrated. The point of this app was to help the user feel less overwhelmed and to assist the user in organizing a plethora of job applications. The use of chalk typography needed to be lessened, for the chalkboard should be used as the main interface window, not for windows or sidebars. The second iteration cleaned up the alignment, but also simplified the background chalk texture to a slate-like appeal. The cream color in the sidebar is better suited for lists and navigation items, increasing readability. To bring out the coffee-shop vibe, I incorporated a delightful coffee bean background and chalk illustration of an espresso cup and saucer.

Style Tile #3 - Goals & Advancement

I envisioned that many designers work very hard in their craft, especially in the Designation program. Knowing this, I figured they would be night owls and work late into the night to accomplish their goals. This design was meant to associate with those night owls. The use of a neon-like glow around every element was to give the interface a nightlife appeal. Rounded edges and elements support the calming nature of the design. The use of mountain imagery aligns with the idea of advancement and forward momentum.

> 1st Iteration

> 2nd Iteration

> Insights

The biggest issue with this design was that it reminded users of sleep. In fact, with how calming the interface felt, it lacked energy and focus. To fix this, I changed the environment to a brighter and intentional design. The use of mountains and black/white colors intends to create a focused and goal-oriented mindset. Changing the rounded edges to a cleaner and hardened design improved the focus and affordance of each element, sidebar and window. The color palette was created to be intentional, with each color acting as a state, such as caution, neutral, warning, etc. The incorporation of identifiers in each job card are meant to alert the user of specific action steps, again making the design much more intentional and practical.

> Style Refinement

After iterating on the previous style tiles, it was agreed between the creative director and myself to incorporate elements from the first and third style tiles. The energetic appeal of the first style tile is interwoven with the actionable, forward intention of the third style tile, creating a simplified look that cleans up the interface.(Click on thumbnail to view full-resolution image.)

Final Style Tile - Actionable, Pleasant, Intuitive

The use of color is intentional in this style, aligning with a state, as explained above. Certain tasks, such as completing a prompt by selected the "Done" button, required more affordance, hence the use of red. However, the CTA color of the "add a job" button (+) makes the task optional. The incorporation of negative space was accentuated to give each element more breathing room, making the interface focused and more relaxed. To keep the pleasant appeal of the first style, the illustrations and cartoon mascots were incorporated to align with the idea of advancement and forward momentum with the mountain imagery. The "posting" of the job cards like a post-it note was a popular idea that survived through each iteration of the style tiles. The post-it idea is also incorporated later in the design process, specifically microinteractions, to make the experience more nostalgic and delightful for the user

> Initial Screen Wireframes

Before our team began designing high-fidelity mockups, we had to align on the initial layout of the app. We took the original wireframes that the UX team handed off and communicated points of interest and any problem areas. Using our audience and current design research, we inspected the wireframes and made changes accordingly to align with our team's design principles.

Our team revised the wireframes to agree on a common layout. Using the notes from our team meeting, we diverged and created our own set of wireframes to align with our own style explorations, using our notes to create cohesion between designs. Below, you will see key screens, cards, and behaviors of the app.(Interact with slider to view wireframe designs. Click on snippets to enlarge images.)

> Dashboard

The main dashboard utilizes columns to separate each category of application statuses, similar to the Huntr app. I maximized the workspace by moving the entire navigation to the top of the app to bring focus to the job cards on the interface. The navigation adjusts to the current window the user is on, and the nav items on the right will change accordingly. Company logos will be large in the center of the job cards for easy identification. I tried to combine as many elements as possible to simplify the interface and to create better affordance with each major element, such as the job cards. This also creates a simplified interface that appears intuitive to the user.

> Job Card

The job card is another instance where I attempted to combine separate tabs into just one, simplified window. Basic information, such as the position title, company/business name, and job description are first displayed for each identification. To help divide the essential information from the secondary tasks, a timeline of events breaks up the flow of content. Each event is clearly marked on the timeline to help the user keep track of his progress for the specified job application. Below the timeline is information regarding specific contacts and tasks. With all information present, the user is at ease and can avoid getting lost in the app.

> Drop Down Menu Behavior

To assure that each element is intentional, and to simplify the user interface, each secondary navigation item will contain a drop down menu to keep the place of the user in the app. Each menu will simply drop down and overlay on the interface to present the user with options. In this case with the task list, the user can interact with all tasks that he/she has input into the app, weather it be associated or unassociated with a job card. Each drop down menu is intended to stay open until the user clicks out of the menu window, to avoid accidentally closing the menu. Each nav item will highlight to let the user know which menu is currently open.

> Events Page

The card design is universal across all screens of the app to maintain consistency. To align with the other screens, each element is packed with information to keep each card clear and intuitive. The most important information is segregated from the details of the event. This information includes a large date square in the top left, with time information and an RSVP option below. To assure that this information is vital for each event card, the elements are arranged on a dark background. Secondary information is arranged on the right. Since descriptions can range greatly, the content is broken up by allowing the card to be collapsable.

> Contacts Page

The contacts page has much less vital content immediately apparent. The contacts page is much more of a reference for the user to help him/her track the connections that they have associated or unassociated with each job card. Identifiers on each card alerts the user which social channels he/she has connected with each contact, and weather or not each contact is a "favorite". The photos are large and centered in each card to help the user with facial recognition. The most important information that the user immediately sees on each card is the first name and last name initial, the job title he/she holds, and the company he/she works for.

> Contact Card

The first notable elements include the large photo on the left of the contact card and the name of the contact. Below the photo is a large indication of how long the user has known the contact, which is an editable piece of information. The typographic hierarchy creates a flow to help the user digest all information on the card quickly. Specific contact information is separated into bunches with similar pieces of information. LinkedIn profile and Slack info is more prevalent to a bootcamp grad, so it's listed above phone, email, and physical address. Identifiers, as noted before, are enlarged here to alert the user of the contact card's current status.

> High-Fidelity Designs

(Click on thumbnails to view full-resolution images.)

Dashboard

The dashboard looks colorful, but intentional. Each color that is integrated in each card has a purpose and aligns with the job's priority, simply ranging from low (blue) to high (red). Neutral, hidden or blank cards have the color gray, which are to be identified as an empty state. Any job card that has a black color is either rejected or archived. Each category/column has a slightly different background color to assure that each job card's status is clear.

Events Page

The events page works similarly to the dashboard, with each color representing a priority of that event, set by the user. Each card has all of the information that the user will need, with the only interaction points being the collapse/fill icon and the attendees portion.

Contacts Page

The contacts card has a similar layout to the other two pages. The difference here is the amount of cards displayed at once is greatly increased, due to the amount of information present. Identifiers display what info fields are filled out inside each card, such as LinkedIn and Slack. Caution indicators alert the user to outdated or missing fields on a card. A blue triangle is present for those that the user prioritizes from within the contact cards.

> Supporting Modal Designs

The web app only contains three main screens that the user interacts with. This avoids a cognitive load on the user, simplifying the user experience and making the task of organizing the job hunt much easier. All other windows are overlaid the interface as a card or modal.(Interact with slider to view modal, menu and screen designs. Click on thumbnails to enlarge images.)

> Job Card

The job card minimizes the use of images to assure that this UI is mainly informative. The only colors used are the CTA blue and red "checked" color for the tasks. The neutral colors minimize distractions for the user, while simultaneously adding warmth to help lessen the cognitive load.

> Job Card Overlay

The job card minimizes the use of images to assure that this UI is mainly informative. The only colors used are the CTA blue and red "checked" color for the tasks. The neutral colors minimize distractions for the user, while simultaneously adding warmth to help lessen the cognitive load.

> Contact Card

The contact card has similar behaviors to the job cards. The photo is enlarged to assist the user to quickly identify the contact. The card is small, considering that there is not as much content from the other cards on the app, but to also simulate a business card or address card.

> Contact Card Overlay

The contact card has similar behaviors to the job cards. The photo is enlarged to assist the user to quickly identify the contact. The card is small, considering that there is not as much content from the other cards on the app, but to also simulate a business card or address card.

> Task List Menu

The task list is only available on the dashboard screen. To minimize the stress of opening a new window, the user can simply access this menu as a drop down. The user adds a task by entering in the information in the text fields and clicks the plus icon. The window is scrollable to avoid a long, strenuous list for the user to peruse.

> Sort Menu

The sort menu has a similar behavior to the other drop down menus. This tool is simple, using iconography to help the user quickly understand the identity of each filter. After an interaction with a filter, a circle forms around each icon and the colors inverse to communicate an active filter state.

> Search Overlay

The search overlay has the simple purpose of searching for a particular job, contact or event. After the user inputs a search inquiry and clicks search, job cards based upon the keywords are populated into the interface, taking precedence over all other categories and job cards.

> Microinteractions

Since our product is mostly experimental, our team agreed to build a few examples of how our app could behave using microinteractions. We believed that since our users are stressed, tossing in a few integrated animations could help the designer feel at ease. Adding a sense of delight using microinteractions is also a crucial part of the design process for a successful user experience. I have built two practical solutions to demonstrate basic tasks such as navigation and interacting with the main dashboard.(Click on thumbnails to view animated gifs.)

Adding a Job

One of the most important tasks that the user will run into is to add job cards to populate the interface. Not a complicated animation to accomplish, but important to give the task a smooth and genuine feel to mirror the movement of placing a note on a "wall".

Toolbar Shift

Since the navigation is integrated into one single bar, the many different tools that the user might need have to respond to whichever navigation item is selected. There is a brief, but smooth transition that occurs that changes out the tools, adding delight and a sense of ease to the user.

> High-Fidelity Prototype

Our team has converged to develop a possible user flow for the app. The flow has been designed as an Invision prototype to demonstrate the function and behavior of each screen, window and transition. To navigate the app for yourself, feel free to download the prototype below.

download prototype

> Check Back for Updates

I am in the process of writing a detailed case study about this project. I am eager to tell you the story about this design experience, so please check back for updates!

> Other Works

A Match Made in Heaven

TYPE: UI/UX

Making character-matching more immersive through a new mobile experience.

explore

High Impact B2B Gifting

TYPE: UI/UX

Attracting new corporate customers
with a website redesign.

explore

Big Growl Six

TYPE: BRANDING

Designing the look and feel for one of
Michiana's biggest rock & roll festivals.

coming soon!

The  portfolio  of  Philip  D.  Gallam

Let's  connect!

The  portfolio of  Philip  D.  Gallam      ---