Redesign: Content feature

Company: Quicksite guru

Role: UX/UI designer

Tool: Figma

Length: 2 months

Team: David,Rayyan,Meilani,May and Katharine

Completion Status: 85% complete

Year: 2024

Overview

User flow

Quicksite Guru is a platform that lets users create websites using AI technology and QSG templates. Users can customize content with the Fetch feature, including text, SVG, and assets. Additional content can also be added by placing the provided code in the instructions into the code feature. I will showcase the redesigned Text feature for this project.

About Us

Design Process

Step 1: Empathize

Quicksite Guru has a product feedback channel in our company to allow people to give feedback. I have decided to collect data in this area,interviewed ,and conducted usability testing with developers who are the main users, in order to understand their behavior and define the next steps.

About Us

Step 2: Identify problems

I went through the feature step by step to find any issues and then shared my findings with the team.

About Us About Us About Us About Us About Us About Us About Us About Us About Us About Us

Step 3: Goal &Strategy

I identified a goal that aligns with our challenge and used a strategy that immediately resolves it. I also utilized reusable components to save development time. About Us

Strategy

About Us

Step 4: Design

I use design principles in the content feature, and my team redesigned the design system as well as communicated with the developer to make sure everything is feasible to create.

About Us
About Us About Us About Us About Us

Step 5: Final Outcome

I implemented the design changes based on the feedback received and walked the team through the updated flow, ensuring everyone understands the improvements and how they enhance the user experience.

Step 1: First page of this feature

About Us

Step 1.1: After clicked the + to add content

About Us

Step 1.2: After clicked Update from HTML

About Us

Step 2: Searching content

About Us

Step 3: Edit content

About Us

Step 4: Add to Code Editor page

About Us

Step 6: Test

We conducted usability testing, and 8 out of 10 users understood and could use the product.To improve further, we plan to add a tour guide or video tutorial for better platform navigation.

About Us

Project Reflection

Skill Development:

-Enhanced my design skills and proficiency with Figma.

-Learned how to use design systems with a team to ensure design consistency.

-Gained experience collaborating with developers for smooth handoffs.

-Improved ability to analyze usability testing and enhance product performance.

-Developed skills in balancing user needs with business goals.

Gratitude:

The project's progress has been greatly enhanced by the invaluable feedback from my team. Their guidance on UX/UI and design specifics has been essential in perfecting the application design. I am especially grateful to Quicksite Guru for granting me the opportunity to unleash and showcase my creativity throughout this project.

Projects

Design System Project 1

Design System Handoff

This project helps developers implement Tailwind CSS designs with clarity and consistency, ensuring a smooth transition from design to code.

Tools: Figma

Read More
UI/UX Project 2

App Dashboard Design

Delivered a user-friendly, visually appealing dashboard that improved website data analysis.

Tools: Figma

Read More
Web Development Project 1

Digital Markrting Agency:A Responsive Landing-Page

Created a dynamic, customizable website template for Quicksite Guru, tailored for digital marketing professionals seeking a modern, flexible solution.

Tools: Figma,Tailwind CSS,and JS

Read More
Web Development Project 2

Organic4U:A Responsive Landing-Page

Developed a single-page website for promoting organic food, demonstrating my expertise in Figma, TailwindCSS, JavaScript, and responsive design.

Tools: Figma,Tailwind CSS,and JS

Read More
UI Design Project 1

Redesign: The Pot Project website

Redesign UI to enhance user experience by simplifying content and implementing a new design system to meet WCAG standards.

Tools: Figma

Read More
UI Design Project 1

Landing Page for Posies website

Design a responsive landing page for a flower bouquet service, showcasing bouquets and their meanings with an elegant, user-friendly layout.

Tools: Figma

Read More
UX Research Project 1

Nice Night Application

This app aims to enhance people's experiences in pubs and restaurants, making them more enjoyable and safe.

Tools: Figma

Read More
Graphic Design Project 1

Graphic Design: Pet Food Branding

This project showcases a series of social media posters that highlight my skills in graphic design and illustration

Tools: Adobe illustrator

Read More