Transitioning into a new career be both enlightening and exhilarating especially when stepping into the world of UX/UI design. To gain a deeper understanding of the UX process and my role within it, I embarked on an exciting journey with UXUIOpen. In this article, I will take you through my experiences working with ‘maregha,’ an online jewelry store, and how I utilized the ‘4-Step Sketch’ process to help revamp their website.
Step 1: Notes
Understanding the project’s context and objectives was my first priority, so I collected all the information I had from research and a client interview. I immersed myself in maregha’s brand, their existing website, and their target audience. In this section, I simply summarized the information I got to gain insights into their pain points and challenges. It was crucial to comprehend the nuances of the jewelry e-commerce industry and the specific needs of their customers. This initial step set the foundation for the entire project, and it was a smooth transition to the next step, as the first ideas were already emerging.
Step 2: Ideas
Once I had a solid overview of the project’s background, it was time to get creative. The “ideas” phase was characterized by brainstorming and the conceptualization. I explored various design possibilities and considered how they could address maregha’s pain points. This stage allowed me to think outside the box and consider user friendly innovative solutions, as well as simple solutions, that could improve the user experience and enhance the aesthetics of the website. Everything should be clear and easy to find, while giving the user a good and personal experience. The ideas should also be easy for the company to implement.
Step 3: Crazy Eights
In the ‘Crazy Eights’ phase, I took my brainstormed ideas and distilled them into rough sketches. The goal here was to generate a multitude of quick design concepts, pushing the boundaries of creativity. I also used the crazy eights system to tackle small key areas of the design. By rapidly sketching different design directions, I was able to explore a range of possibilities, thinking of ways to show the information clearly and how the user would interact with them in simple ways.
Step 4: Solution Sketch
The ‘Solution Sketch’ phase was where I brought my ideas to life in more detail. I selected 2 of the most promising concepts from my ‘Crazy Eights’ sketches and refined them. Creating detailed sketches allowed me to visualize the user interface and user experience more comprehensively:
- Customer Service Button (CS button)
This was to highlight the transition from one screen to the next in which a pop up window, by the touch of the customer service button. The button is sticky and always be shown to the user, so that they are able to contact the customer service and get informations easily. It is placed in the right lower corner, because it is a common position for chat buttons and users expect to find such interactive elements in this corner.
It is an easily accessible area that allows users to easily find and use chat without interfering with website navigation.
Since part of the project is to make the website more personal. The button with the speech bubbles remind of chats, messenger and co. — personal conversations.
The pop-up window also shows all important contact information at a glance. In a survey I conducted, it was found that users usually receive an answer within 1 to max. 2 days and like to contact via mail. Therefore it was important to mention when the CS usually answers, so that the user can estimate it and does not feel let down. In a survey I conducted, it was found that users usually receive an answer within 1 to max. 2 days and like to contact via mail.
The linking of the IG profile should round off and underline the service because the use of direct messages in IG is even more personal.
2. Favorites List
The second solution to make the website more personal and appealing is the favorites list. Here the user can save his favorite items and view them at any time without having to click through the store.
In this way, they can also save items that they would like to buy as a gift at some point in the future. Another plus point for both sides — the user and maregha — is that the user has to create an account for this. The user gets an individual account in which he can view his favors as well as orders. And the company receives data from users to be able to address them even more personally, through newsletters, birthday discounts etc. This solution is the basis for further possibilities/features. In the sketch I only focused on the favorites page and how the product card should look like when the feature is integrated.
Conclusion
My journey into UX/UI design with UXUIOpen and ‘maregha’ has been an incredible learning experience. The ‘4-Step Sketch’ process provided a structured framework for understanding and tackling the UX design process. It enabled me to move from understanding the project’s context to generating innovative solutions effectively.
As I continue to work on the website redesign for ‘maregha,’ I am excited to see how these initial sketches and ideas will evolve into a user-friendly, visually appealing website that enhances the shopping experience for jewelry enthusiasts.
