Google DSC
Represented Howard University in the global solution challenge put on by Google, in which Developer Student Clubs from across the world participate. We were placed in the Top 50 worldwide, with only 2 other US teams, out of over 850 global teams.
CONTEXT
This project was a part of the global solution challenge put on by Google in which Developer Student Clubs from across the world participate. I saw this contest as an opportunity to explore 2 of my biggest passion, the arts and creative technology. Given this was my first time coding anything from scratch, I knew it would be a challenge, however, I was committed to figuring it out. Here's what the process looked like.
ESTABLISHING TECHNICAL REQUIREMENTS
We started by establishing what would be required to build this product. After much research, we determined that we would be utilizing the following tools:
- Blender for 3D Models
- Babylon.js for 3D web dev
- Google's AR Quick Look for AR product visualizations
- Stripe for purchasing.
WORKING WITH CREATORS
I worked with each creator to craft and ideate on their store experiences. We started by discussing their creative direction and brand identity and finding ways to build that in their store.
As shown below, Christopher Mikhail, wanted his brand's store, "Beloved." to be minimal, clean, and luxurious. We worked with him on ideas to craft this and bring it to life.
Sketching with Creators
PROTOTYPING
Now that we had the concepts for the stores sketched and aligned, we had to start bring them to life. I first started by modeling the stores in blender, and testing them in the web using Babylon.js. At this time, I also began testing out controls and look/feel in the web.
This was my first time using Babylon.js and even coding a full program from scratch so this took a lot of trial and error.
Prototyping Blender
Babylon.js Prototyping
TESTING
We first conducted some user interviews with current small business owners and creators asking them about how they view 3D and AR/VR technology.
We found that for creators, those in fashion and art were most interested in using a tool like this. This helped to steer us in the right direction and get up and running.
Once we started production, we then tested a number of different setups for movement and controls. We started off by allowing the user to click to view/interact with objects, but many found this setup difficult switching between pressing keys and clicking. We then moved to a setup that allowed users to move and interact with only their keyboard. We also added a highlight around objects when near to indicate that they can select.
We also tested movement between using the left and right arrow keys to rotate the camera, versus to move laterally. Our users' feedback revealed that most preferred using left and right to rotate as it felt more natural.
PRODUCTION
We finished by making 2 stores, one focused on art and the other on fashion. Each store had its own products and AR Views. Here is how they turned out:
Fashion Store
Art Gallery
C0NCLUSION
After a strenuous series of learning, trial and error, and thinking outside the box, I am so happy to say we earned a top 50 spot. With only a team of myself and one other, we were able to stand out in a crowd of over 850 teams. This was my first time coding something from scratch and it has truly strengthened my passion for working in this space.
Learnings and Improvements:
One thing I would certainly look for next time is to borrow more knowledge from the gaming industry. Elements of the experience such as the performance and controls can certainly be improved, and the gaming industry has already come up with solutions to issues such as these. With the onset of the metaverse, many experiences are becoming more game-like and we can look to pull from their philosophies to make them more intuitive and delightful. While we are still early to this space, we don't have to wait until maturity to craft a good experience.
