Designing an AI Co-Pilot plugin for portfolio building

User Pain Point: Crafting a compelling design portfolio is challenging, from starting with a blank page to articulating design processes and outcomes. The main hurdles include overcoming initial inertia and lacking a seamless process for subsequent iterations.

Solution: An AI-driven portfolio co-pilot that aids designers in swiftly generating draft content, suggesting creative ways to communicate their work, and iterating on their portfolio.

The Outcome

This project was sponsored by Ownpath to innovate the portfolio creation experience by bringing a solution which will empower designers to craft and refine their portfolios efficiently, unlocking their potential to secure desired career opportunities.

We were given comprehensive research conducted by Ownpath, and our task was to develop an appropriate solution. After interviewing key stakeholders at Ownpath, we learned that they were open to any solution as long as it effectively addressed the key pain points of its users in an intuitive and convenient manner.

Team

2 UX Designers

1 Design Manager

Tools

Figma, Discord, Zoom
Notion

Role

Ideation,
Interaction design,
UI design and Testing.

Timeline

5 weeks

Target Audience

Primary: Designers at all career stages, from students and entry-level professionals to experienced designers looking to pivot or refresh their portfolios.

Secondary: Design mentors and educators seeking innovative tools to assist their students or mentees in portfolio development.

In this case study, we will focus on the user journey of the primary audience, their user goals, pain points, and how the solution will address those.

Current User Journey: How do designers go about creating their portfolio now?

Prepare case studies for few of the design projects done.

Time-consuming process of gathering and organizing project details and visuals.

Difficulty in selecting which design projects to showcase.

Ensuring the case studies effectively demonstrate skills and expertise.

Research on the web for possible inspirations from existing portfolios.

Time-consuming process of gathering and organizing project details and visuals.

Difficulty in selecting which design projects to showcase.

Ensuring the case studies effectively demonstrate skills and expertise.

Visualize an idea and draw/create a rough draft of the desired portfolio.

Time-consuming process of gathering and organizing project details and visuals.

Difficulty in selecting which design projects to showcase.

Ensuring the case studies effectively demonstrate skills and expertise.

Decide on an appropriate platform like Framer, Webflow, Wix, e.t.c, and learn the same if not already learned.

Manually build the website from scratch.

Time-consuming process of gathering and organizing project details and visuals.

Difficulty in selecting which design projects to showcase.

Ensuring the case studies effectively demonstrate skills and expertise.

Time-consuming process of gathering and organizing project details and visuals.

Difficulty in selecting which design projects to showcase.

Ensuring the case studies effectively demonstrate skills and expertise.

Iterate and re-iterate on feedback from mentors, changing design trends, or when applying for a particular industry.

Time-consuming process of gathering and organizing project details and visuals.

Difficulty in selecting which design projects to showcase.

Ensuring the case studies effectively demonstrate skills and expertise.

Key challenges within the problem space

Overcoming Initial Inertia: Providing a jumpstart to the portfolio creation process with guided content generation.

Enhancing Communication: Helping designers articulate their design thinking, processes, and the impact of their work effectively, and avoid common mistakes designers make with portfolios.

Balancing Content: Ensuring a harmonious blend of textual explanation and visual demonstration.

Streamlining Iteration: Facilitating a seamless process for refining and iterating on portfolio content.

Ideation and core features

After a lot of brainstorming, we initially decided to design an independent web-based AI platform/tool that will have the ability to draft a portfolio based on user prompts. We concluded on a few core features and functionalities that should help the user and those were:

AI-Driven Draft Generation which assists designers in creating concise, impactful content drafts based on project prompts.

Creative Communication Exploration with AI suggesting innovative presentation methods for design work, integrating visual storytelling and interactive elements.

Interactive Review and Iteration with an AI co-pilot offering real-time feedback, aiding designers in refining portfolios iteratively.

Outcome and Impact Highlighter where AI guides designers in emphasizing project outcomes effectively, suggesting compelling articulations.

We started giving shape to our ideas by crafting user-flows, sketching and trying out different interactions, and creating some wireframes for the features we had in mind

We were moving forward to design a High-fidelity design for our solution and while we were on a call discussing and critiquing our tool, we concluded that maybe there was a better way to provide our solution instead of how we were currently approaching it.

There are already a lot of popular tools that help create a website and we are not looking to bring another website builder. We want to help designers craft their portfolios with ease and solve the pain points associated with them. So how about we try and bring a solution that will be an add-on/plugin to an existing tool?

To test this hypothesis we went back to a quick research and talked to some 15 designers. The results proved our hypothesis right, 87% of the respondents will not bother learning a new tool and instead, they are much more comfortable using a plugin on their favorite tool. This research also helped us understand that Framer is the most preferred tool while creating a portfolio due to its ease of use and varied interactions

The solution

So we decided to go with designing a plugin for Framer and considering Framer is inviting developers to develop plugins also made sense. We re-iterated the user flows and the wireframes and made adjustments based on our new approach. Finally, we designed our solution as a plugin in Framer, and the core features are as follows.

AI analyses user prompts and asks questions to create a portfolio draft.
Allows the user to upload any existing case studies that the AI scans for possible improvements

Provides 4 different AI-generated choices based on user prompts.
Also, provide the option to regenerate provided choices.

Smart Select: Allows the user to select any text to rephrase it, change the tone of voice, or change the length of the text.
AI provides 3 choices to choose from as per the user's preferences.

AI Copilot can also generate images for you as per your prompt.
The user gets to choose from the images generated and place the image at the desired position in the web page

AI scan uploaded case studies for any misalignment, visual imbalances and design flaws and suggest better alternatives.
The user has the option to review and accept every suggestion independently or accept all by clicking the 'Red' indicator below.

We are at the stage where we are rigorously testing the tool to ensure its reliability and effectiveness. During this phase, we are making several iterations, specifically addressing minor UI elements and interaction patterns. These improvements are crucial for refining the user experience and ensuring that the tool is intuitive and user-friendly.