Design of a competitive website: Lisa's business
Landing page - Commercial project
The "Fox Show" team is a group of professional animators offering all sorts of programs in Tomsk (Russia)
and its region.
Liza is the creator and director of the animation group who wanted to turn her vision of "creating bright, fabulous and high-quality holidays for children" into a competitive website that will attract more clients.
Additional services included Taplink, logo re-design, business cards, and catalog creation.
The main focus was to create a clear landing page where you can easily find all the needed information on the programs, available characters, and services provided. The design should be attractive and stylish, and able to beat the main competitor's website in both the look and functionality.
My role
My role, for this project, was to:
-
support the analysis of the competitors,
-
design parts of the landing page,
-
support the development in Tilda (mainly creating animations like the bubbles effect or researching some more specific features that required some coding or additional work).
​
Liza wanted us to focus on the UI and development side of the project so aside from competitor's analysis, no additional UX research was made. Although there is no full analysis of the target market, we still collected general information about her existing customers and the clientele she wanted to attract in the future.
Analysis of the competitors
For the analysis of the market, we selected 10 direct and indirect competitors of Liza. We analyzed the visual aspects, website structure and content, features, the presentation of their unique value proposition (UVP) as well as the general impression and feeling the website gives to a visitor.
​
The main insights we implemented from this research were:
-
having the prices directly displayed on the website
-
the tone of the text used was affectionate and diminutive to make it relatable to parents as the main audience
-
use of animations as focus points
What clients THINK they want VS what they ACTUALLY need
One of the main challenges of this project was navigating between what the client think they wanted VS what was best for their website and her customers. ​
​
Liza provided us with materials from different websites, competitors and non, which she liked and wanted to see implemented on hers. The problem with copy-pasting was:
-
it didn't look original
-
it didn't stand out from the competitors which was our primary goal
​
To overcome this obstacle from the beginning, we offered Liza two options:
-
examples of design based on her request so that she can easily visualize what her request looks like also compared to her competitors
-
what we envisioned based on our design strategy and market research
UI Design:
The logo
After we had a clear vision of what Liza wanted and how competitors branded themselves in the market, we worked on bringing to life the "Fox Show" website.
The first step was to redesign the logotype. For this part, we collaborated with a graphic designer. Liza in Russian has the same pronunciation of the word fox, hence the name of the studio and icon of our logo. We created different versions that can be applied both on online and offline material and gave the image a more modern and clean look.
The colors & font
The color palette chosen was based on several factors such as the new logo, the material already on their Instagram page, and the color palette of a competitor our client particularly liked (pink pastel palette tone).
Orange is the primary color. Not only is the color of a fox, but it symbolizes optimism, happiness, enthusiasm, and youthful connections which seems a perfect message for a kid animator studio. As the fox is connected to many fairytales, we chose a complementary color that suggests royalty and nobility, hence the purple.
​
For the font, we were looking for something modern, fun, and playful to reflect the brand. The final choice was Gooseberry.
.png)
A new feature:
Taplink
Taplink is a 1-page website mainly designed for mobile phones.
The link to the page is usually placed on the business' Instagram/Telegram etc. It contains links to the social networks and main sections of the website as well as any other important information and contacts.
Designing the Landing page & its Adaptives
The structure and content of the website were developed based on the analysis of direct and indirect competitors of the client.
The design aimed to attract attention, but at the same time stay simple and clean providing an overview of the most popular available characters.
The animations were added only to the spots that needed most of the visitor’s focus. Loading speed being slowed down by animation was also taken into account.
