Posts categorized as Case Study

WEB DESIGN

This design pairs one of my favorite images – irises in spring – with my intuitive, crisp, and accessible design style to show off who I am as a designer

Skills: Brand and identity design, color and typography, logo and business card design, responsive web design, accessible web design, web development

Tools: Figma, Photoshop, Illustrator, InDesign

---

The Project

Project overview

In order to introduce myself as a visual designer, I decided to design my own portfolio website to showcase my work and myself to future prospective employers. The design would feature my design projects and skills, a personal introduction, and a contact section, and the entire website would be responsive and accessible.

Project scope

Deliverables for this project included a brand personality, color palette, font pairing, set of logos, business card, and webpage, including designs for a main page and for a case study page. Deliverables were created using Figma, Photoshop, Illustrator, and InDesign, and the final webpage was coded in HTML, CSS, and JavaScript using Visual Studio Code, Git, and GitHub.

Project role

As both the client and the designer on this project, I worked to bring my own style and personality to life in a design that both showcased and featured my design work.

---

The Process

Project goals

As I pivoted my career towards working full-time in design, I knew that I would need a portfolio website to show off my skills as a designer to prospective employers. I also wanted this project to prioritize accessibility at every stage of the design process, because of my personal and professional passion for an inclusive and welcoming world, and to be filled with my personality, both as a designer and as an individual. The project goals thus included creating my own brand and logo, designing my website, and developing the final website into a functional design; I wanted my portfolio to be its own introduction to me and my work, not merely a vehicle through which to see what I can do as a designer.

Brand identity

From the very beginning, I had an image of what my personal brand was that I knew would drive every aspect of the design. I grew up spending so much time outdoors, playing in the garden and going on long walks in the woods, and I’ve continued to be so in love with the natural world as an adult, so I wanted to bring an element of plant life to my brand. It would speak to who I was as a person, but would also lean into this theme of organic growth and connection building that is at the core of who I am as a designer – I design because I want to create an online world that’s accessible and welcoming for everyone, allowing us all to connect to, learn from, and grow with each other.

My color scheme inspiration came from a favorite memory of watching irises bloom in the spring. They’re such vibrant, quirky flowers, which is maybe why I love them so much, as the same can and has been said about me. The iris’s vivid purple would also speak to my creativity, which I believe is a crucial part of what makes a good designer; we need to be able to think outside the box, combining tried-and-true strategies with new ideas in exciting and evocative ways to bring our work to life. I hoped that this combination of purple and green would subconsciously bring these qualities to mind in my users when they saw them throughout my brand.

My initial logo design sprung directly from the brand imagery I’d been developing – I imagined a flower growing out of a computer monitor, really driving home the combination of technology and organic growth. But, when I started to create the logo in Illustrator, I found that I wasn’t as fond of the actual design as I was of the idea behind it. There were too many parts to it, and I felt it came across as more scattered and less cohesive than I’d been hoping it would be. I wanted it to be simple and evocative, something that was instantly recognizable, but this design wasn’t living up to that. I cut it back, taking out the monitor and the flower’s stem to leave just a blossom and leaves, and then switched the flower petals for a gear in the same purple; with the bright purple color against the green leaves, it was still clearly a flower, but the gear brought in a technological element. This new logo reinforced the brand identity I’d begun building with the color scheme with a simple design evoking both of my brand’s main themes, which was exactly what I needed it to do.

I also wanted to create a larger logo that would incorporate my name, so I started looking into fonts. I wanted to find a display font for my main brand font, possibly with serifs; I wanted it to be easily legible but also have beautiful curves and some interesting textural elements to give it character. I was initially drawn to Fredericka the Great – the letters were elegant and had enough weight on even the thinnest strokes, but had some gorgeous shading on the letters that caught my eye the moment I saw it. It was both rustic and stable, and I absolutely loved it. Once I started using it, however, I immediately realized that it wasn’t going to work – the letters’ shading was transparent, which made the letters hard to read in any combination that wasn’t pure black-and-white, so it just wasn’t accessible with how much color I wanted to use throughout my design. I started looking again and soon found Temeraire, an Adobe font with beautiful, clean lettering and gorgeous accents that combines reliability with a quirky creativity that’s very true to me and to my brand. And it was a perfect pair to Montserrat, sharing many of the same letter shapes with the clean sans-serif font that’s been a favorite of mine ever since I first saw it – I love how Montserrat combines beautifully consistent lines and slightly wide letters and kerning to make text so easily legible. This combination would be attractive and on-brand, and would create a great starting point for creating accessible text in my designs, including my complete logo.

