CLICKED CO.

I collaborated with a team of developers and designers to revamp Clicked’s (an online platform that creates accessbility to different career paths through lessons taught by certified coaches) website to promote community and a safe learning environment while being authentic with their brand. I designed and enhanced a website design through creating components and screens within their design system. Furthermore, I communicated with front-end engineers to implement and develop screens and flows. 

Disciplines
UI/UX Design, Product Design

Teammates
PM: Caelin Sutch
Designers: Nerissa Hsieh, me
Engineers: James Shin, Kimberley Fan, Neil Kamdar, Anjan Bharadwaj, Henry Chiu, Rachel Ng

Timeline
02/21 - 05/21

“How might we design a website that includes all the features of Clicked’s product and promotes an open and inclusive learning environment while staying authentic to the current brand of Clicked?”

With heavy communication between Jeff, the front end engineers, and the design team, my team designed multiple pages, flows, and components that accurately reflected the branding of Clicked and enhanced the open learning environment Clicked strives to create.

We started with laying out all the tasks of the project in Jira. We had a hefty task of designing a large majority of the site. By organizing the sprints, we were able to set goals for ourselves to accomplish throughout the project.

When designing, we started with the design system (majority accredited to Nerissa). Clicked already had some branding assets and components so we worked with what they currently had. Here, we laid out and consolidated the typography, color palette, icons, and core components (not featured). By laying the brand and the foundations of the site down, we were able to maintain cohesion throughout the project without many issues.

Due to our short timeline, we were provided with previous research and interviews conducted by the Clicked team. We used the insights from these interviews and research as the foundation of our design and consistently referred to them throughout our design process. This research is confidential so I will not be showcasing it.

Upon receiving each component or page to design, we first designed a low-fi of the page and sent it to Jeff and our project manager for review. The most important part of the project was ensuring there was intuitive design and cohesion throughout the site in both aesthetics and produced environment. Consistent communication with Jeff and Caelin and also constant review of our research insights allowed us to build a site that reflected Jeff’s vision and was tailored towards the needs of the coaches and students.

After receiving feedback, we continued onto designing the high-fis of each page/feature, adding in previously built components from our design system. We received feedback and had conversations about the pages as to whether or not a feature or design should be implemented or changed based on Jeff’s visions and the user research. After the conversations, we’d make changes. Since the base of the page/feature and the design system had already been approved by Jeff and Caelin, this would occur once or twice, giving each page approximately 2 iterations. Unfortunately the feedback has been lost in Slack however, the product of the iterations can be seen to the right.

When we completed our final iterations, we handed each feature/page off to the front end engineers. From there, we were in consistent communication with them as to whether some designs need to be changed for feasibility. Though sometimes the engineers wanted changes to make the development easier, we always came to a compromise that allowed both parties to be satisfied.

Working with Clicked was an incredibly fun and educational experience. I became well versed in design systems, client communication, and also working with a full stack team. Though we were tasked with the large feat of completing the website within one semester, I am proud of our progress and the hard work we put into this project. Given more time and resources, I would conduct some user testings on our final iterations. Due to the time constraints and the limits of the project scope, we were unable to access users directly, therefore being unable to test our designs. I would also prototype our final designs to simulate flows and allow for more realistic simulations within user testings.