Background
Versall Inc. is a creative digital product design and development company that was founded by my business partner and me in 2023. Versall started by offering creative marketing-related services, along with web and software design/development, including branding and visual design.
Team structure
Brand identity development was done by me with feedbacks from our team. Our responsive website was done by two developers, one copywriter and one graphic designer that joined later for both website completion and social media contents.
My Roles & Responsibilities
I had a broad range of responsibilities as a generalist designer in a new small business. I designed Versall's brand identity, developed a consistent format for social media materials, and a unique responsive website. Throughout the design process, I had to communicate frequently with the developer team and prepare a close-to-final prototype for them to implement everything precisely. Other than the research and design process, I also created contents for the website such as mockups, motion designs and videos.
Brand Identity
Sketch
Implement
Final Design
The logo mark was designed based on the idea of the name. The name Versall comes from the word Universal and was also formed based on the idea of being “Versus All (others),” which signifies uniqueness or, in other words, the quality of being particularly remarkable, special, and distinctive. This concept was executed in the logo mark using the circle, which stands out of the lines. The circle also represents universality by overlooking the Earth. The goal was to have a conceptual logo that aligns with the mission of the company which is technology-related services.
Colours and Typography
Versall's primary colour is Jordy Blue, which is a variation between light blue and purple. Here are some of the meanings behind our brand colour:
Trustworthiness | Reliability | Professionalism
Wisdom | Intelligence | Knowledge
Dependability | Consistency | Stability | Predictability
Effective Communication and Clarity | Calmness and Serenity
Versall uses Greycliff CF, a free font for web and print. It contains 9 different weights and italic forms for each weight, which will not be frequently used.
Website Design
Versall website was one of my most challenging and fun projects so far. Since there's a huge competition among digital marketing and web design companies about who has the best website, as a new company, we wanted to come-in strong. The unique design of Versall's website stands out as the reputation of the company, and has a lot to say with the storytelling techniques I applied using the interactions all over the website.
This website was designed for the main audience of the company who are mainly younger business owners between 20-50 who are looking for creative solutions and unique innovations.
Framework and Process
The design framework we chose to work with was "The five elements of UX design". These five elements are: strategy, scope, structure, skeleton, and surface
Strategy ▼
The bottom layer is strategy, where I laid a foundation of my design goals. These goals were based on our target audience (user needs) and the business objectives for the website and offering services.
Scope ▼
The next layer is scope, where we determined the type of product we were building. At this point, I considered the kind of features and contents we wanted to include in the website.
Structure ▼
The middle layer is structure. Here, we figured out how to organize the design and contents and how we want users to interact with the website. Processes like Userflow and Sitemap were done in team meetings during this stage.
Skeleton ▼
The skeleton is the layout of the product. the skeleton layer details how the design works – and like a skeleton, users won’t directly see its inner-workings. This part was mainly discussed with the developers.
Surface ▼
The top layer, surface, is how the website looks to the user. The surface represents the interface that users view and interact with. I used Figma to design and prototype the website in this stage.
Motion and Interaction Design
Challenges + Solutions
One of the major challenges I had during this project was making the responsive version for mobile and tablet sizes. Since I began designing the desktop layout, after finishing mobile wireframes, it was a challenge to apply the similar website functionalities/interactions in a mobile-friendly format.
We ended up having several group meetings, finding different solutions and making usable prototypes so we can test it with users and stakeholders and get feedbacks. Several interactions were designed for mobile but the other issue was the implementation and coding them in a way that they work perfectly on a mobile device. Our developers spent more than 3 weeks creating a high-performance website with all the interactions and contents we had designed and approved. Versall website was finally developed using Next.JS and several custom React-based frameworks on May 2023.