Penn’s first-ever live 3D construction platform
B2C
Interaction Design
Marketing Design
Web
IOS
Team
Product Manager*2
Product Designer*2 (me)
Software Engineer*3
Skills / My role
UI Design
UX Design
Usability Testing
Marketing Design
Company
Penn Spark is a student organization at Penn to design and develop creative products every semester. Penn Place is one of the projects
Challenge / Opportunity
How might we design a beginner-friendly 3D construction platform?
Results
User Creation
30000+
30000+ creations after the product released
User numbers
300+
300+ users were collaborating and creating together
Award
Best Project
Won the ‘Best Project’ of the semester at Penn Spark
Overview
Make 3D construction easy, collaborative, live and fun.
Collaboration
Constrains we have:
Tight Timeline
Difficult Tasks
Lack Previous Experience
How did we collaborate and make it work?
Set a clear timeline
Weekly meeting and use Trello to track the progress
Weekly Meeting
We meet twice every week. On Tuesday afternoons, we work together and on Sunday afternoons, we update the progress
Trello
We use Trello to keep track of our progress for both design and develop
Focus on the MVP
Initial Wireframes
We brainstorm many features: choose colors, combine cubes, redo, etc.
MVP
We focus on building cubes with different colors and viewing them smoothly.
Design
A main challenge we solve:
How might we build and view the models smoothly?
In the first round of user testing, we found that users often accidentally placed a new cube when they were trying to view the model they had already built.
Exploration 1
We tried using different interaction methods to differentiate viewing and building.
However, this approach made the interaction system too complex and difficult to remember.
Exploration 2
We then considered introducing a toggle button—not just as a UI element, but as a method for switching between two distinct modes: Build and Move.
We also explored different design variations of the toggle button to ensure clarity and ease of use.
Final Solution
In 'Build Mode' , users can select colors and place cubes to construct their models. In 'Move Mode', users can navigate the models from different views, as well as zoom in and zoom out using the mouse and keyboard.
Build mode
Users can choose colors and build cubes upon others’ models.
Move mode
Users can move, rotate, zoom in and out to view the models.
Further Refinememt
After testing, we simplified the user flow by automatically switching to 'Build Mode' when users click on the color palette while in 'Move Mode'. Our research showed that once users finish viewing the model and intend to continue building, it's intuitive for them to select a color directly, rather than manually switching modes. This refinement significantly reduces interaction cost and enhances the overall experience.
Before
Move mode → Switch to build mode → Choose color → Build
After
Move mode → Choose color → Build
Mobile Version
We designed the interface to be responsive on mobile devices, ensuring that users can easily navigate and interact with the 3D models using touch gestures. This design choice enhances accessibility and usability, allowing users to engage with the application seamlessly across different devices.
View the models
Color palette
Recommendation for PC use
Marketing Design
I designed marketing materials in various formats for our product, including posters, flyers, and banners. These were shared on social media and distributed on campus to attract more users and increase product engagement.
Result
30000+
30000+ creations after the product released
300+
300+ users were collaborating and creating together
Best Project
Won the ‘Best Project’ of the semester at Penn Spark
Reflection
Don’t be Afraid to Explore New Fields: Few team members had prior experience in designing or developing 3D construction tools, but that didn’t stop us from making it work. Through regular brainstorming sessions and problem-solving, we turned a rough idea into a feasible and functional product.
Cross-functional Collaboration is Essential: Building our product required close collaboration across design and development. Interaction design needed to be both user-friendly and technically feasible, so we worked closely as a team to iterate together and ensure our design decisions were practical and implementable.
Accessibility Brings More Users in: Initially, our product was designed for computers, as building 3D models is more intuitive on a larger screen with a mouse and keyboard. However, before launch, we also created a mobile-friendly version. We realized that most users would discover our product by scanning posters with their phones, so it was crucial they could access it instantly—and transition to desktop later if needed.
Project Website
janie.zhaoy@gmail.com