Beautiful Creative portfolio website with alive UX
Project Overview
The main goal was to build something that can convey the brand’s core idea within a second. Cocosto design was aesthetic, clean & concise. When the UI goes from Figma to the Web, we have to keep it consistent with smoother user interaction. The client was curious about how he can upload multiple portfolios without any creative restriction. The main challenge was not implementing pixel-perfect design but developing something responsive, fast & can handle sizable high-quality content without sacrificing the site speed and performance.
Project Brief
Develop a Dynamic mobile responsive, creative website with a Dynamic portfolio builder and personalized CMS. Implementation of Fast, Responsive, pixel perfect website as per the design with customized animation and Micro Interaction
Project Name
COCOSTO Marketing Website with personalised admin panel & portfolio builder.
Task
Promotional website, lightweight Animation, Portfolio Builder, Admin Panel
Benefits
Cool Looking UI And Awesome Animation, more then dumb website
Competitors
UX Studio, Clay, cuberto
Audience
Startups, Software Development companies, Web Design agnecies
Duration
28 Days
Technical Requirements
Bootstrap, PHP, GSAP, AOS, JS
User Research & Problem Finding
Discovery Phase brought up some specific areas of concerns, With their specific target audience being people with pretty little time in hand and faster decision cycles (CEO/directors/business owners). We pointed outflow that regularly displayed the work and kept it simple for the maintainer to display their work, which plotted everything around it. We started with a agile approach and divide the work into multiple sprints and iterations.
Interview Questions
- What returns do you want to see as a result of the project?
- What’s the goal of the project?
- What is target persona?
- How will we determine the successful?
Painpoint
- Do not have customisation & flexibility on any platform
- Hard to share & protect the work
- Positioning & Categorisation positions of portfolio
- Complex and time consuming process
- Limited on portfolio listing
- No Creative freedom,
Our Solutions
During the Discovery we had planed a tailer made solution for cocosto. A solution which have aesthetically beautiful User Experience, Fast and easy to navigate.
- Pixel Perfect website with micro interaction
- Animation to narrate story within a second of interaction
- Customised layout solution to display featured portfolio and set position just by dragging
- Personalised portfolio builder can be used to generate multiple portfolios with creative freedom and high performance.
- User Management and analytics
Solution Architecture
It is a general level systems architecture based on the design provided by client
Implementation story
We started with a general level project plan. we broke the execution into multiple iterations and user stories. The main 2 epic was website and admin panel and there milestones were,
Website
- Static Templates
- High-level Animation
- Micro-Interactions
- Dynamic Container
Admin Panel / CMS
- User Management
- Portfolio Builder
- Portfolio Manager
- Account Settings
For the website, we plan to start working on a static implementation of UI. We start working on the screens and create our first draft. Initially, we were not happy with our initial draft, but we landed on a pixel-perfect template after multiple changes and incremental improvement. It was time to create animation & micro-interaction.
- Story animation/moment animation
- Scrolling / revealing animation
- Micro Interaction
- Basic CSS animations
To convey the COCOSTO story, we tried to use the logo itself. As a user lands on the website, he sees the user icon revealing from the logo and sticks to the header section’s top. To achieve this, we used GSAP-Timeline. After finding a perfect timeline, our next task was to make the animation responsive on any screen size. To achieve responsiveness, We use Bootstrap. After some finishing and cosmetic changes, we finally made our first and most crucial UI animation element. With this animation, a user could see what is cocosto within a second after landing on the website.
After completing the header animation, our next part was to display the process differently. We received a media from cocosto which shows their process, like how they start from scratch and end to the final product. The whole video was 4 to 5 sec. We have to cut the video into multiple steps. As the user scrolls, the video segment will play. We tried many methods like jquery plugins, custom JS scripts, and one or two different approaches to achieve this efficiently. In the end, we continue with GSAP + JS + Scroll magic. We place some trigger elements in the DOM. Once a user enters the trigger element, a specific video section will play. The user can not scroll down until the video-section ends. And as he scrolls down, he will see the next segment. So with three scroll triggers, we were able to demonstrate the whole process. Visual it is not complicated as it may sound, but it is tricky if you chat with the developer ;p. Well, it’s a talk for some other day, let’s move on to the next part. We developed many more animated elements to make the website more impactful and full of WOW without compromising its beauty and performance. In the whole project, we extensively use GSAP, SVG animation, and Some basic CSS animation.
After working on animation and interaction, we are at the point where we have a website template with alive spirit & better user interactions. Now it’s time to connect everything and make the website more robust and dynamic.
Back to the initial challenge, the client wants to upload multiple portfolios without compromising creativity. He wants to create a pro folio with a mix of text images, links, and videos in any particular order. As a dev, you may think the best way to achieve this is to reach text editors, but the main issue with these editors is that they downgrade media quality. Initially, we use text editor lib, but we notice that the images have been starched and pixelated. So we had a call with the team and client. During the conversation, We found the client is used to the Behance portfolio builder. We planned to build a portfolio builder, which is like a bechance editor but with customized features.
To make such kind of builder, we divided the work into six backlogs,
- Develop Base UI
- Develop custom DOM-Reconciler inspired by React
- Develop plugin for the editor
- HTML parser
- optimization
- Store to database
After putting in all the handwork, we were able to see something which is exceptionally proficient. The client was able to create multiple portfolios without compromising on creativity, performance, and quality.
After creating a profile builder, we move to our last task, building personalized CMS with features like,
- Make any portfolio as a Featured Portfolio.
- Create tags & category for portfolio
- Adjust the position of a portfolio on the website with drag and drop
- Profile & Account setting
- Website content management
Development stack
Information Architecture
Development cycle was simple, simply back-end is a monolithic php code performing simple crud operations. Main challenge was to handling big images sizes and keeping the website fast irrespective of content. Back-end is while renders the template and dynamic content, front-end JS is responsible for easy content combing
Production Performance
Conclustion
COCOSTO Design studio was pleased with the result. The way the website looks and performs is precisely what the client requires. This project was equally challenging and fun to do. members who are associated with the project feel accomplished and learned tons. Selection for the right technology and its implementations can save money and resources. All technical complexities, when handled under the hood, results in a rich and excellent user experience. With the right value delivery, cocosto was able to generate better business through footfall on the website.