Finally, I combined the color scheme, logo, and font pairing in InDesign to create a digital business card that could also be printed for in-person use. I used the pale green accent color with black text to echo my planned website design and promote readability in all formats, and filled the top half of the card with my complete logo to draw the eye in. Finally, I placed my contact information on the right half of the card to create a dynamic, visually interesting design without sacrificing the legibility of left-aligned text.

Website Design

I started creating the website design with a pen-and-paper wireframe that featured five sections – a header bar with navigation links, an introduction with a full-width hero image, a work section with subsections for each featured project, an about section, and a contact section. I then started creating the digital wireframe using Figma, creating each section for the mobile design before editing them for the tablet and desktop design. I made several changes to the design during this process, including adding more space between sections, adding borders around the featured projects to differentiate them, and adding a basic contact form.

As I prepared to move the wireframe into Photoshop, I decided to focus on designing the mobile design, rather than designing mobile, tablet, and desktop versions simultaneously. I knew that perfecting the feel of the tablet and desktop designs would likely require some changes to the mobile design, but I also knew how much time propagating every change across the three versions would take, and was sure that this would be the most efficient design strategy. I created the mobile design from the wireframe and began fleshing it out with images and copy, including a stunning hero image and pictures of my designs. I decided against the blocky borders around the featured projects, feeling that it made the whole design feel very modular. Instead, I used circular images and centered text for a more organic feel, and added plenty of space between the projects to keep the design from feeling too tight or confused.

User feedback

Having completed a first draft of the design, I reached out to fellow designers, non-designer small business owners, and others for feedback on the design, to ensure that it accurately showcased me, my personality and brand, and my work. One of the areas I’d specifically asked for feedback around was the selection of personal photos I’d included in the About Me section. The result was unsurprising – everyone’s favorite photo was of my incredibly adorable and photogenic cat, Milo – and I created a new introduction section at the top of the page featuring their favorite photo of me. This was also the perfect place for a quote that I’d seen in an article on Bumble’s product design that had caught my heart on fire. In it, Bumble’s head of product design, Lara Mendonça, talks about designing for “vulnerable users” instead of average users and, while she was talking about designing a dating app for women, that quote cut to the heart of why I center disabled people in my designs. Products designed for disabled users generally still work for non-disabled users, but the reverse often isn’t true. To make designs accessible to and welcoming for all, we have to center our most vulnerable users and their needs and experiences.

Finally, I created copies of the mobile design for tablet and desktop versions, and adjusted the formatting to fit the new widths. Early in the design process, I had made notes of the different typefaces – including font, size, line height, weight, and color – in order to create consistent styles across sections of the site’s mobile version. While creating the tablet and desktop versions, I used the first instance of each style to set the proper conversion, and then adjusted each subsequent instance to match, so that the website’s style would remain consistent between and within versions. I also adjusted the formatting of some sections to facilitate a smooth transition between versions. In the case of the introduction, I had originally split the text block into two sections, one beside the photograph and one underneath. On the mobile design, this was beautiful but, when I attempted to match this on the tablet and desktop versions, it didn’t have the same impact – at an appropriate size, the first block of text was either much shorter than the photo or was ridiculously skinny. I decided instead to place both sections of text together below (mobile) or beside (tablet and desktop) the photograph, and to bold the first section and add a small gap between the sections for emphasis, which preserved the flow of the design without sacrificing the readability.

---

Project conclusions

Challenges

One of the biggest challenges of this design was acting as my own client, without a doubt. I had so many ideas of what story I wanted my design to tell and, the more I explored other designers’ work, the more ideas I had of how to bring that story to life. It was so tempting to go back again and again to adjust the formatting and styles, to add new sections, and to just fiddle with it all – and I’m certainly guilty of giving in to that urge! – but I knew that couldn’t last. As I’ve seen in every project I’ve ever worked on, as a designer and otherwise, there’s a huge difference between actually fixing problems or improving your work and chasing perfection. When I found that line with this design, I did a final check on the project, declared it complete, and started developing it.

