Surface Book - 1.png

Google Codesign

Improving Usability of the Marketplace

 

MY ROLE

End-to-end Product Designer

SCOPE

6 Months Course Collaboration

Team of 2 Designers + Google Product/Design/Eng team

 

Weekly Design Reviews

30 User Interviews

7 Rounds of Design iterations

BACKGROUND

Codesign is  Web Component-based Prototyping Tool. Similar to Figma but components can be design or code <🧩>
 

Pretty cool right?

The app has 3 different marketplaces but users are barely using them. With user numbers increasing and 2 new asset types coming to Codesign Marketplaces, it's time to improve the usability!

GOAL

Improve Marketplace user experience focusing on clarity, discoverability, and predictability.

illustration.png
Frame 525.png

PROCESS

Research  Competitive Analysis, Current State Audit, User Interviews

Ideation User Research, 3-Day Design Sprint
Design Wireframes, Mockups, Prototypes

Evaluation Task-based User Testing

look.png
13.png

RESEARCH

This phase was focused on getting to know the app and problem space.

Through competitive analysis and the current state analysis, we started to pick up on 3 core focus areas.

With these focus areas in mind, we interviewed 8 Google Users (UXE,IxD,UXR) and 6 Designers outside of Google. The goal here was to go in depth about how users navigated marketplaces in their current design tools and identify pain points and gain points.

Screen Shot 2022-05-06 at 2.11.11 AM.png

Competitive Analysis Focus areas

Finding assets

Publishing Assets

Updating Assets

Affinity Mapping Categories

Users are looking for
Clarity, Discoverability, Predictability

Screen Shot 2022-05-06 at 2.14.56 AM.png
ayFrame 528.png

Overall Findings

⬅️ 👀

With these findings we were able to create personas and move into the next phase.

Frame 531.png
13.png

IDEATION

Now that we knew who our users were and what they needed, we could get to ideating!

We quickly planned and executed a 3 day long GooglDesign Sprint with the team, users, and stakeholders.

The goal of the sprint was to walk away with wireframes that would lead creation of a better experience for marketplace for publishing, version control, as well as search.

Frame 534.png

Sprint Outcome

We were able to diverge to ideate then come back together and walk out of the sprint on the same page with a path forward / wireframes for the 4 newly defined flows: Starting a project, Marketplace search, Component Publishing, and Component Updates.

⬅️ 👀 Example

We had a good time and learned a lot. Here's a little glimpse. More here.

13.png

DESIGN

After identifying the flows where we could have the most user impact we moved forward to wireframes, mockups, and prototyping.

 

During this phase we had weekly design reviews with the Google Codesign team including Eng, Prod, Design.

 

It was a whirlwind of rapid prototyping. We were moving so quickly that one of our Google team members told us "I can't believe how much you guys are getting done" 💪

Screen Shot 2022-05-06 at 3.55.55 AM.png

Wireframes

Goal   Working on higher level concepts

Focus Flow 2: Codesign Marketplace Search

⬅️ Example

Overlay of marketplace search

Attribute based filtering

Verified/Accessibility chips

Mockups

Goal   Consistency, Integration, Details

Focus Flow 1,2,3,4 (Starting a project, Marketplace search, Component Publishing, and Component Updates)

Example ➡️

Publish Flow

Interactive Component

Accessibility

Side Panel Drawer

Screen Shot 2022-05-06 at 3.57.00 AM.png
Screen Shot 2022-05-06 at 3.58.06 AM.png

Prototypes

Goal   Testing Predictability, Consistency,

Ease of Use

Focus Flow 1,2,3,4 (Starting a project, Marketplace search, Component Publishing, and Component Updates)

⬅️ Example

Marketplace Search Flow

Most Used
Trending
Recently used
Recommended

 

Screen Shot 2022-05-06 at 4.31.27 AM.png
13.png

EVALUATION

After identifying the user needs of clarity, discoverability, and predictability in our initial testing, then building out the 4 flows to account for those needs, it is now time to test out the prototypes.

We ran two rounds of testing with 19 users in total.

For the 4 flows, we laid out the metrics we will use to measure success. ⬇️

Frame 536.png

Findings:

Project Templates:            4.6/5 

Codesign Marketplace:   4.4/5 & 4.9/5

Component Publishing:   5/5

Component Updates:       5/5     & 4.5/5

Sidenote:

We decided to focus efforts on flows 1 & 2 for the second round of testing.

 

Flows 3&4 only underwent one testing round due to the high usability scores and our need to prioritize user time.

Example:

We we made usability tweaks to all 4 flows. I am going to give one example design that I took the lead on, but for more go here.

Example ⬇️

Codesign Marketplace

Change to allow for multi-select of components from marketplace view and detail view

"I want the option to select multiple components at a time..."

                                     - Codesign user

help.png
13.png

CONCLUSION

Overall

We were able to take an open ended brief, identify user needs and pain points, identify the flows and feature work needed to address those pains and execute from there.

Of course our final metrics show that we were able to reach our goals, but it was also great to have our stakeholders invested and congratulatory on our work done for Codesign.

Next Steps

1. Expand to other types of assets
2. Analytics dashboard with component usage details for design contributors
3. Adding component groups and favorites

Learnings

1. It's always best to come to design review with 3 options or less

2. Watching the users actions > Listening to their responses

3. How to pivot during a design sprint and encourage confidence

Thank you

Thank you to the Codesign Users for their time, the Codesign team for the mentorship, and my teammate Guru for teaching me new figma-isms. 👩‍💻 And... Thank you for taking the time to check out my work!