My Website Design Process
People are interested in too many shiny objects…
When I began to work as a web designer, I thought websites needed to be filled with features and areas to click. The more features and shiny objects I could have added to fill in the spaces, the better!
Was I wrong? ummm Yes, quite a bit. But this was part of the learning process that brought me into knowing that removing any shiny object that is not needed is key for good user experience and design.
As I began to learn more about design and consultation to understand each client’s needs, I started to develop a process that quickly allowed me to get my customers to step away from a Shiny-object syndrome and move into a more clear and purpose-oriented approach.
With this being said, I want to share with you the three main ways I ensure my websites are clear, simple and goal oriented.
This blog post is for:
- Business owners (Startups / Running businesses) who are looking to design or redesign their website.
- Website Designers looking to enhance their process and create more goal-oriented end products.
The website design process I am about to share with you is part of what I do before and during any website design and development project. To make it easier for you and me, I will be breaking this website design process into parts to make it easier to follow.
Here are the 6 main ways I ensure to keep my designs Shiny-Object Free
1. Have a discovery phase for any website design project:
The first part of my website design process always takes part in a discovery phase. I want to learn about you and what you have in mind.
Even if you are just going to redesign a page on your website or create a landing page, you need to have a discovery phase. On one of my previous post, I spoke about the reasons why you do not want to miss a discovery phase.
The goal of a discovery phase is to really understand the project and the end goals. This will also help you to create a structure on what is needed and what is not needed for the website. Furthermore, you can also do a competitors audit, where you can audit the competitor’s website’s and take notes of everything that is working and not working on their website.
If you have a current website, here is the chance to see what about it is currently not working and what about it has been working in the past.
Also, here you can work towards creating a map of the target user and the end goal. Work towards finding the paths your users will be facing when trying to achieve a task (s) on your website. The key here is to not give these users any emotions or personalities at this moment. We will talk about this in the second method.
All you want to find out is the way they are going to get to the end goals.
2. Keep your users with you all the way
By now you have a sketch of the customer journey using the product (Website or app), you know where they need to click and where they need to be driven to. Also, you have the end goals of the project and all parties are in equal understanding of what needs to be done.
Remember when I said, do not give the users any emotions or personalities?
Well, now we do the opposite to that. We create user personas and we give them the following attributes:
- A full name
- A customer type
The reason I do this is to ensure the design is matching the end-users. At the end of the day, if they are not able to accomplish their tasks, they will not be customers.
This gives me and your team a better idea of what features we need to have on the website, the tone of voice we will be writing on the website, images and even better ways to enhance the user flow.
Because now we know what the customers want and who they are, we will be able to remove any feature or option we thought it was a nice element to add to only looking at elements that are a MUST for them to accomplish their goals.
3. Put away all the design elements and start crafting wireframes
Designers will be like wait, I was ready to start designing…..
For this part of the website design process, it is time to put away all the technology and stick with the basics.
Now you have all the elements you need, but if you start to design the website right now it will bring in more Shiny-objects than you ever thought.
Here, what the designer needs to do is use a pen and paper to start sketching wireframes showing the elements that are going to be on the website. It is literally just boxes and lines. There is no need for any graphic design work or even brand elements to be added to it at this moment.
TIP: You can also use whiteboards and Sticky Notes. It all depends on what you are comfortable with and how people are working on this project.
Once the wireframes are completed, the designer can now move into a tool like Sketch to start sketching the wireframes into a digital version. This will give the designer and team an idea of the elements, the way the flow. As there are no colors or brand elements, you are able to place elements in much better areas and get to love white spaces.
When an element here does not fit, you will be able to tell right away. And because no graphic design work has been done here they are very easy to change and adapt to the new findings.
If you are not familiar with the term WIRFRAMES, I will create another blog post just about it and show you how I build a successful wireframe.
4. Design Mobile First
Mobile first? But isn’t desktop design the most work?
You may be right, but right now we are looking for simplicity and trying to have only the content that we actually need. Luckily for you, the best way to do this in a mobile version of a website.
Think about when you are scrolling through a website on your phone, you are most likely only looking for specific content and information before you make a decision to move forward.
Hence, mobile design is key!
5. Design it from scratch
On a previous post, I spoke about website templates.
I gave you a few reasons why it is not a good idea to purchase a template unless it is a MUST. When you are working with templates, you are going to try to match the content and design to fit the template. As a result, your design will become heavy and most likely full of shiny objects provided by the template.
When you are designing from scratch it gives you more opportunities to stick to the wireframes, the users, and end goals.
Of course, there are elements you can download for your design. There is no need to try to create a few elements or photos from scratch when you can purchase them. Just make sure that the important elements are in the website and aligned with your brand, users, and goals.
6. Test the design
Many designers and developers will be scared to do this, but the reality is that if it does not work as it should the whole process was a waste. Furthermore, when I say test the design, I do not mean if the website’s form works or the menu navigation loads.
Even though this is important, that will be taken care of in the development phase.
Today with tools like Sketch, Invision Studio, Adobe XD and Invision, your designs can come to live without any code. This will allow users to interact with is and find flaws before any development begins.
To enhance this, you can also create a questionnaire for users to fill in after they have worked with the design. Also, if you were able to create a simple HTML / CSS design you can use a tool like HotJar to track users interaction with the product.
These are the six methods I use to ensure all the design of websites and applications is clear and shiny-object syndrome. I will be creating video contents that will show you how I do this in real time and help you understand it better. If you have any questions about this, or have any other inputs please feel free to comment below or send me a direct message at email@example.com