Designing Our Agency Website
Wow, first let me tell you how exciting this was for me. To work on a project where you are not limited to certain things is a really rare occasion.
So let me tell you about how I designed our new website along with some tips on how you can do it too.
If the first question which comes to your mind is who is “our” I should explain who our is. We are Etrexio, we are an App Development Agency based in Istanbul, Turkey. We’re providing development services to entrepreneurs, startups, and companies from all around the world. Until now, we’ve developed 35+ projects in 10+ countries from Australia to Singapore, Turkey, Spain, and the USA.
Currently, our website only shows our portfolio and a contact page. This does not quite show what we are capable of. So, designing a new website is kind of a big deal.
There were a couple of certain stages:
-Inspiration & conclusion
-Wireframing/Lofi’s
-HiFi designs
The first thing I had to do was get inspired. For this part, I wanted input from our whole team because it should be something we all enjoy looking at, be proud of and really show our character as a company.
When I collected all the input, I made a mood board. If I should sum up the style of the mood board in a few keywords it would be: clean, authentic and aesthetic.
This is something I love doing and really think is essential for every design process, because it will show you the feeling and ambience you want to see in your final product. Below you can view the style I wanted to achieve.
Another thing I listed from the examples me and the team had collected was what the general pages of agencies are, which are the following:
- Home
- About us
- Our services
- Portfolio
- Career
- Contact
A big thing some UX (& UI) designers forget is that you don’t have to reinvent the wheel. It is already known what your user is used to seeing. Which will decide what they expect to see on your app or website. In this case, it is almost exactly the same as on almost all the other agency websites. So, now I have my sitemap!
Ok now comes the exciting part… the design. We first start with wireframes. These will show the basic flow of the section the user will go through while visiting your website. You create and sort content blocks without any style to them to try to understand if the content which will be shown is logical.
Below you can see some of the wireframes I made. Again: these are purely about the flow, not the design. So, by tinkering a little I decided that these wireframes would be the base of my final design.
So, now I have the two things ready for my HiFi design. But first I must choose a font which matches our company. I went with DM sans, which is a Sans Serif font and makes for clear content. I already had my colors ready, so I started designing. Below you can see the colors and fonts I’ve selected.
The first drafts will be rough until I finetune them to be aesthetic but also understandable design. This process is maybe the hardest part because it’s totally about your creativity, you can’t apply a certain formula because you want to achieve something unique.
Therefore, sometimes you design an idea and you’re very excited about it though it will not be as good as you have imagined. What you then have to do is stop hesitating and go back to the drawing board. Otherwise, if you keep tinkering to make it better, you will block your creative flow and often it will not match your expectations.
For some of these sections, I had a few ideas but didn’t know which would be the better option and also couldn’t review this by looking at the wireframes. In a situation like this, I will make two quick designs to select from.
But these will not be as extensive as the others, otherwise, it’s not worth the time and creativity you’ve put into them since you can already select it based on a not as HiFi level.
After I was quite happy with the design and style I have created, I asked for feedback from Etrexio team. Since they are also quite experienced, they are very good at providing feedback.
Feedback is one of the crucial steps in any design process. Since this can help get out of your head, it can provide you with a different perspective & direction to work toward.
It can also give you insights into certain parts of your design other people perceive differently than how you want it to be. In this case, our team gave me some suggestions about adding certain eye-catching elements like animations of screens which will impress the visitors.
So, of course, it was not a straight road to success and there were a few things I struggled with. First of all, planning. Planning is a hard thing to do while designing, there is a fine line between the right amount of time and too much time to design something.
This was also the part where I struggled because when you give yourself too much time you can get into a rabbit hole of trying too many things because you can. This is why I think I should have planned less time to push myself to go with the designs I think are the best and just make these into the final product I want.
If I have to tell you about specific parts of the design where I struggled, it’s the landing page and the contact form. So, let me briefly tell you about what I found hard in this case and how you can avoid this.
The Landing Page
The landing page is something I put a lot of pressure on myself because it will decide the customer’s first impressions of Etrexio. That’s why I was constantly in a mindset of what can I add more and more to make this part eye-catching. Because I was doubting so much, I was constantly postponing starting.
I wanted to know what I was going to make before I started, which was a mistake. When I noticed what I was doing I stopped working on the landing page and focused on another page to give myself some mental space. After finishing this, I returned to the landing page and just started designing and not thinking about my doubts as much which made a great final design I was happy with. So, one tip, if you are also making a big deal of something and struggle to start, is just start.
Your creative process will lead you to your final design. And you don’t always have to start with the most important page because that puts a lot of pressure on the rest of the design. So, just start somewhere and let your creativity lead the process.
The Contact Form
The contact form was a struggle which I didn’t expect to struggle with. The thing with contact forms is you have to keep them as simple as possible for users to use them. The content was not the struggle here but the design. I have tried a lot of designs here. When I can’t figure out what to do with a page, I look for 2/3 great examples to get inspired and compare my elements to theirs to figure out what is not right. By doing this I could finalize my contact page which now looks like this:
Now I had the web design, but there are a couple of things missing:
-Where is the mobile version??
-The website is quite static; it needs some interaction.
So, you might have heard of the mobile-first design approach. This is generally the approach you want to use while designing but in this case, we chose to go by web first because of two reasons. The first one is that we expected our customers to view our website mostly via desktop because they are mostly other businesses. Of course, you can’t design something based on assumptions, so I asked our development team for some data. From our Analytics dataset, we could see that the website was viewed 80% via desktop and it also was viewed for a longer time frame than mobile.
So, the second reason is that you can be more creative and impactful on a bigger screen. But we of course still have to make a mobile design which also has to be impressive since we are a mobile app development agency. Adapting a web design to a mobile one is harder than the reverse. This is why I made a few changes, let me explain.
So above you can view our portfolio section for the web version. On the web version, the description of the case will show up when you hover over the card. On mobile, there is no such gesture so I needed to make a different version here. The struggle here is that you have less space to work with which has to contain more information. Therefore, I removed one of the screens to make more space for the text. And the design became the card below
Above you can see the “what we do section” for web and mobile. The solution for adapting this section to mobile was quite simple. Instead of aligning the items horizontally, I aligned them vertically so the user can scroll to read them on mobile.
Now let’s talk about the interaction part. To make a website or app less static you can make use of micro-interactions and animations. Micro-interactions are simple animations which improve the connection between the user and the product. It shows visual feedback and makes changes on the page clear. For example, the easiest micro-interaction I can give is a like button which fills up when a user clicks on it.
When you are designing for the web, you have more opportunities for micro-interactions like hover. This means when a user hovers their mouse over for example a button, the button you can change the color to make it more interactive and appealing to click on.
But how did I use this on our new website? I have made use of interactions a lot. Below you will give some different examples.
-Hover (button)
a hover is a quite simple micro-interaction every website needs. It’s the minimum of interaction you need with your user.
-Scroll (the phones)
when you animate something while the user is scrolling the goal is to make sure the user notices the change. So, you can use this when you want your user to notice certain things.
-Auto (our values & )
so, this is an animation which is not linked to what the user does, it’s auto-animated. So, it always moves, this is again to grab the attention of your user to the moving parts.
After completing this part, I have finalized the design of our website. So, what you can take from this process is that the design process is not linear. Sometimes you will fall, and sometimes you will sprint but by taking baby steps you will always reach the finish. That’s what I have done when I couldn’t see the wood for the trees. Near the end of my design, I was struggling to finish all the small cleaning-up tasks. That’s when I made a to-do list of even the smallest tasks, by doing small tasks one at a time you can quickly finish that one big task you were afraid of tackling. Most importantly you need to look back from the finish and realize your mistakes and grow from them.
Now the next part is it becoming reality.
Stay tuned to see our website live!
