
My First Website Made Shopping Fun
My 1st Google Certificate Project
This was an exciting new start for me. For the first time, I was using Figma to come up with an actual concept! Figma is a tool used in designing an app or website before engineering it fully.
The 5 Stages of Design
Google emphasized using the design process. And their whole course what centered around applying it to our projects:
Empathize
Define
Ideate
Prototype
Test
What Did I Choose?
Of a multitude of options, I chose to create and e-Commerce website for gaming accessories. Which, sounds fine on it's own, but I didn't want fine. I wanted to create something different.
My Desire For Something Different
For my first project, I started with an issue I have. Gaming accessories and computer tech is too confusing nowadays, and everything looks the same.
I don't want to learn about tech parts, but I do want the best tech for the activities I do.
Then it hit me. What if a website asked what I like doing, my preferences, and it told me what the best products for me look like?
Not many shopping experiences curate and make the process fun.
I wanted to make someone feel like they weren't shopping.
Broaden Scope = Greater Value
I decided to make the focus not on accessories, which individually are commoditized, but building an entire setup experience.
By stacking products, services, and an experience that are found nowhere else, I am able to differentiate from an already saturated market. This also brings greater meaning to the products and the brand.
The Ideal Customer
For this project I used Chat GPT to search discourse about this subject, and found that many people share this issue. I then took the basic data and wrote my own personas/avatar (a type of person that would use this website).
Those 2 personas, combined with the goal to make shopping fun and easy, guided my design process.
My First Wireframes
They were bad, I will admit. And I ended up making my first mistake here, which was assuming I would create a simple quiz. Meanwhile, I put emphasis on the checkout page and the home page, and assumed I would have a fun quiz once I find easy questions to ask.
Designing For Real in Figma
Starting Figma was both fun and confusing. Trying to create simple shapes had its difficulties, as it must be organized the proper way. I spent the most time on the checkout page, as I found that most important.
I wanted people to see the collection of items they were getting any time they wanted, while in a visually simple manner. I wanted it to feel like they were collecting the infinity stones for their perfect setup.
Testing Reveals Glaring Issue
After developing a prototype, and conducting a mini-usability study with a friend, I realized I missed the most important part.
My friend went through the quiz very easily, and had no complaints. He was mostly positive too! But I noticed something on his face during the process…
He stopped smiling in big text portions of the quiz and the features listed for his recommended computer.
I did not make the quiz fun, just wordy. And the products description was too technical.
As surprising as it is, I lost track of making the important information easy and fun to understand!
Solution
I adjusted the quiz to be more playful and visual. Before it felt like you were taking a test, and now it feels like you are playing a game. Additionally, the product description speaks in practical applications and ideas rather than specs.
Reflection: What to Do Next Time
I must ask myself if I met the deliverables for my product. Is it giving the right feelings? Is it easy and fun? Doing the study helped me see my blind spots.
Additionally, I initially struggled making the UI because I did not have any references to go off of. As a beginner, I should have copied/replicated more. Though, I did copy the optimal hero page format (which is proven to convert).
I just had a bonus idea! What if, when people click on the option in the quiz, whatever picture they click on takes them into that picture? From that world they get sucked into, there are more questions, but it is themed based on the choices you make. If I pursue this further, that would be something I explore. I suppose projects are never dead unless you let it be.
New Techniques
Following the design process
Finding data
Wireframing
Usability Study

