This is my submission for Webflow's Maker Day, a 24 hour remote design-a-thon aimed at creating a working prototype.

The entry is submitted for 5. Portfolio or Side Project category.

Inspiration

SaaS Study Group is an existing community of individuals who share the interest of the SaaS industry. For Webflow's Design-a-thone, I've decided to create an onboarding website for the public. Since SaaS(Software as a Service) is all about software, the visual style was inspired by the old computer interface, characterized by pixelated icons and neon highlight colors.

What it does

The website introduces various information about the study group, including ongoing events (free webinars & member-only workshops), member profiles, and other community channels (Open Chat, etc,). As it is an onboarding site, it also needs to lead non-members to sign up and to allow members to sign in.

How I built it

I've taken following design-to-execution process.

  1. Based on the community member's feedback already collected, the key features are narrowed down and MVP is scoped out.
  2. Initial low-fidelity wireframes are sketched out using pen and paper.
  3. In Figma, Design Systems and components (buttons, types, etc.) that are developed in alignment to the brand's Style Guide.
  4. Using the Design System I've previously built, the wireframe are designed into higher fidelity mockup in Figma.
  5. Key components are exported from Figma to be imported into Webflow multimedia.
  6. Site is fully developed in Webflow, responsive in Desktop, Tablet, Mobile environments.

Challenges I ran into

Some of the challenges I ran into:

  1. Not having enough time to explore Webflow's CMS tool. This could have been useful towards member and event database.
  2. High learning curve to master Webflow (It was my first time developing with Webflow).
  3. Some sections that I initially designed to develop had to be left out due to the time constraint.
  4. Configuring the layout. Webflow's section component was defaulted at 960px width and unable to be enlarged. My ideal width size was 1000px+, so I used a div component to built my own.

Accomplishments that I'm proud of

  1. A fully loading site with the intended key visuals.
  2. A fully responsive website that works in all Desktop, Tablet, Mobile environments.
  3. Myself taking a lead in end-to-end process, from ideation, design to front-end development.

What I learned

As it is my first time using Webflow, it is quite powerful to have the ability to visualize html/css features as modules. Learning to master CMS feature would be a huge advantage for me as a web developer.

In regards to the scope of the project, my MPV--retrospectively--could have been leaner in order to utilize the 24-hour production time better.

What's next for SaaS Study Group Site

To be a fully served onboarding website, it would need a number of updates. First, some of the missing sections need to be developed. Then, the event and member database need to be integrated into Webflow's CMS. The sign up & log in flow also must be developed as well; I am thinking of using MemberStack, Zavier, AirTable to actualize the onboarding flow without hardcoding.

Built With

Share this project:

Updates