This design also forced me to reconsider my design process. In the past, I’d designed much simpler projects and, while I’d gotten plenty of feedback as part of the design process, I’d never designed for an actual client with a real stake in every aspect of the design. My design process reflected that – I created mobile, tablet, and desktop versions of the design before seeking out feedback. While that worked in the past, I knew going in that that process wasn’t going to work for this project; there would be too many things I wanted to adjust and try out throughout the process, and constantly updating different versions would be incredibly inefficient. Instead, I focused on designing the mobile version and, once I was satisfied with that version, created the tablet and desktop versions from it. This required me to make small adjustments to the mobile version as I saw how the tablet and desktop versions changed the overall design, but the change paid off: it saved me considerable time and effort over the course of the design and, as a client, it would’ve saved me quite a bit of money.

Conclusion

After I completed this design, I began to develop it using a combination of HTML, CSS, and JavaScript, turning it into the fully functional webpage that you see before you today. This portfolio has become the backbone of my professional brand, allowing me to connect with prospective employers and clients and to show off both my work and my design process. If you’re interested in working with me or in any aspect of this design, please don’t hesitate to use any of the below contact methods to reach out – I’d love to hear from you.

Take a closer look

Karla Kahvi was opening The Whole Bean, a coffee shop in a popular neighborhood of her small town. She needed a brand design both for the launch and for the shop’s lifetime that would help connect her to the community and attract her ideal customers.

Karla’s Goals and Priorities

• Build a brand identity that fits with her products and the neighborhood to help her attract her ideal clients
• Pair small-town intimacy with a sense of global responsibility
• Create brand imagery that will help launch her business and continue to support it throughout its lifespan

---

The Process

Project goals

Karla was especially interested in connecting with the community and fitting in with the neighborhood’s vibe, and I was hired to create an identity design and associated deliverables to help with that. Right away, I knew that this shop’s identity would need to balance and speak to two different values. Firstly, the shop would need to channel the warmth and openness of a locally-owned, small-town business, and really make everyone feel welcome and at home from their first interaction with the brand. Secondly, the name “The Whole Bean” really spoke to a sense of global responsibility, sustainability, and ecological connection.

Brand identity

If The Whole Bean is to succeed as a brand, these two values would need to come together seamlessly to create a single identity. Knowing both small-town culture and sustainable/eco-friendly culture, I immediately leaned towards a brand personality rooted in sincerity, one that radiated authenticity and was rooted in a desire to create connection with both the community and the world as a whole. The Whole Bean’s ideal customers would then be people who were often choosing between supporting locally-owned businesses and shopping with businesses outside the community that had a sustainable, eco-friendly focus; setting The Whole Bean up to fulfill both of these desires would make it a natural choice for these customers, as well as those who prioritized one over the other.

That was the energy I was looking to showcase as I pulled together brand images. I prioritized warm sunlight and colors, comfy and gently worn chairs, and bright greenery to create a cozy, almost lived-in space that would be naturally inviting. At the same time, I passed over photographs that appeared too cluttered or industrial; no one feels welcome to linger over their coffee when they can hear everything at the next table. Finally, I brought in The Whole Bean’s lifeblood: coffee and the people who drink it. I chose images from every stage of coffee’s life, from unripe berries on the branch to roasted beans to beautiful coffee drinks in people’s hands, to bring in a sense of connection to the coffee-making process and reinforce the sense of global responsibility that underpins this brand.

These images often featured rounded lines and swooping curves, and I mirrored that in selecting the main brand font, Ice Cream. A display font, it combines smooth, fat letters with delicately pointed ends to evoke warmth and comfort without falling into sweetness or insincerity. There was a little bit of a bite to it that I loved, especially when reinforced by the even lines and square corners of Karmina Sans as a body/small text font. The pairing brings an open, friendly tone with a straight-forward, sincere core running through it.

Bringing the brand to life

Two problems jumped out, though. Firstly, the hands couldn’t simultaneously hold the coffee cup, form a heart, and be easily recognizable as hands without raising questions that would just distract customers. And secondly, I didn’t like the coffee cup. Although a to-go cup was more recognizable than a standard mug, especially when half-hidden behind the rest of the logo, it evoked a grab-and-go mentality that just didn’t fit The Whole Bean.

