This project is my freelance project that the client is my friend. He is an owner of digital creative agency which offer some services like AR filter creation, videography, branding, and other creative services. Once, he need my help to design a website to showcase their works and tell services to wider audience. Simply, they need portfolio website for promotional purpose and prepare for an event in order to make them more professional. There are two main phase of this project, first, they need only a landing page when they promoted their agency in an event, so that, they can send the audiences of the event their website link. Second phase was to design and develop their complete portfolio website that they can use for a long term.
In this project, my role is more to User Interface Designer that able to create an amazing visual for the website that can represented and fit with their agency style and branding. I also need to make sure that my design will make the positive impact for the SEO performance and also the user experience.
The main challenge of this project was to create a simple but gorgeous landing page in the limited time for their promotional purpose in the event and also could reuse to develop a complete portfolio website for the long term. Beside the main challenge, there were some other challenges that I need to fulfill in this project like how to make a design that fit for their branding, how the best way to showcase their works and make it responsive for any different devices, how to make the relevant content structure that support SEO performance, and how to make the visitor of the website had a good experience when they need to do some tasks in the website.
At the end of the project, hopefully I can deliver a beautiful website that can represented the agency’s branding and make them easier to find at google search so that they could increase audience and chance to get a client.
In this project, I did some simple processes, the point is to get inspiration as much as possible and collect design requirements that the agency needed.
Talk to The Stakeholders First, before I started designing, I need to know the real problem and need that they want to solve. I understood their core business and talk to the CEO how they run the business especially how they got the clients. I also asked them is there any references about how the website they want to be looked like.
Finding Design Inspiration After I got all the requirements needed, I started to make design exploration for the landing page first. I started with some exploration for the hero section. It must be simple but elegant at the same time, but also could deliver about the identity of the brand. So, I search some inspirations from design inspiration web like Dribbble, Behance, and Awwwards. I also search inspiration from other top creative agencies out there like :
Creating Design Exploration
After I got all references, I tried to mix and match the styles and finally made my own style that fit my client preferences. So, here are some explorations that I made.
After I finished some explorations of the hero section, I showed them to the stakeholder and asked for their opinions. They were pretty interested with the results and tried to choose one design to use as the hero section for the website. After a little bit discussion, finally they made decision and picked a design to use.
After picked a design, they also gave some inputs and asset that will be used in the landing page. They are a reels video for the hero section and some partners and clients logo to display on the landing page. For the last thing, I also added some information in the footer section. So, this is the final design for the landing page that they used for promotional purpose in their special event.
This is the end of the first phase. The landing page done, then I prepared for the second phase.
The second phase will be focused on how to create a full portfolio website that can show the agency’s works, services, events and stories. The design process is still the same as before, still using the same references but this time will be more comprehensive. There will be 4 main pages that the client requested, they are homepage, works page, services page, and about page. For the events part, will becoming a section on the homepage to make it quicker to discover by website visitors. Then, I will also show you how I made design decision for the structure of the homepage and other page. There were some considerations to decide the page structure, firstly, let see from client’s point of view (the main target visitor of this website). When client need a service, they must be wanted the best service that they could get from a service provider (in this case, agency). So, they need proof of our works quality, therefore, works section will be out priority for the homepage. After they saw our works, as an agency, we need to list the detail of our services that we could offer to them. Then the last important thing was the social proof or testimonials. It could be showing our previous clients that have ever collaborate with us, or what client said about us. I chose to show the some previous clients because this agency have collaborated with some famous brand, so I thought it will be enough.
For the works and services page, I focused on how to display the agency’s works and list down their services. Then, for the about page, I thought I needed to give some description about their stories and mission to tell their prospective clients something more personal about them. In about page, I also showed their team members and a little bit of their background to tell the prospective clients more about whom they will work with.
Before I started designing the prototype, I discussed my concepts and all design decisions that I’ve made before with the stakeholders, so that I got finalizing the concept. After all stakeholders agreed, I started designing the pages. When designing the pages, I also mind about the responsive of the pages, so I applied the responsive design to my design prototype with auto layout feature from Figma. It has a similar behavior with flexbox in CSS, so, it will be easier to be implemented.