My first wireframe
In my previous post, I’ve promised that i’ll be documenting my journey to become a product designer. Here I’m, eagerly waiting to walk you through my wireframe.
Before, I walk you through my design process, I would like to thank Daniel Scott for coaching me on how to use Adobe XD to become a Product designer. I’ve completed 1/3rd of the course so far, and the current wireframe is part of the exercise material from the course.
The main aim of this exercise is to build an E-commerce website for people to buy high end furniture.
I have followed the following steps before I work on the wireframe.
I have read the entire Project brief, it took me 30 - 40 mins to get a full sense of the project
The project brief is a document which has all the information about the project. It contains information such as primary objective, customer personas, feature list (product requirements), project deliverables, competitors, timeline and payment terms.
After reading the project brief, I scribbled a little bit on the paper on how I would like to see my wireframe. It was pretty easy to scribble on a piece of paper but I struggled to implement while working on the software. Partly because, I’m using the software for the first time, I’m still getting used to the software and finding ways to improve my work flow. It is a test for ones patience.
I was all set to work on the wireframe.
Here is my Home page
I’m still getting used to the design terminology, so, on the top menu bar,
I have the name of the company (typically people use logo),
Search box; which allows people to search for the product they are typically looking for
Different segments in the furniture products such as living room, bedroom, kitchen and dining.
I have also included a contact button, which can be typically used to contact the company customer support.
The shopping cart is a pretty common function in an e-commerce store. It can be used to let the user know at any given point of time, how many items they are purchasing from the website. To fetch the shopping cart logo, I have looked out for free resource.
As per clients requirements, in the home page they want a Hero box - which usually has the statement or text which is a call to action for any website visitor to grab the eye balls
The following sections after hero box includes, New arrivals, Inspiration ideas and Clearance sales and Footer.
I have fetched the footer from the Free UI elements provided as part of the course material. Trust me, having free resources is a greatest time saver in any product designing process and project.
I felt so sad when I was working on the contact form; I was so surprised when I googled for images about contact forms for inspiration they all looked the same. I felt this is just crazy, haven’t people thought of any better ways to design a contact form?
As I didn’t have enough time, I put my head down included three simple text boxes which usually majority of the contact forms have they are; Full name, Email address and message of the customer.
I was feeling like a badass once I finished the task, I have gone through lot of distractions during the whole exercise process but I finally got over them and completed the task. I’m not quite sure if those focus distractions will pop up again when I work on my upcoming projects. I’ll try my best to get over them and do a good job. There are some cool takeaway from my first wireframe exercise
Patience is key to complete the project
Do a lot of research before deciding on the the components for the wireframe because they are fundamentally key components for the whole projects
Manage distractions mindfully and try to calm down the monkey mind because the exercise is a challenge to get out of my comfort zone and monkey mind always try to stay comfortable in the place where it is (which hampers the personal and professional growth in the long run)
Don’t forget to download the artboards in in JPG format for the blog post.
This has been my journey while I was working on my first wireframe. If you have come this far, i’m so happy that you were really interested in reading my journey. Thank you so much.
Take care and Stay safe ❤️
- Amaranth Nagula
PS: If you would like to follow my journey and would like to read articles whenever I publish please don’t forget to subscribe.