I scrapped the idea of a coffee mug on the logo, but not entirely – I knew that a standard coffee mug would be the perfect icon to represent the menu and invite customers to skip the to-go cup in favor of sitting down and savoring their drink. I based the icon on a heavy earthenware mug with soft curves, a mug that would radiate warmth and be a pleasure to wrap your hands around, and then reinforced that comforting image by coloring the mug with the warm golden yellow shade and a subtle saffron gradient to create depth, and filling it with a dark, rich coffee brown. I then used this same color scheme to create a coffee bag logo to represent the products and remind customers that they can also savor The Whole Bean’s coffee in their own homes. A saffron panel gave depth to the yellow bag, and a brown label completed both the color scheme and the icon.

Returning to the logo, I sketched a few new designs, lingering on the idea of using a French press to evoke truly excellent coffee or a parrot to connect The Whole Bean more clearly with the rainforests where coffee grows, but neither quite fit a brand rooted in the community whose store concept specifically referenced drip coffee. In the end, the most authentic and sincere image to represent the whole of The Whole Bean’s brand was the simplest – a coffee bean. Keeping it simple leant the logo a down-to-earth feel and said that the reputation of The Whole Bean could and would stand on the quality of its coffee. Placing the coffee bean into the lower counter of the letter B in the brand’s main font and bright yellow color reinforced the brand’s warm, open personality and created an instantly recognizable logo. It also opened the door for a series of logos: I placed the simple B logo within the context of “The Whole Bean” to create a longer logo that would increase brand recognition with newer customers, and then created saffron and yellow-green versions of both logos, allow for some limited variation within the brand’s style.

The original yellow logo would be prioritized in branding, however, and it was a perfect social media icon, drawing the eye and immediately identifying the brand and its focus on coffee at a glance. I selected the straightforward display name and username of “The Whole Bean” and “TheWholeBean”, respectively, to allow for easy identification between the shop and the social media account. For the social media headers, I selected images from the photography collection that carried a sense of motion and life in them, images that would pull the viewer in and make them feel like they could be a part of the scene, if only they were at The Whole Bean.

Redesigning for accessibility

The project deliverables were ready to be shipped, but I knew that there was still one thing left that would hold The Whole Bean back from becoming everything it could be. If The Whole Bean was all about welcoming people into its warm, inviting heart, were they welcoming everyone, or were some people getting left out? I’d mentioned in the style guide that branding images should include people of all genders, races, and abilities, but I knew that those were empty sentiments if the branding itself excluded disabled people. It was clear: I had to pause shipping the deliverables to assess their accessibility and address any issues that I found.

Looking at the patterns, my biggest concerns were that the medium green I had used for the style guide’s text and the yellow, orange, and light green I’d used for the logos and icons were all too light to be legible against the white backgrounds. I selected a darker shade of the medium green that had sufficient contrast against the white background and replaced all medium green text with the new shade, and then added the dark green to the color scheme as an accent color. I also added a thin black border around each of the swatches in the color scheme, to increase the lighter colors’ visibility against the white background.

To address the contrast issues in the logos and icons, I added a thin brown border to them; because the yellow, orange, light green, and white all had sufficient contrast with brown, the outlining provided the contrast necessary to place the inaccessible colors next to each other without sacrificing legibility or understanding. I then added the same outlining to the main brand font examples in the typography examples and the logos in the social media headers, and added a small brown bar behind the logo in the social media header images to reduce business and improve legibility and recognition.

Finally, I updated the brand guidance to codify the changes I had made and assist the client and all future users in maintaining the same level of accessibility. I curated lists of acceptable text and logo colors for each background color, allowing only combinations that were AA compliant at all text sizes. This would make it easy for all users to create consistent and accessible branding, and would reduce the risk of confusion over what fonts were big or bold enough to allow a lower-contrast color pairing. I also created examples of logos that, due to their background, were both inaccessible and hideous, in order to help users see why the brand guidance should be followed. Then, after proofreading and generating a final set of files, the deliverables were shipped to Karla and the project was complete.

---

Project conclusions

Challenges

