Spawn
UX/UI Design
This was one of two projects I did while I was completing my Google UX certificate. I was to create an app and website based on a prompt of my choosing. The prompts were very wide ended and included services such as retail, food, inventory, etc. The prompt I chose was to create an ecomerce platform which sells gaming equipment. I chose this prompt because I am gamer myself so I thought it would be fitting if the demographic like myself made the site. This is the first project where I really apply my own styles and approach to UX. I’ve done similar projects in college, but those were only 1-2 page sites versus making a site with the mindset of it being for public use. Before I begin the processes of how Spawn came to be, I must say that this project did not require us to make a fully fledge app/website that was public ready. We are only instructed to design a user flow on an app and website layout. This of course includes a logo, supporting pages, and other miscellaneous details but that is it.
Introduction
I first began brainstorming how I wanted my app to appear and what information it should hold. I knew my demographic are gamers and gamers can come at all ages and experiences. I started researching popular retail and ecommerce websites such as Walmart, Amazon, Temu, and Shopify. I took in mind what each platform had that the others didn’t and the branding they were conveying. One thing I did pay a lot of attention to was the layout of which they organized and displayed their information. With all the products that these platforms sell to consumers, I thought it be of utmost importance to learn how each site presents itself and their products. Walmart and Amazon were the two biggest sites I mainly used as reference, but I also used the Epic Games store solely for their layout and presentation.
Philosophy
Although this isn’t my first time creating a user flow, it was somewhat challenging because I had to apply ecommerce practices that a consumer would often go through when searching and purchasing. First I pretended to add items to a shopping cart and proceed to checkout on various websites to understand the process of searching for items, reviewing items, and checking out. I admit, it was a lot to take in and wasn’t necessarily as easy as click and go on some sites. Once I noted all the important steps that every site had, I began incorporating those steps into my user flow and then catered the process to fit how I want my user to navigate throughout the platform. Once I had my user flow down and labeled I began the sketching process.
User Oriented
With my user flow down, I began illustrating how I wanted each page to look and how my user moved from one page to another. I began with the homepage as thats the introductory page for users and this was the page which took the most time to make. Homepages of ecomerce are often packed and oragnized in categories so users can easily find products through home decor, office, furniture, appliances, etc. They also typically advertise sales or any big deals they have as a way to draw in consumers. With these details in mind I began brainstorming all the various details of existing retail platforms and combining them with ideas of my own and how I want them to be displayed. The other pages weren’t too hard to make since they didn’t contain as much detail or info needed like the homepage. Ecommerce pages can really to segmented into three big pages which are the homepage, products page, and checkout. I wanted to make sure my user flow didn’t feel like an endless cycle of pages to pages and I wanted it to feel familiar. My sketches were done with pencil and paper
Sketches
App Sketches
Website Sketches
After selecting the sketches I decided were best suited, I began the mockups portion where I would use shapes, text lines, and other visual cues to give an image of what my app would look like at a foundational level. This step is important since it’s the grassroots portion of my platform. I always had the philosophy of what my platform is and keep that mindset as I was placing every button, text line, image, etc. For context, the reason why the app mockups have text and the websites don’t is because I eventually changed from adding text from the Mockup stage to the Lo-Fi prototype stage when I began the website version. I realized it would be better to focus on placements in the Mockup section before I added key details In the Lo-Fi section. I guess you can see it as my development as a UX designer.
Mockups
Website Mockups
App Mockups
Using my completed mockups, I began filling in all the placeholder text with actual text that would be realistic to see on the platform. This is done to bring the app/website to life and begin seeing how it would look and feel in practice. Posts, UI labels, comments, and any other forms of text cues were typed by me and catered to fit the environment that Spawn provides. This is also the portion where I began adding any additional pages I thought were necessary since I had my foundations down and had a layout to follow. Although creating a footer for the website did take a bit of research since specfic information is needed to have an “official” footer for ecommerce websites.
Low-Fedility Prototype
Website Lo-Fi Prototype
App Lo-Fi Prototype
High-Fi Prototypes is the last step of the design process and where I began including pictures and color to my project to fully bring it to life I chose various tones of a dark purple because it resembled the feel of RGB colors which are common gaming wear colors, and adheres to the Web Content Accessibility Guidelines(WCAG) for those who have any form of visual impairment. All my images are stock images or pictures I found in the public domain. This is also the part where I make any last changes to the site itself whether minimal or major. Realistic, you’ll always be updating your site/app but I don’t have to worry about that yet.
High-Fedility Prototype
Website Hi-Fi Prototypes
App Hi-Fi Prototypes
Walkthrough
I learned a lot from doing this project, especially since this was my biggest UX project at the time. I was constantly learning and improving as I was making layout and really honed in on my design choices and philosophy. The project was difficult, solely because I had to incorporate ecommerce elements to the mix, which I am not familiar with at all. Even though, I am a consumer and have used ecommerce sites, it’s a different experience when trying to replicate the process because you begin to realize all the important details and information necessary to make the process work. The knowledge I have gained from completing this work will definitely snowball me in future UX design choices, most notably, my Proffer platform and many future projects to come.