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!
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.
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.
Moodboards. Inspiration for the creation of style tiles.
Style tiles. Initial design explorations to pitch to the client.
Logo designs. Logo creation for our product designs.
Invision prototypes. Click-thru demos of our designs for user testing and client feedback.
Presentation decks. Communication between our team and the client. Showcases design progress and facilitates discussion.
Low-fidelity wireframes. The foundation for our visual designs.
High-fidelity designs. Every iteration of our designs from initial mockups to final drafts.
Style guide. A rulebook recommending how our designs may be used after handoff.
UI kit. A collection of every component in our designs. Includes buttons, text boxes, illustrations, etc.
Microinteraction animations. Animated mockups for how elements behave based on user interactions.
Marketing page mockup. A web page design to communicate the message of our product designs.
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.)
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.
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.
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.
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.
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.
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.
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.)
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
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.)
(Click on thumbnails to view full-resolution images.)
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.
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.
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.
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.)
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.)
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".
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.
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.
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!
