Visualizing brand identity through web design
My tasks
UI/UX design
Interaction design
Front end development
Softwebo website preview
When working for Softwebo (design agency), I have been given the task of redesigning and coding new agency website. Softwebo is a Polish based design agency, which specializes in creating digital products for pharmaceutical companies.

Problem formulation
Before starting to design new layout of, I had to review what has to be kept from the old website. At the same time, I had to consider which functions should the website have. Overall, the main task I had, problem that had to be solved, was making the website modern, playful, eye catching, while still maintaining simplicity and good user experience. Most of the visitors are going to be marketing representatives, working at pharmaceutical companies (Softwebo’s clients). Based on the research and experience, these people are used to simple “classic” design websites.

I started my prototyping process by analysis of the original one. I divided it into three media queries (mobile, tablet, desktop) and subdivided sections within them. As a result, I was left with only vital parts of the website:

• header - opening, that should grab attention and serve “call to action”, in this case contact button
• services - short, visual description of what can the agency offer to a client
• projects - set of previous projects, showcased in a grid of images
• clients - trust building “gallery” of brands’ logos, with whom Softwebo previously worked
• footer - site map, seo description and contact information
prototype sketches
As soon as I had the details, I started sketching possible layouts. Since, I could not really decide on one design, I created several variants for a “section component”. Most of them ended up in the final prototype, where they were tested and improved.

A/B testing
As I have mentioned earlier, there were several propositions for a components design. That is why, final variants had to be chosen through testing. The simplest and most unambiguous results were delivered through “A/B testing”. Below are some of the versions, that were compared.
prototype ab test header
In this case, the left variant has been picked by the users. Most of them argued that it is a lot easier to read its content, while still being eye catching.
prototype ab test services
When it comes to “services block”, left version has been picked. It has been described, by the testers, as more visual and straightforward.
prototype ab test projects
Once again, the left option has been picked. Right variant seemed to be overwhelming and hard to get a quick overview.
prototype ab test clients
Despite the fact that right variant is a lot more minimalistic, it was not picked by the users. Right one had a lot more authority in their eyes, due to use of testimonials.

Final design
eSkate Lights website preview on a 3d macbook mockup
eSkate Lights website footer eSkate Lights website menu eSkate Lights website add to cart eSkate Lights website menu Softwebo website other products Softwebo website footer
Overall, the final design has been crystallized through development process. After coding the website and connecting it to content management system (in this case Wordpress), I was able to appreciate its near finished form.
One of the aspects, that I’ve decided to add were animations. They were needed in order to make the website more lively and interactive. I treated them as extension of user experience. Animations were reassuring users that they are heading into the right direction, while sparking curiosity, revealing one thing at a time.
Softwebo website audit
Before delivering the website, I first needed to optimize it first. This meant that had to take care of four core optimization aspects:

• performance - how fast the website loads
• accessibility - makes sure that the website is “easy to use”
• best practises - checks if the website follows web design standards
• SEO - is it going to be easily discoverable by search engines
In the end, I have managed to receive high score (as seen above) form Google’s Lighthouse Report - one of the most recognised auditing tools for websites. Full report is available in the link: Lighthouse Report
Last, but not least I wanted to mention a video overview, that has been initially hidden. It provides a short, visual description on what Softwebo is doing. At the beginning, it was supposed to be put in the header. Unfortunately, after a few rounds of testing, it has been discovered that it might be too distracting for the users and discouraged them from browsing the website.

My design has not only been proven by auditing tools, but also web design specialist. I have managed to receive four awards, for Link to awards
Special Kudos award
UI award UX award inovation award

Overall, I am highly satisfied with the final outcome. I have been able to fulfill my task of creating representative, agency website, that is eye catching, easy to use and optimized for the modern web.