Menu
Designed student's experience in sharing their works for feedback, creating portfolios, and finding entry-level jobs. Developed UI and prototype using consistent and predictable interface elements for efficient workflows.
School Project
UI/UX Prototype
Branding & UX/UI
Online learning has shifted the way students access and find information. For art and design students, we face challenges in receiving critiques for our work-in-progress. The unlimited resources for portfolio hosting, job hunting, and design challenges sound fascinating but also draw time and effort away from study and family.
Creative students need a platform tailored to them—where they can exchange ideas, showcase their works, find entry-level jobs, and participate in design challenges to get exposure—all in one place. Capsule was developed to serve as this platform. Within the scope of this project, we focus on building the bone and prototype of three main task flows on desktop. My responsibility is task flow number one:
Our team discussed and developed a hypothesis on the possible pain points based on our experience as students. The hypothesis was verified using Guerrilla testing. The participants were graphic design students at Mission College.
Here were some key takeaways:
We also carried out the competitive analysis using heuristic evaluation. As I'm responsible for tackle pain point number 2 above, to improve the portfolio creation task flow, I extended my research to platforms that involve visual creation.
Link to the competitive analysis
We worked together to decide the importance of each feature to prioritize our focus and the scope of this project, using the card sorting and prioritizing process. The prototypes developed covers 50% of our listed features. To collaborate virtually, we combine Zoom and Mural.co.
With a clear picture of the problem to be solved, for whom, and by what functions, we started defining the structure of our platform. I put together the table of features and specifications by pages so that everyone on the team can refer back while developing wireframes and prototypes. The table would come in handy when I work with cross-function teams like development, product management. Together with this descriptive table, I also designed a sitemap to present the connection between pages.
Imagining how Beth would navigate and use our platform to complete her task of creating a new project helped me to define the call-to-action(s) needed on each page. This user flow was discussed among our team and adjusted to be logical and efficient.
On the profile page, I decided each project should have one large thumbnail and three supporting images. It allows Beth to visually categorize her project (UX, Illustration, page layout, etc.) if she wishes. On the whiteboard, I applied the convention of design application for Beth’s ease of use, with the toolbar on the left side and the properties menu on the top. Each item was planned carefully at this stage for a quick test before prototyping on software.
Energetic, hopeful, and minimal are the platform’s characteristics we decided on. Our users should feel encouraged to use the site to display their work and connect with potential opportunities.
The folder and the inner shadow of the letter C suggest the meaning of portfolio, where we curate and store our projects through time. The gradient blue brings out the energetic and hopeful vibe. A sans-serif typeface with a large x-height is simple, welcoming, and modern.
To encourage Beth and students like her to enrich their portfolio, the CTA button can be found at the global navigation, homepage, and profile page.
This working space is designed to be user-friendly with creative students even if they are unfamiliar with website design and development. The toolbar and properties bar are located at the conventional placement in most design software or platforms. The whiteboard and drag-and-drop actions allow users to visually adjust the layout. The ability to upload several thumbnails and add tag(s) comes in handy in categorizing and optimizing the project for search results.
Each profile is strengthened with an option to ask for endorsement and show more sneak peek into the projects with thumbnails. The endorsement will help the potential employers to access student’s performance in a social context. The button “Edit your profile” will be replaced with “Hire me” in the public view for the ease of recruiters contacting students. This function increases student’s opportunity to score a job.
Detailed interactions were designed to give users the closest experience possible to the final product. It enables the design and development team to gain more in-depth user feedback in the testing phase and enhance user’s satisfaction on the first product launch.
Images and mockups used in this project: unsplash.com, pexels.com, graphberry.com, freepik.com