I noted two major challenges during the design process. Firstly, while designing the logo, some of my original concept sketches failed to fully connect with key aspects of the brand’s personality, such as a to-go cup and a French press to represent a sit-and-savor brand that features drip coffee. My original sketch also featured a physically impossible floating coffee cup, which would’ve created more questions than customers. I realized I was so focused on the concept of the logo that I was failing to truly root it in the brand. Once I took a step back and designed from the brand up instead of from the logo down, the result was both a better representation of the brand and a far more evocative logo.

Secondly, the process of converting The Whole Bean to an accessible brand was rife with challenges. It was certainly possible to break down the accessibility challenges and address them both individually and holistically, but most of those challenges could’ve been avoided by assessing and addressing accessibility issues from the beginning of the design process. However, not all brands choose to prioritize accessibility when they’re just starting out, and it’s wonderful to see just how possible accessibility updates are.

Conclusion

The style guide and associated components were delivered to the client before the requested deadline. This allowed her to create everything she needed to establish The Whole Bean within her community before the launch, from signs and menus for the shop itself to social media accounts and advertisements that raised awareness and interest. Throughout the process, the style guide provided guidance for and cohesion to everything she created, supporting and reinforcing the branding and the brand through a successful launch and for years to come.

Take a closer look

Yolanda Lopez, the owner of the ethical and sustainable chair company Sit Conmigo, was looking for a new website in preparation for the launch of her new chair collection, in order to promote interest in and allow customers to pre-order the collection.

Yolanda’s Goals and Priorities

• Attract aligned clients by showcasing her sustainable, ethical, and fair trade and fair labor practices in her branding
• Promote interest in her new chair collection and encourage customers to pre-order
• Encourage mobile browsing with a responsive web design

---

The Process

Branding

Yolanda is passionate about her impact on the world around her, which inspired her to prioritize sustainable, ethical production and the positive impact it has on both the planet and the people who work for her. Understandably, she wants this to shine through in her website – it’s a major selling point for her chairs that easily justifies the increased cost over similar chairs produced less sustainably or ethically.

Yolanda had provided a logo, so I echoed its clean, smooth lines in selecting the sans-serif font Montserrat for the body text. Its consistent line thickness, kerning, and spacing would bring a note of dependability to the design. I paired it with the serif font Yeseva One for headers and branding – the mix of chunky and thinner strokes within letters and occasional small flourishes reinforce the dependability of Montserrat. The final font pairing is steady and reliable, leaning on tradition but unafraid to take a bold step in the right direction, and perfectly encapsulates Sit Conmigo.

Wireframe creation

I prioritized large images and minimal text in the Pre-order section, hiding further details and the price behind a link, in order to keep the focus on the designs. This also forces the customer to make a small commitment – clicking on the button – to learn more, which reduces the commitment of preordering the chair and thus smooths the way for a sale. I then closed the design with a minimalistic Contact section that provides necessary information while keeping the customer’s focus on the chairs themselves.

Design comps

To create digital wireframes, I imported the pen-and-paper wireframes into Adobe XD and created a low-fidelity version of each sketch.

I then added the design elements to the page, starting with the mobile design. Adding the images immediately revealed an unexpected issue that forced me to reconsider my approach – when I’d generated the placeholders for the images, I hadn’t taken into account the images themselves. The most restrictive image was tall and narrow with a white chair covering the entire width of the image, so I resized the placeholders around this image’s proportions to ensure that all images would fit seamlessly into the slideshow.

Once the mobile design was complete, I duplicated it to create the tablet and desktop designs, to ensure consistency and a smooth transition between the page sizes. Finally, I reviewed the design for look and feel, accessibility, and accordance with the brief, and then sent the final design to Yolanda for her review and approval.

---

Project conclusions

Challenges

Because I based the image placeholders on what looked good and fit with the design, not on the images themselves, the placeholders didn’t show off the images’ subjects as well as they could or should. I solved the problem by leaving behind the original placeholder proportions and developing new proportions that showed off the most restrictive images’ subjects. In the future, the best solution is to determine the best image proportions before creating the digital wireframe, but that requires having the images early in the design process; if the images are not available at that stage or if they change during the design process, the technique I used allows for an existing design to be modified to fit the new images with minimal delay.

Conclusion

The website design brought the client’s brand to life, showing off her chairs to their advantage and enticing site visitors to preorder. The client was very happy with the design, feeling that it met all of her needs, and she passed the design on to her developer so she could start sharing her chairs with the world.

Take a closer look

---