UI/UX Design
The aim of the project was to make an E-commerce application for students of the Industry Design Program. I initially had the dilemma of making the app for the sellers or the buyers. Although the sellers seemed like an interesting option to explore, I decided to choose the latter since it there would be more interactions to explore. Another important aspect of this project was to make sure I was following Apple’s Human UI Guidelines.
To begin the project, I conducted research and competitor analysis to identify opportunities for a seamless buyer experience. I followed Apple's Human Interface Guidelines, then moved through ideation, wireframing, and prototyping to refine the design. This approach ensured a user-centered, intuitive e-commerce application tailored for students.
The first part of all my UI/UX project starts off with research. Just before the research I abstractly establish the kind of style and direction I will take with the current project. Based on this, I will identify certain brands to conduct competitor analysis. I usually conduct a SWOT analysis with the competitor brands to identify what I can be inspired from and what to avoid. The brands that I mainly focused on for this project was wayfair, 1stDibs and Ikea.
After SWOT analysis for each brand I was able to figure out what I liked and disliked about each brand, but the aim is not to make an app that is to my liking, but one that satisfies the user. This leads to the next step, User Personas. During the process of making the User Personas, I identified the Target Audience and what drives them to use the app. This served as a base for my user personas.
Once the User Personas were created, I figured what was the audience I had to cater towards. The users who would use the app will usually be alumni or college students looking to buy good quality furnitures. They would also be looking to support the students by buying their products. The target audience not only want quality products for a good price but also wants to support the new designers and allow them to make an entry to the market.
During the ideation phase, I focused on generating multiple concepts through sketching. This allowed me to explore various layout possibilities and interaction ideas. These early sketches laid the foundation for the wireframes and helped shape the app's user experience.
My main process while Ideation includes jotting multiple sketches and ideas. I had multiple rough sketches for the layout of the design and also for the interactions that I could add. These sketches serves as the basis for my wireframes in the future so it proved important to make as many sketches I can.
I have presented some of my sketches below which includes both the UI and the interactions I considered adding. The next stage was to establish the style tiles of the app. This part of the project was to base the aesthetic of the app and make the decisions based on the style tiles.
The wireframing phase focused on creating low-fidelity layouts to map out the basic UI. This step allowed me to test and refine the structure of my designs. By gathering peer feedback, I identified areas for improvement, including signifiers, spacing, and accessibility, ensuring the design aligned with Apple’s Human UI Guidelines.
The wireframes are low fidelity and have the basic UI laid out. This part of the step was important because it was in this stage I could change my sketches to understand if there is any other issues with it. This is also the part where I usually gain feedback from peers. This feedback helps me make improvements during the final prototype. I gain great insights during this portion thanks to the feedback. Some of the feedback I recieved included queries about signifiers, the spacing in button and between a few images.
Another feedback also lead me to change the style guide since it would help make the site more accessible. I also went more into Apple’s Human UI guidelines since it helped me gain more insight on spacing, contrast etc; After making most of these changes I moved onto making the wireframes clickable so that a round of user testing could be conducted before making the final prototype.
The final prototype incorporated insights from user testing, refined wireframes, and the low-fidelity prototype. Additional pages were introduced to enhance features like checkout, sign-up options, and profile pages. These improvements focused on creating a more seamless, user-friendly experience while providing more organization and flexibility for both buyers and sellers.
The Final prototype was a result of all the feedback recieved from the user testing, the wireframes, the clickable low fidelity prototype etc; Multiple more pages were added to the final since improvements were made. More signifiers were added for the save to later option, the add to cart option and the checkout as well. The checkout feature was improved since it felt one dimensional. I made 3 different pages so that the users can feel more organized while navigating through it.
I also realised that the signup feature would require more options like continue as guest for people who wanted to navigate through the application without wasting any time and signing in. At the same time, the option to log in and sign up was included so that could be done as well. I also included a profile page since I wanted to make sure the students get as much exposure as they can. This page would act as a store page for the student to showcase all their work. This would also be helpful for users to buy more products from sellers that they like.
