UXing My Portfolio: Design + Framer Development

Racheal James

Web Designer
Framer Developer
Framer Designer
Figma
Framer
Project Overview: As a Product Designer, I embarked on the journey of creating my portfolio to showcase skills, projects, and design philosophy. Framer was chosen as the platform for its flexibility and ease of use.

Identifying My Audience

When creating my portfolio, I knew that different audiences would be exploring my work, each with distinct goals and interests. My audience includes recruiters, design founders, agencies, and fellow designers, so I structured my portfolio to help each type of visitor quickly find the information most relevant to them.
To achieve this, I created dedicated navigation tabs at the top of the page labeled: For Anyone, Agencies, Recruiters, Founders, and Designers.
These tabs guide users to sections best suited for their needs, showcasing work and information tailored to their unique perspectives. By prioritizing audience-specific navigation, I aim to make each visitor’s experience more efficient and engaging, ensuring they can access content that resonates with their interests.

Defining User Goals

Using the insights gathered from my research, I outlined the unique goals of each type of visitor to ensure my portfolio meets their expectations.
For recruiters, the main goal is to get a clear sense of my skills, experience, and design approach. They’re especially interested in my design process and case studies, as these provide insight into how I tackle challenges and deliver solutions.
For founders, their focus is often on my ability to design user-centered products that align with business goals. They’re likely interested in seeing how my work can contribute to a bigger vision, so I highlight projects where my designs helped solve real-world problems or added value to the user experience.
Agencies are generally more results-oriented. They want to see the visual impact and final outcomes of my projects to gauge my style and ability to deliver polished designs. To keep things efficient, I tailored this section to focus more on project visuals and outcomes rather than extensive documentation.
Finally, fellow designers may visit my portfolio looking for inspiration or insights into my workflow. For them, I include sections on my design philosophy, detailed case studies, and insights into my process to encourage a meaningful exchange of ideas and techniques.
By understanding these distinct goals, I crafted a portfolio that speaks directly to each type of visitor, allowing them to find what they’re looking for quickly and easily.

Simplifying Navigation

With web users, especially those reviewing extensive portfolios, I know that scrolling through a long design process can feel like a marathon.
To make the experience seamless and efficient, I implemented a fixed side navigation for projects with lengthy documentation. This allows visitors to jump straight to the sections that interest them, saving time and offering a more intuitive journey.
To make navigation even more engaging, I took a storytelling approach to the labels, giving each section a conversational twist. For instance, instead of the standard “Introduction,” I went with “Where It All Began.” The “Problem” became “Okay…So What’s the Problem?” and “Goal” turned into “But Here’s My Plan.”
These personalized labels bring a bit of personality to the documentation, making the process feel more like a story than a formal report.
Check out my portfolio👇
Outcome:
The completed UX portfolio on Framer successfully stood out in showcasing my design journey, skills, and projects.
Thoughtful design decisions addressed challenges, resulting in a visually cohesive and user-friendly representation of my work.
I received comments like "It isn't the regular portfolio you see everyday" and "It's a site well thought through"
Partner With Racheal
View Services

More Projects by Racheal