thumbnail showing Smash website description and mockups

Role

UX designer

UX team co-lead

Project Info

Internship project

UX team of 3

Duration

June - September 2023

(4 months)

Tools Used

Figma

Figjam


COMPANY CONTEXT

What is Smash and how is it breaking down barriers to tech? 

While tech is one of the hottest career pathways, most major tech companies require applicants to have at least a 4-year degree in a relevant discipline to be considered, let alone deemed as competitive. However, there exist socio-economic barriers to breaking into tech, such as the high cost of tuition and switching careers.

Smash is an early-stage Seattle-based startup with the mission of helping underrepresented learners with nontraditional educational backgrounds acquire in-demand tech skills, thereby bridging the diversity gap in tech. 

Smash addresses this problem by partnering with educators (i.e., professors) and tech companies to provide learners with the opportunity to view educational content and gain real-world experience by participating in company-sponsored projects. As a result, learners gain hands-on skills and career development opportunities while companies gain access to a large, diverse, talent pipeline. 

smash logo

PROJECT CONTEXT

My responsibilities as a UX design intern

project timeline

The Smash website was partially designed and developed by a University of Washington capstone team, who handed it off to our summer intern team in June 2023 to launch the MVP in Fall 2023

There are three total user flows: learners, companies, and educators. My role as a UX design intern was to design the end-to-end learner flow from signing up to registering for company-sponsored projects. Additionally, I also designed informational (static) pages for all user groups describing the benefits of partnering with Smash. 

We worked in 2-week agile sprints where I facilitated communication with the developers and founders as the design team co-lead


ORIGINAL SOLUTION

The previous solution

The original website allows learners to explore case studies and company-sponsored projects, monitor their progress with a dashboard, and complete surveys upon each login to create a curated resume and help Smash learn more about the user. When users complete tasks and projects, points are added to their Smash index, a score that is used to determine their eligibility for company-sponsored projects. 


STAKEHOLDER INTERVIEWS + FEEDBACK

Setting a direction for the redesign of the website

To better understand the previous solution and identify areas of improvement, I interviewed 4 stakeholders—the CEO, Business Development Officer, Chief Marketing Officer, and Chief Financial Officer—to understand their needs for the redesign. The interview questions were aimed at understanding ways to achieve success and future evolution.

In addition to conducting interviews, we also sought feedback from the stakeholders during rounds of iteration. Here is what we found:

Below is an affinity map, which synthesizes the stakeholders’ pillars for the website: relevant, simple, engaging, and supportive. 


JOURNEY MAP

Understanding the most important user funnel: the learners

Before starting the redesign, I sat down with the stakeholders to understand the three user flows, especially the learner flow—my main focus.

Here are my key takeaways:

  • Learners are expected to complete their Smash journey and be ready to apply their skills for employment after a 12-month timeline. 

  • Static pages must be simple and have engaging content (e.g., testimonials, dynamic content) to get learners to register.

  • To maximize retention, learners should be able to take engaging actions immediately after logging in.

  • Companies enter the funnel by inputting their email and getting in touch with Smash.


SITE MAP

Laying out the architecture of the website

Based on the architecture of the previous website and the user journey mapping insights, I created a sitemap outlining the optimal funnel for each of the 3 user groups. Even though our scope was still primarily focused on the learner flow, I created this sitemap to validate our ideas before jumping into redesigning the solution.


SOLUTION

Introducing the new Smash website—making tech education easier than ever before

Implementing user/stakeholder feedback and journey/site mapping insights, I designed a new website for Smash to efficiently get users into their respective funnels. The redesigned website offers an intuitive experience that helps users remain engaged on their journey to break into the tech industry. 

down arrow
down arrow
down arrow
down arrow
down arrow

DESIGN SYSTEM

Implementing a design system for the first time!

To maintain consistency across 30+ pages, I implemented a comprehensive design system including the following elements: 

  • Foundations: colors, typography, grids, icons, logo, border-radius

  • Components: buttons, checkmarks, text fields, dropdowns, cards, navigation

  • Assets: sponsor logos, imagery, illustrations, data visualizations

I chose shades of blue as our primary and secondary colors since tech companies commonly use it to represent cutting-edge technology, intelligence, and trust. For the logo, we decided on minimalistic type lettering to not be distracting. While completing the design system, I wrote documentation explaining how to use the elements.


Link to Smash’s website HERE


REFLECTION

What I learned from my first-ever internship experience

Working with Smash was an incredibly unique journey, which came with its share of ups and downs, but I am grateful for the chance to get my foot in the door of UX/UI design. Reflecting on the past year, I went from knowing little about design to having a full-fledged portfolio and landing my first internship. I have truly come a long way, especially in growing my confidence as a designer by working with other passionate team members and learning from their unique skills.

  1. Dealing with ambiguity

    • Working with an early-stage startup is full of ambiguity. There was no clear direction and guidance, which meant a lot of back-and-forth iteration. I learned to not be afraid to ask questions and clarify any areas of confusion. As a result, I became more confident with my work and took ownership of the design space. 

  2. Learning to work with stakeholders

    • Closely communicating with stakeholders is crucial. I led meetings with the Chief Marketing Officer twice a week to present our progress, gather feedback, and learn about the company’s needs. Iterating based on feedback taught me to be flexible. I learned how to be an empathetic listener while also voicing my opinions and compromising with stakeholders.

  3. Ownership and growth mindset

    • Take responsibility for the outcome and focus on improvement. I came into the internship hoping to learn and the challenges I faced during my internship (e.g. design rejections) helped me to grow. I traded my effort for a valuable experience.

  4. Be proud of your work!

    • At the end of the day, be proud of the work YOU accomplished. There is always room for improvement. Since I joined Smash, I learned how to design a website, develop my own design system, and practice industry standards such as utilizing auto layout, grids, rulers, components, and more.

Designing Smash’s website was not a smooth process, and there were moments when I felt discouraged. Overall, it was an insightful experience and I am happy with the end product. I am excited to see how this company will expand in the future, and I am glad to say I was part of the original development team.

If I stayed on Smash, I would flesh out the stakeholder’s vision for the out-of-scope pages, such as the user flow for educators and companies.


Thanks for stopping by, feel free to explore my other projects! 🙋🏻‍♂️