Marketing Portfolio Website
Project Overview
The product:
A website for a marketing professional and writer who wants to showcase her work in an online portfolio for professional and personal purposes.
Target Audience:
Prospective partners, collaborators, and employers within the Health and Wellness Industry.
Project duration:
From Feb. 7th, 2022 - Mar. 3rd, 2022
The problem:
A talented marketing professional and writer with no place to showcase her work. Prospective career opportunities won’t take her seriously without an online portfolio.
The goal:
Create a website that beautifully showcases her work and allows her to post new content on a regular basis.
My role:
UX researcher, UX & UI Designer, Graphic Designer
Responsibilities:
-collaborate with the client
-Research ‘competition’ in the field
-Design wireframes
-Design logo
-create website based on the wireframes -publish and host the website for the client
User Research
Summary:
Working with the client, we focused on creating a user persona and journey map to feel through what a user should experience and how we can avoid pain points as well as design in accordance to the needs the user would be looking for.
To further understand the scope of the project, I did research on inspiring portfolios of marketing professionals and analyzed what worked well and what I could apply from that research towards my client’s website.
User Pain Points:
1. Structure:
Separating professional projects from passion projects.
2. Navigation:
How does a user try to find a previous article? Are there tags? Navigation bar? How do we organize it?
3. Very Text Heavy:
How to make text heavy content beautiful in design without being overwhelming.
Persona:
Problem statement:
Alexandra is hiring talent for a well-known brand and needs to be certain that the applicants she chooses will be the right fit.
User journey map:
I designed the user journey with the intention that the user would be left wanting more, encouraging them to reach out and start a conversation.
Starting the Designs
Paper wireframes:
Inspired by other lead portfolio examples, I tried a few different paper wireframes to explore how the final product should feel.
Working closely with the client, I decided on one that met all our needs.
Digital wireframes:
My goal was to stay as simple and elegant as possible. The idea being to keep really intuitive design that is clear and easy to navigate.
I decided on 3 key CTA buttons on the home screen linking to different aspects of the portfolio. This unique approach will help to organize content and build intrigue.
The background image was a placeholder while I settled on the layout. I wanted to have an image on the home screen as a way to stand out, be bold, and express the client’s brand.
For the ‘Work’, ‘Passion’, and ‘Play’ pages of the Portfolio section, it was important to use visuals to help identify, navigate and organize the wordy content.
While the ‘Work’ and ‘Passion’ pages have descriptions for each project, the challenge with the ‘Play’ page was to change the format while keeping the same feel.
Instead of having a case study for each photo, I opted for a description and process of the side skills before showcasing the work.
I decided to craft the About page with inspirations from other marketing professionals as well as with influences from newspaper articles; with a headline, body, and large photo to the top left.
High-Fidelity prototype:
With the high fidelity prototype, I got a clear picture of the colours, images and text that would be used.
I Decided to use interface elements that were really simple and high contrast to enable the pictures to stand out and the text to catch attention.
Usability study :
After getting a handful of users to test the designs, including a couple of hiring managers, really helpful feedback was gathered. From this I adjusted and refined the prototypes.
Main findings:
Not clear what service is provided. The ‘Who and What can you help with’
The Home Page main CTA buttons can be misunderstood as a title
Photos and Graphic Gallery images couldn’t be enlarged in mobile
Refining the design
Finalizing the designs:
Usability studies revealed certain weaknesses of the design that had to be addressed.
For example, on mobile devices, the photography and graphic design sections had gallery images that were too small to appreciate.
To solve this, I created a lightbox popup so users could more easily see the images in the gallery.
Logo design:
As requested, I was to create a logo for the website and branding of the client. To start, I contemplated the brand needs and personality of the client. I felt that she would best be suited with a stylized “M”.
Playing with the concept of writing and the symbol of wings/feathers/flight, I settled on a curved quill to accent the sharp and delicate M.
As a fun touch, I included the suggestion of a letter D, a reference to the client’s last name.
Publishing the site:
After a few iterations and confirmation from the client, I launched the website and made it public.
Link to final product:
Going forward
Impact:
Since publishing the website, the client has applied for at least two marketing roles.
“...this project means SO much to me and has added SO much professional and personal value. I’ve been dreaming of having a website / blog since I was in high school!”
- the client
What I learned:
During this project, I learned a lot about working closely with clients to meet their needs as well as understanding the user and making usable interfaces.
It was also good to get more experience with usability studies and making websites in general. It’s something that I enjoyed but have only done a handful of times at this point.
Next steps:
