YourCloudPost AI
Team
Robin Stoebe - Project Manager
Chelsea Kim - UX/UI Designer
Karen La - Web Developer
Gavin Nguyen - Web Developer
Calvin Phan - AI Developer
Tools
Figma
Trello
Miro
Visual Studio Code
Timeline
January 6 -
March 21 2025
Introduction
Evan B. Stone, our capstone project sponsor for IN4MATX 191A, had a vision of leveraging AI and his editing skills to help people and businesses market their product through social media. Evan is an award-winning adventure filmmaker known for his work in the hit show "Expedition Unknown".
Evan envisioned YourCloudPost AI to be a website that caters towards businesses and individuals by extracting their information through the consultation process and helping them build their social media through Evan's editing skills and the help of AI.
Here's a little more about Evan B. Stone's workflow process:
Who we envisioned our users to be
Since the whole premise YourCloudPost AI is to offer editing services for individuals and businesses, it would make sense that our target audience would be those who may have established their business/product but may lack video editing and marketing skills. These users may be from 25 - 60 years old and desire to market their brand and captivate an audience with their social media.
Here are some personas in which we envisioned our target users to be:
Websites that inspired YourCloudPost AI
Our sponsor Evan B. Stone gave us a list of websites that use AI to edit and generate videos:
Why invideo AI and Sora
Our team adopted several features from invideo AI and Sora, websites that our sponsor wanted us to take inspiration from. Our sponsor wanted YourCloudPost AI to have an AI generator similar to the one from invideo AI and Sora.
Our sponsor liked that the AI workspace for both websites were a dark version, which appealed to their visual eye. Our sponsor wanted us to grab the user's attention with the AI generator and have them pay for the premium version and consultation, similar to invideo AI and Sora.
What do our users want and how/what do we design?
Our team made over 120 user stories to help assist the process in understanding who are users are, what they really want from our website, and how we would deliver that to our users. Here are some of the user stories we deemed the most important:
1. As a user, I expect my account data to be retained after I log out.
2. As a user, I want the sign-in with Google authentication.
3. As a user, I want to sign in with Microsoft authentication.
4. As a user, I want a button to log in/sign in with Google because it's fast, secure, and saves time.
5. As a user, I want to log in with email because it gives me a straightforward way to access my account.
The flow our user will take
Our sponsor wanted the website to market his skills and draw the user in to get a consultation with him. We put the free AI generator in the homepage to entice the user to get a consultation. The process to generate a video with the free AI generator will be short and simple to make it easier on the user. There will be buttons on the navigation bar that will take the user to the Plans Page, About Page, and Blog. We added these pages because it would further help the user understand what the consultation entails, as well as Evan B. Stone's skills.
Color palettes set the mood of a website
Colors help bring out the mood of an image, website, app, etc. Colors have meaning to them so we wanted to make sure that our sponsor understood this and would provide us with colors that we could use to help communicate professionalism and a modern feel to it. Our sponsor, with the help of AI, generated these list of colors:
🎨 Warm Beige (#E4C59E) – Used for background boxes; soft, neutral, and professional.
🎨 Deep Gold (#D4A373) – Complements beige for a refined, warm contrast.
🎨 Rich Brown (#6D4C41) – A deep, grounding color for text and accents.
Accent Colors (Call-to-Action & Engagement)
🎨 Soft Lavender (#B19CD9) – Adds a modern, creative touch; great for highlights.
🎨 Muted Blue (#647D91) – A calm, professional color that balances warmth.
🎨 Forest Green (#3C6E47) – Used in checkmarks; conveys trust and growth.
Neutral & Background Colors
🎨 Off-White (#F8F4EC) – Clean and soft background color for readability.
🎨 Warm Gray (#D9D1C7) – Subtle contrast for text areas without being too stark.
The final features we will include in YourCloudPost AI
With the accumulation of our user research and communicated with our stakeholders, we came up with several features that will be added to our website:
✅ Free AI Generator - this will allow the opportunity for users to try the video editing feature with no financial commitment or long-term obligation.
✅ Consultation w/ Evan B. Stone - users will go through a process to help Evan understand the social media business and how they want the videos edited.
✅ Plans Page - users will see the features of each free and paid version of the website.
✅ About Page - users can learn more about Evan B. Stone and understand his workflow process.
✅ Blog Page - users can see the blog posts that Evan uploads for entertainment and to know Evan's thoughts a bit more.
✅ Sign In/Sign Up Page - users will be able to sign in through their Google of Microsoft account or manually.
Initial designs
With the inspiration our team gathered, we used features from those website for YourCloudPost AI:
What Our Sponsor Liked
Our sponsor liked the AI generator below the landing page and wanted it implemented in his website. He appreciated the creativity that went in creating the AI generator for this prototype. He also liked the colors and said it was visually appealing. Our sponsor's team mentioned they would like to see a dark mode version of the website, so we implemented that next.
High fidelity
Homepage
Our sponsor wanted two buttons on the landing page that could take the user to the consultation or free AI generator. I added a video on the right of the landing page to have the users get to know Evan B. Stone's AI editing skills a bit more. We added a reviews page because our sponsor wanted to draw the users in to working with Evan.
Sign In
About Page
Our sponsor wanted an about page of more information about him. We wanted to make it personal and so users can understand Evan and his workflow process a bit more.
Plans Page
Consultation Intake Form
Our sponsor stressed the importance of an intake page because he wanted the main focus of YourCloudPost AI to be the consultation with him. We used the questions he gave us to create an intake form page.
ChatBot Assistant
Our sponsor wanted a chatbot assistant to help the users fill out their intake form so we placed a static chatbot assistant button (shown in the consultation intake form page) and when clicked takes the user to the chatbot assistant.
User testing
Both of our users for our usability test were able to complete more than 90% of the tasks. They described the website as clean, visually appealing, and easy to use. One of the users said the intake boxes were too small for the input the user would make. In regards to this, we extended the intake boxes. They both liked the design of the website and said it was functional.
Reflection
Next time I would do more user research by making surveys and getting to know our users more. I would also make more low-fidelity wireframes to really solidify the functionality and information architecture.
Through doing this project, I understand the importance of cross-collaboration with the developers because having them included in the design process will make it easier for them to develop the website.
I'm also proud of myself for dabbling with CSS and HTML. I practiced these tools to create the landing page and AI generator of the high fidelity prototype.
I'm grateful for working with my sponsor Evan B. Stone. It was really interesting and eye-opening to get to know his thinking process a little bit more. I learned a lot on team dynamics and designing a website for stakeholders. This capstone project class put me in a real-world project experience that really pushed me to better my skills.