Designer - Web | Graphics | UX/UI
Elizabeth Jung
Brand Identity and Website
Who is Elizabeth Jung?
Elizabeth Jung is a consulting professional with a background in political fundraising and advocacy.
Problem
Given that most work in the political landscape is relatively short-term, Elizabeth needs to constantly ensure her resume is up-to-date. She doesn’t feel like LinkedIn gives her the customization she’s craving. So, she wants to make a website version of her resume to ensure that she can be found by clients online, outside of social media.
How might we give Elizabeth’s career a digital presence outside of social media?
Solution
This project focused on client research to establish Elizabeth's brand identity, as well as develop a responsive website that acts as Elizabeth's resume and highlights her experience and personality.
Project Scope
-
Timeline: 3 months
-
Key takeaways and project recommendations, based on client research
-
Logo Design and Brand Identity Style Guide, with all necessary file types (SVG, EPS, PDF, PNG, JPEG, PSD)
-
Mobile-friendly & responsive website design with a high-fidelity, interactive prototype
My Role
-
UX design
-
UX research
-
UI design
-
Interview facilitator
-
Client contact
Tools
-
Adobe Photoshop
-
Adobe Illustrator
-
Figma
-
Google Forms
Design Thinking Process
A happy client makes a repeat client!
The design-thinking process I used focused on understanding the client's vision and her target audience's needs. This comprehensive approach led to a cohesive and impactful brand identity and website that stands out in the market.
Click the numbers below to jump to different steps in the process!
Empathize
Meet the Client, Be the Client.
How can we develop a brand identity that highlights the client's experience and personality?
Quantitative Data - Client Questionnaire
To gain insight into Elizabeth’s personal brand and how that should look and feel, I had her complete a Brand Identity Questionnaire that I created in Google Forms.
Below is a recap of the adjectives she used to describe herself, her style, and how she wanted her clients to feel.
Define
What are the key takeaways about the client and her goals?
Brand Personality Framework
After reviewing Elizabeth’s answers to the Brand Identity Questionnaire, I concluded that Elizabeth’s brand personality fit into the ‘Competence’ framework. This would be the guidepost throughout the design process.
.jpg)
Website Goals
In the questionnaire, I also asked what her goals and must-haves are for her website. When designing the wireframe of her site, I will keep these items at the forefront:
Proposed Brand Identity Design
Color Palette
Elizabeth’s brand style will focus on blue tones, per her direction. Since she wants the client to feel ‘calm’ on her site, the blue will play nicely into that. I decided to use a monochromatic color palette, ranging from a dark, serious navy blue to a lighter, more feminine dusty blue.
Fonts & Logo
For the fonts and logo, I wanted to use the juxtaposition of a serious, strong, serif font with a feminine, beautiful script font to showcase her ‘touch of shine’.
Icons
Icons for the site will play to Elizabeth’s adjectives of simplicity and sophistication, with thin lines and a simplistic, straightforward design.
Brand Style Guide
Below is the brand style guide created:
Ideate
Get the creative and
problem-solving juices flowing.
After the brand identity was completed, it was time to move on to website design.
Website Look - Wireframes
I started with wireframes created in Figma. Since the site will be responsive, I created wireframes for mobile, tablet, and desktop.
A one-page design was chosen since Elizabeth wanted to start with something simple and easy to maintain. The answers she provided for ‘Website Goals’ and ‘Must-Haves’ dictated the sections and layout of the site.
Desktop
Scroll the device to view more!
Tablet
Scroll the device to view more!
Mobile
Scroll the device to view more!
Website Look - High-Fidelity Mock-ups
I designed accent elements in Photoshop and Illustrator. In Figma, I created high-fidelity mockups to bring the design to life.
Desktop
Tablet
Mobile
Prototype
Bring it to life!
Prototype
Using Figma, I built an interactive prototype.
Click the button below to view Elizabeth Jung's desktop website prototype.
Test
The data doesn't lie.
Usability Testing
After the prototype was constructed, I conducted a usability test with 3 users. The format was a one-on-one, in-person interview where I acted as moderator. I introduced the users to the Elizabeth Jung desktop site and assigned them a few tasks.
The purpose of the questions and tasks I assigned were related to Elizabeth's main goals for the site.
Usability Testing Success Rate
66%
Item #1:
View Bio
2 out of 3 users found the “About" section with no problem.
One user struggled. After scrolling the entire page, they scrolled back to the navigation bar to find it.
They commented that the word “welcome” at the top of the About section threw them off and that their eye was drawn to that word first, instead of the phrase “About Beth”.
100%
Item #2:
View Past
Work Experience
100% of users found the “Experience" section right away.
2 out of 3 found it by scrolling down the page, while the other user found it by going to the navigation menu.
100%
Item #3:
Download Resume
When given the task to download her resume, 100% of users were successful.
100%
Item #4:
Send an Email
100% of users successfully found Elizabeth’s email address in the “Contact" section.
Next Steps
Based on the usability test feedback, the site's functionality is very successful! From user and client feedback, I made two, small changes:
Updated Prototype
Click the button below to view Elizabeth Jung's updated website prototype v.2.
Scroll the device to view more!
Lessons Learned
Takeaways
One of the most significant lessons learned from working on this project was the importance of dedicating time to thoroughly understand the client before beginning the design process.
Engaging in comprehensive client research at the outset was crucial for grasping the nuances of Elizabeth’s career. This groundwork enabled me to create a brand identity and logo that genuinely reflected her professional journey and aspirations. By investing time in this foundational phase, I ensured that the design and functionality of the responsive resume website were perfectly aligned with Elizabeth's need for customization and frequent updates.
This approach also facilitated more effective and efficient usability testing, as I was able to anticipate and address potential pain points early on.
