Case study, Design & build

UI/UX Design Branding Webflow

A modern directory of Educational Videos and Podcasts from the most Influential People in Georgia

Step 1

Mind map

Before designing and building anything, we must first establish what we needed for sure on the site. We achieved this by creating a mind map on Miro. This allowed us to gain valuable insights as to how we were going to implement each element.

Step 2

Prototype

Now that the idea of an MVP was clear, it was time to turn that into something that fits the web. For this phase we used Figma, to design the lo-fi (low fidelity) screens for each page.

Step 3

Design

Initially the idea was to design a light-themed layout, based on a low-tone contrast of white and cream. However upon several revisions we came to a conclusion: we wanted the site to feel more powerful and "slick". We went for a dark overhaul, focusing on a wine red accent this time — that was it!

Step 4

Development

To build the site we used Webflow. It allowed us to build the hi-fi designs of each page in just 2 days. The site could now be viewed through the staging link, however it had no brains yet -- it wasn't really doing anything aside from looking good. We had yet to implement CMS and third-party libraries.

Step 5

Webflow CMS

Webflow's CMS solution allowed us to greatly simplify the management of each learning material. Now the client can, at any given time, create or update any entry in complete and full autonomy.

Step 6

Finsweet Attributes

Simply put, Finsweet Attributes works like a charm on the Webflow environment. In this case, we used the Filters solution, which allows for the learning materials to be filtered in a number of ways. We didn’t have to write a single line of code for it, as we only had to write, well… attributes.