My UX students often ask how I built my portfolio on Medium. Having a UX portfolio worked wonders for me during the interviewing process. I had multiple interviews that all stemmed from employers finding my case studies on Medium.
I thought it would be advantageous to create a comprehensive guide to share how I built mine.
With so many website building tools clamouring for our attention, like Wix, Squarespace, Wordpress and others, it’s tough to decide which one to use. I personally like the way Medium takes care of the formatting for me and I can simply focus on writing my UX case studies.
In this guide, we’ll create a basic portfolio for one of my side projects called, “One Happy Dad”.
This guide works best if you follow along on a desktop browser.
I. Getting Started
(Skip to step II if you’ve already created a Medium account.)
The first step is pretty obvious — you need an account. So, if you haven’t already, sign up with an email address or Facebook account that you’d like to use for your portfolio.
Once you’re signed up, Medium will invite you to “Dive In” and choose the reading topics that interest you.
Select at least three topics and you’ll be able to proceed. In this example, I chose Art, Psychology, and Digital Design.
Medium will then go through and curate your logged in experience, tailored to your interests, and present you with a personalized Medium.com home page.
** Note: This is not your portfolio, but your customized landing page for Medium based on the reading topics you chose.
It should look something like this:
Once your account is at this point, you’re now ready to start building your portfolio.
II. But First, Let’s Look at Your Profile
Whether you’re an existing Medium user or you’re just setting up an account, it’s never a bad idea to enhance your profile for your readers.
Click on your profile avatar image at the top right, click “Profile”, then on the next screen, click “Edit Profile”.
The “Edit Profile” button is usually right next to your name, like this:
Medium allows you to customize your profile in three areas here: Your name, a short bio about yourself, and an avatar image.
I recommend your avatar image be a clear profile picture of you, at a minimum size of 60 x 60px.
For mine, I’ll keep my name as, “Mike Curtis”, write a short bio, and upload a new profile picture.
III. Creating Your First Publication
Great! You have an account, your profile is looking fantastic… now it’s time to create your first publication!
Your publication is what we’ll refer to as your portfolio. In this guide, the terms publication & portfolio are used interchangeably.
Within this publication, you’ll post your creative work, your UX case studies, and anything else you deem necessary to show off your skills as a designer.
To create your first publication, from the top right, click on your avatar image and click “Publications”.
Then click, “New Publication”.
IV. Your Publication Details (Step 1 of 2)
Don’t let this section overwhelm you. You’ll notice the “Step 1 of 2” at the top right of the screen.
Let’s break step 1 down into digestible chunks:
Think about how you want to be found when you’re looking for a job. Are you using your personal name? Are you branding yourself with another name for you or your company?
Take note of the link Medium assigns you here. This will be the URL you give people to look at your portfolio, so just make sure it’s not too confusing or hard to explain to someone. The name, “One Happy Dad”, gives me the link medium.com/one-happy-dad, which is pretty easy to remember.
Write out a short description so people can get a sense of what this publication/portfolio is all about. What makes you unique? Why should someone view your portfolio?
This is an avatar image, similar to your profile image, but specific to your publication. Do you have a logo for yourself or your brand? Upload it here. Once again, Medium recommends a minimum 60 x 60px image here.
This isn’t required, but highly recommended, as it helps to further establish you and your brand as a UX Designer. It appears at the top of all the case studies & stories you write in this publication, so it helps build familiarity as readers begin to recognize your logo.
Medium recommends a transparent background image that is at least 600 x 72px tall.
V. Social, Tags & People (Step 1 of 2 Continued)
On this same page, there’s another section for Social, Tags & People. Let’s make sense of what this section is asking.
While this information isn’t required, it’s helpful to more easily share your case studies across the internet. Enter a valid email address, Twitter handle, and Facebook URL if desired. These links will be publicly available on your publication home page (just make sure you’re okay with that!)
You can have up to 5 tags for your publication. Consider words or short phrases that will allow for people to discover you and your publication. Words or phrases like, “UX”, “UX Design”, “User Experience” and others are perfect here.
This section has two parts, Editors and Writers.
- Editors: Editors may not be available for you to fill in right away, and that’s okay. For now, Medium will simply default to you being the primary editor of the publication. You can change this later after you’ve published your publication. Editors can review submissions, add stories, edit and publish submitted drafts, and remove any stories from the publication.
- Writers: Writers can submit their stories and remove them from the publication. If you want to add someone other than yourself and give them these privileges, here’s where you would do that.
Once you’ve filled in the information on this screen, you can click, “Next” to proceed to step 2 of 2 — your homepage layout.
VI. Homepage Layout (Step 2 of 2)
This is where your publication comes to life and takes on the shape, form, and the personalized character that only you can provide it.
There’s a lot to do here, so let’s jump in and make sense of all the sections.
Here you have three options for how your publication’s hero section is displayed. The “hero” is a term in web design, often referred to as the top banner section that readers will come across first on any given page. You can choose between a Small, Medium, or Large hero layout.
- Small: Only displays the name of your publication; no hero
- Medium: Allows for your background image to show (if you add one) and adds an optional tagline section under the name of your publication; keep your tagline short, sweet, and to the point
- Large: Your publication name and tagline are still visible, but the background image becomes noticeably larger
Here you’ll be able to choose how the title of your publication displays.
- Title: This is a text-only title of your publication with the optional tagline (if you picked Medium or Large in the Size section)
- Logo: Uses a logo only
- Both: Uses both your title (including tagline) and your logo
Alignment refers to the alignment of your title & logo.
- Left Aligned: Logo, title and optional tagline are all left justified on the publication
- Center Aligned: Logo, title and optional tagline are all center justified on the publication
If you’d like to add a bit more pizazz to your publication, you can accent it with some color. You’ll need to give it a 6-digit hex value for the color. If you click on the word, “color”, you should see this dialog window open:
- Subtle: Adding a subtle accent will fill the background of your Publication Logo (see part IV above) with the color you choose here. You may need to make sure your Publication Logo has a transparent background if that’s the look you’re going for
- Bold: Adding a bold accent does the same as above, and also adds a couple of bold, colored banners under the hero image and at the bottom of your publication; this is especially useful for establishing brand colors
*** Note: you may not see the immediate effects of the color option until you publish your publication.
Add Background Image
If you click on “Add Background Image”, Medium will allow you to browse for an image and upload it. Once it uploads, click on “Background Image” and you’ll be able to select the focus of your image. Drag the mouse around the image to see how the position of the image affects your other elements, like title, tagline, and logo.
Whew… that was a lot! Here’s where my publication is up to this point.
Take some time to mess around here, have fun, and get it looking the way you want.
Take note of the contrast between the background image and your title/tagline text. Is it legible?
VII. Homepage Layout (Step 2 of 2 Continued)
Continuing on this screen, you now need to set up the way your stories are organized and displayed for your readers. Let’s look at each section.
Medium uses “sections” to organize your content and lets you decide how and what should be displayed in each one. You can have multiple sections, all with different layout settings. Pretty cool.
Sections can be added by using the “+” button.
Sections can be given a title by clicking on “Section title…” located at the top left of the section.
By default, Medium displays your “Latest stories”. However, you have the option here to change that. Click on “Latest stories” and you should see this menu:
You can choose to display trending, featured, stories that contain specific tags, or a promo section. You can use the “ + and - ” buttons to tell Medium how many stories to display that meet the criteria. Medium allows up to 25 per section.
In the example above, we’re telling Medium to display no more than 7 of our “Latest stories” in this section.
Here’s how each option affects your publication:
- Latest stories: Displays your stories in chronological order, newest at the top and older ones at the end of the section
- Trending stories: If you’re just starting a new publication, you likely don’t have any case studies to display; once you do, you can choose this option to have Medium look at the analytics of your stories, see which ones are trending, and display them to your readers. This is a great opportunity to showcase your case studies that are getting the most response from the design community!
- Featured stories: Lets you pick which story/article/case study to feature
- Stories in a tag: Allows you display stories that contain specific tags; this is very powerful for a UX portfolio. If you write your case studies and tag them with the “UX” tag, you can then specify that tag here and Medium will only show stories with the “UX” tag
The Promo Section
If you choose a “promo” section for your portfolio, you have the ability to link your readers to just about anything.
You can toggle elements like the title & image on and off, set the URL when someone clicks on the promo, add a background color, add a background image, and more.
The possibilities are endless here!
Grid, Stream, List or Mixed
These options determine the visual layout of your stories. Click around between them and choose the one you prefer.
The Style for Displaying Story Info
You can choose to have the title for your stories/case studies below the main story image, or the title can reside inside, nested in the image. Choose the one you prefer.
Story margins refer to the margins between each of your stories in relation to the others you’ve published. In other words, how close they are to each other.
You can choose between stories that have white padding around them, or no padding at all. Choose the one you prefer.
This is a simple on/off switch for the title of your story. You can choose to show a title or turn it off. In a UX portfolio, I highly recommend leaving this on. You may find as you continue to build your publication however, that you have a good reason to turn this off.
This deletes the section, not the publication. Medium will prompt you to confirm you want to delete the section. Once you’ve decided to delete the section, you can’t undo, so take caution.
Create Your First Publication!
Once you have things the way you like, don’t forget to “Create” your publication! You’ll find this button down at the bottom right of the page.
VIII. Take a Breather
You created your first publication!
Take a moment to look around at what you’ve created. With a few more settings, you’ll be well on your way to an amazing portfolio.
Here’s where we’re at thus far:
As you can see, this publication doesn’t have any stories yet. That’s okay, we still have a couple of things to do in order for this publication to really be ready.
IX. Add Navigation
Medium has another powerful feature which allows you to add a navigation bar for your readers. It shows up just below your hero image and under your Publication Logo.
There are many options here, but I’ll simplify them as best I can.
To set up navigation on your publication, click on your Publication Avatar, then click, “Navigation”.
You can then start creating your navigation and adding tabs.
The name you give it here is how it will display to readers in your navigation bar
Lots of goodies in here for defining what you want this tab to contain.
You can add a tab:
- with many stories (feature page)
- with many stories (using tags)
- with one story
- with all archived stories
- about the publication
This column changes depending on what you select for Tab Name and Tab Type. For instance, if you set the Tab Name to “My Best UX Case Study”, set the Tab Type to a tab with one story, the Contents column will ask you to choose which story should be used.
Add a Tab Linking to a Different Site
Want a link to your LinkedIn profile? Want to promote your personal “.com” website? This is where you can do that.
Once you’ve got it the way you like it, hit “Save”. You’ll find yourself coming back to this area to make minor tweaks as your portfolio evolves over time.
I added four links to my publication; here’s how they’re displayed:
X. Get Writing!
Remember, this is just the base, the foundation, and the home for all your case studies. You still need to get writing and add some case studies to this publication!
Give yourself a pat on the back! Be proud of what you’ve built and smile when you send out portfolio links to Medium with your job applications!
In a future Medium article, I will walk you through the creation of a UX case study on Medium and best practices when doing so. Stay tuned.
It’s only through your flair, your style, and your personality that your new UX portfolio will come to life.
If you’re feeling adventurous, look into “Feature pages”. Feature pages take things up a notch and allow you to build out a complete website for your publication/portfolio. You’re creating custom landing pages for your publication. It’s powerful!
Give a Clap or Two and Share Your Portfolio Link
👏👏👏 Like what you read? Was this helpful in some way? Could I have improved it or changed anything to make it a more useful read? Please let me know.
Lastly, I’d love it if you would post a link to your Medium portfolio in the comments so we can all see the amazing work you’re doing in UX!