A platform that showcases the arts at UCLA and foster exchange in creative services and content.
Overview
Bruincreate is an e-commerce platform and community curated for both UCLA creatives and those who want to support these individuals. Our platform provides opportunity for artists to sell and get commissions for their work. They are also able to make connections and chit-chat with their fellow artists and buyers. Our goal is to allow for users, not limited to just UCLA students, to discover hidden talent within a community.
Challenge
In this project, I navigated the beginner design team through the user interface and interaction design process, as well as how to use Figma. Together, we analyzed the customer research generated from the marketing team and iterated information architectures based off of users’ needs. I guided and participated in developing from wireframes to prototypes with designers whilst communicating with software developers and product manager to work out different constraints.
The Team
Jodie Chen Christina Cui Trisha Patel Lily Tong
Tools
Figma, Notion, Google Survey, Zoom
My Roles
Design Lead Product Thinking UX Research Information Architecture Visual Design Wireframes Prototype
Timeline
15 weeks
Brainstorm
Challenge
Although many students in the UCLA community are intrigued by the arts, they are not connected to content creators on campus. BruinCreate’s mission is to celebrate the talents of UCLA creatives by showcasing and fostering exchange in their work to any type of audience. We strive to have a simple and action-driven interface.
Our Audience
We want to create a platform for UCLA Creatives who want to publicize their work to the UCLA community or beyond, and anyone who wish to support the UCLA art community.
Our Audience
As per requested from our stakeholders, the direction of this project needed to have an emphasis on e-commerce and exchange of art.
Research
Our goal was to learn about the experiences of the UCLA community and its artists. We also wanted to explore the options of features we want to include in our platform so that we can provide opportunities for artists to gain attention for their work and allow them to make connections with the rest of the community.
Surveys
The goal was to learn about our audience’s habits and experiences surrounding viewing, posting, and buying art. A survey with unbiased questions was sent out to different forums and we received responses from 52 random UCLA students. Was our audience interested in connecting and supporting UCLA artists?
The answers to the survey may be able to help us brainstorm what we needed to incorporate to create a flourishing art community of sellers and buyers.
67% did not feel connected to UCLA artists and creators 83% post their art online platform; Instagram being the most popular choice for artists 85% buy a sort of art from a yearly to monthly basis
73% showed interest in viewing more art and content from the UCLA community
52% voted showed interest in purchasing art from the UCLA community
Competitive Analysis
We looked at several popular social media and selling platforms that our audience utilize as for reference on how the platforms work and how they are differ from each other. We wanted to get good idea of what works well and what we want adopt to unify a supportive community for showcasing and fostering social exchange of UCLA art.
Analysis
Key Experiences
From our research, we pulled out key experiences that we wanted to address and solve with BruinCreate.
Regular student are not connected to creators on campus. Some may only know a selection.
There isn’t a platform specifically to find and support artists of the UCLA community.
A majority of our audience show interest in getting to view art and content from the UCLA community.
Common platforms our audience use have scattered intentions and not strictly for discovering and connecting with artists, as well as being able to buy from them.
Affinity Mapping
After organizing an Affinity Map, we received a clear view of our primary users’ experiences of pains and needs with any type of art platforms they use to showcase and sell their art/services.
By doing this, we were able to synthesize plausible features to help resolve issues our users face on many art-sharing platforms.
The main takeaway is that a simple but centralized platform is preferred to retain user attention and interest to work as, discover, and support artists in their community.
How might we...
Taking consideration from research and analysis, we generated a few how might we statements to turn our insight into opportunities.
HMW
Help users to connect and support with each other from the same community?
HMW
Give users simple and comfortable navigation on our platform?
HMW
Help boost traffic to artists’ artwork posts?
HMW
Organize and optimize unbiased search results?
Solution
BruinCreate is a centralized online community platform that is first promoted throughout the campus. Within the platform we want to implement a standardized space where those who are interested in UCLA arts can easily view, buy, sell, and communicate through one single platform.
What sets this platform apart from others?
On account of the user demographics, we decided to go with a one-community approach where the platform is built specifically to serve and support one community.
There is no other feature to distract them from their goal on the site (sell, view, and buy art). Pushing for only UCLA students to post would reduce the chances of their work being concealed by an algorithm from platforms that get thousands, if not millions of new posts everyday.
Ideation
Feature Highlights
Based off of our user’s needs we narrowed down what we wanted to focus on in our initial design:
Centralized hub catered to UCLA art
Artist, Product, Service Highlights
Simple grid displays with finite scrolling
Unbiased search and filter
Limitations
As the development team were working on the website and how to implement a payment processing system, we realized that if we wanted to launch the website there would bound to have some sort of legal and financial implications.
This could be something we as an student-formed team would have trouble managing.
We decided that if we could not hold nor manage money being sent to and from buyers and sellers, we can have students manage it with payment systems most college students were most familiar with and use: Venmo and PayPal.
Information Architecture
Based off of our user’s needs, we created an information architecture to get an idea on where to start designing for the platform as well as making sense of the website’s flow. We wanted it to be simple and serve only the purpose of art exchange and showcase.
Lo-fi Sketches
As a team, I suggested each member drafts their own idea for the app. My main goal here was to explore the various ways an art-oriented ecommerce website can look like.
After further discussion with the design team and the product manager, I made a new sketch to represent how we envisioned the application to look like.
Mid-fi Wireframes
To get a comprehensive view of our design on web, we made a low-stake mid-fi wireframe.
As we wanted to prioritize the ecommerce feature before anything else. I spent a lot of time going through the wireframe to ensure the essential structure of a successful ecommerce website (where the users are able to buy and sell) is there.
I noticed we were missing a few features essential to conducting exchange in our platform's design.
Additional features needed in the final design:
1. Listing items
To put user product/service out to the market.
2. Order history
To check the status of what users’ customers ordered
3. Transactions
For when users get a sale from their shop
Style Guide
Our team collectively brainstormed what color palette and font would fit the theme of the UCLA arts culture. We voted on more muted tones to give emphasis to the creative and color arts. The font style and sizes were chosen to provide hierarchy and visibility.
Color Palette
Graphic Components
Font Style
Font Sizes
Final design
Our final design is comprised of a simplified experience of art social portfolio and of a e-commerce product.
BruinCreate is an all-in-one community for UCLA creators and art lovers. From selling art to networking with local artists, BruinCreate delivers a safe and supporting space for our wonderful art initiatives.
1. Onboarding
Get straight to discovering new art and artists, the onboarding process was made to be quick and simple!
Onboarding I
Onboarding II
2. Explore
Our main screens are separated in two tabs to highlight the two main categories of art commerce:
Items that are ready to be purchased/shipped
Services and commissions for the seller to fulfill based on request
Explore I
Explore II
3. Item Details
To ease the process of browsing and buying of art, only necessary information is present: call to action of buying and highlighting the artists other works.
Item Details I
Item Details II
4. Chat
Customer or the supporters of artists are able to communicate with each other. This could be encouragement, networking, or a request for commissioning.
Chat
Chat List
5. Checkout and Payment
As stated in limitations, transactions will be held with a third-party payment platform: Venmo and PayPal
This is so that they can regulate monetary allocations and conflicts.
Checkout
Payment Method
6. Editing Profile and Payment Input
This is where user is able to introduce themselves, enter their social media links, and payout methods!
Edit ProfileI
Payment Input
7. Profile Page and Posting
The process of posting is made accessible with a + add call to action button on the mobile version and am “Upload” button
Profile Page
Posting · Mobile
Posting · Desktop
8. Order History
We cannot have a ecommerce platform without a place to store the history of what has been ordered. Within the order details, you can message the seller or rate the item.
Order History
Order Details
9. Transaction Details
Here is where you can keep track of what you have sold. Update your buyers of their shipping status or contact them for further communication!
Transaction
Transaction Details
Prototype
There are two flows to the platform, the customer and the artist thus there are also two prototype routes.
It is my first time planning out and designing for a platform in this scope. Because this is a business to consumer platform, we had to really consider every possible interaction the users might have with each other. It is easy to overlook an interaction that needs to be designed. We need to always think about the interactions between different components and features to create a cohesive platform from scratch.
The importance of differentiating what feature should be the minimum viable product when first starting out. If not followed, it is easy to get off track. This happened to us and we had to strip everything back down to the core to focus on making a functional product first.
Organization is vital to manage new ideas and progress from a multidisciplinary team.
I learned we can do prioritization plotting as part of ideation in future projects similar to this.
If time permitted, I would like to conduct a usability test on our design because we were unable to due to time constraints.
Check out my other projects!
BruinCreate
A platform that showcases the arts at UCLA and foster exchange in creative services and content.
Overview
Bruincreate is a B2C e-commerce platform and community curated for both UCLA creatives and those who want to support these individuals. Our platform provides opportunity for artists to sell and get commissions for their work. They are also able to make connections and chit-chat with their fellow artists and buyers. Our goal is to allow for users, not limited to just UCLA students, to discover hidden talent within a community.
Responsibilities
In this project, I navigated the beginner design team through the user interface and interaction design process, as well as how to use Figma. Together, we analyzed the customer research generated from the marketing team and iterated information architectures based off of users’ needs. I guided and participated in developing from wireframes to prototypes with designers whilst communicating with software developers and product manager to work out different constraints.
Design Lead Product Thinking UX Research Information Architecture Visual Design Wireframes Prototype
Timeline
15 weeks
The Problem Space
Challenge
Although many students in the UCLA community are intrigued by the arts, they are not connected to content creators on campus. BruinCreate’s mission is to celebrate the talents of UCLA creatives by showcasing and fostering exchange in their work to any type of audience. We strive to have a simple and action-driven interface.
Our Audience
We want to create a platform for UCLA Creatives who want to publicize their work to the UCLA community or beyond, and anyone who wish to support the UCLA art community.
Emphasis
As per requested from our stakeholders, the direction of this project needed to have an emphasis on e-commerce and exchange of art.
Research
Our goal was to learn about the experiences of the UCLA community and its artists. We also wanted to explore the options of features we want to include in our platform so that we can provide opportunities for artists to gain attention for their work and allow them to make connections with the rest of the community.
Surveys
The goal was to learn about our audience’s habits and experiences surrounding viewing, posting, and buying art. A survey with unbiased questions was sent out to different forums and we received responses from 52 random UCLA students. Was our audience interested in connecting and supporting UCLA artists?
Understanding the users:
The answers to the survey may be able to help us brainstorm what we needed to incorporate to create a flourishing art community of sellers and buyers.
67% did not feel connected to UCLA artists and creators
83% post their art online platform; Instagram being the most popular choice for artists
85% buy a sort of art from a yearly to monthly basis
73% showed interest in viewing more art and content from the UCLA community
52% voted showed interest in purchasing art from the UCLA community
Competitive Analysis
We looked at several popular social media and selling platforms that our audience utilize as for reference on how the platforms work and how they are differ from each other. We wanted to get good idea of what works well and what we want adopt to unify a supportive community for showcasing and fostering social exchange of UCLA art.
Analysis
Key experiences
From our research, we pulled out key experiences that we wanted to address and solve with BruinCreate.
Regular student are not connected to creators on campus. Some may only know a selection.
There isn’t a platform specifically to find and support artists of the UCLA community.
A majority of our audience show interest in getting to view art and content from the UCLA community.
Common platforms our audience use have scattered intentions and not strictly for discovering and connecting with artists, as well as being able to buy from them.
Affinity Mapping
After organizing an Affinity Map, we received a clear view of our primary users’ experiences of pains and needs with any type of art platforms they use to showcase and sell their art/services.
By doing this, we were able to synthesize plausible features to help resolve issues our users face on many art-sharing platforms.
The main takeaway is that a simple but centralized platform is preferred to retain user attention and interest to work as, discover, and support artists in their community.
How might we...
Taking consideration from research and analysis, we generated a few how might we statements to turn our insight into opportunities.
HMW
Help users to connect and support with each other from the same community?
HMW
Give users simple and comfortable navigation on our platform?
HMW
Help boost traffic to artists’ artwork posts?
HMW
Organize and optimize unbiased search results?
Solution
BruinCreate is a centralized online community platform that is first promoted throughout the campus. Within the platform we want to implement a standardized space where those who are interested in UCLA arts can easily view, buy, sell, and communicate through one single platform.
What sets this platform apart from others?
On account of the user demographics, we decided to go with a one-community approach where the platform is built specifically to serve and support one community.
There is no other feature to distract them from their goal on the site (sell, view, and buy art). Pushing for only UCLA students to post would reduce the chances of their work being concealed by an algorithm from platforms that get thousands, if not millions of new posts everyday.
Ideation
Feature Highlights
Based off of our user’s needs we narrowed down what we wanted to focus on in our initial design:
Centralized hub catered to UCLA art
Artist, Product, Service Highlights
Simple grid displays with finite scrolling
Unbiased search and filter
Limitations
As the development team were working on the website and how to implement a payment processing system, we realized that if we wanted to launch the website there would bound to have some sort of legal and financial implications.
This could be something we as an student-formed team would have trouble managing.
We decided that if we could not hold nor manage money being sent to and from buyers and sellers, we can have students manage it with payment systems most college students were most familiar with and use: Venmo and PayPal.
Information Architecture
Based off of our user’s needs, we created an information architecture to get an idea on where to start designing for the platform as well as making sense of the website’s flow. We wanted it to be simple and serve only the purpose of art exchange and showcase.
Lo-fi Sketches
As a team, I suggested each member drafts their own idea for the app. My main goal here was to explore the various ways an art-oriented ecommerce website can look like.
After further discussion with the design team and the product manager, I made a new sketch to represent how we envisioned the application to look like.
Mid-fi Wireframes
To get a comprehensive view of our design on web, we made a low-stake mid-fi wireframe.
As we wanted to prioritize the ecommerce feature before anything else. I spent a lot of time going through the wireframe to ensure the essential structure of a successful ecommerce website (where the users are able to buy and sell) is there.
I noticed we were missing a few features essential to conducting exchange in our platform's design.
Additional features needed in the final design:
1. Listing items
To put user product/service out to the market.
2. Order history
To check the status of what users’ customers ordered
3. Transactions
For when users get a sale from their shop
Style Guide
Our team collectively brainstormed what color palette and font would fit the theme of the UCLA arts culture. We voted on more muted tones to give emphasis to the creative and color arts. The font style and sizes were chosen to provide hierarchy and visibility.
Color Palette
Graphic Components
Font Style
Font Sizes
Final design
Our final design is comprised of a simplified experience of art social portfolio and of a e-commerce product.
BruinCreate is an all-in-one community for UCLA creators and art lovers. From selling art to networking with local artists, BruinCreate delivers a safe and supporting space for our wonderful art initiatives.
Onboarding I
Onboarding II
Explore I
Explore II
1. Onboarding
Get straight to discovering new art and artists, the onboarding process was made to be quick and simple!
2. Explore
Our main screens are separated in two tabs to highlight the two main categories of art commerce:
Items that are ready to be purchased/shipped
Services and commissions for the seller to fulfill based on request
Item Details I
Item Details II
Chat
Chat List
3. Item Details
To ease the process of browsing and buying of art, only necessary information is present: call to action of buying and highlighting the artists other works.
4. Chat
Customer or the supporters of artists are able to communicate with each other. This could be encouragement, networking, or a request for commissioning.
Checkout
Payment Method
Edit Profile
Payment Input
5. Checkout and Payment
As stated in limitations, transactions will be held with a third-party payment platform: Venmo and PayPal
This is so that they can regulate monetary allocations and conflicts.
6. Editing Profile and Payment Input
This is where user is able to introduce themselves, enter their social media links, and payout methods!
Profile Page
Posting · Mobile
Posting · Desktop
7. Profile Page and Posting
The process of posting is made accessible with a + add call to action button on the mobile version and am “Upload” button
Order History
Order Details
Transaction
Transaction Details
8. Order History
We cannot have a ecommerce platform without a place to store the history of what has been ordered. Within the order details, you can message the seller or rate the item.
9. Transaction Details
Here is where you can keep track of what you have sold. Update your buyers of their shipping status or contact them for further communication!
Prototype
There are two flows to the platform, the customer and the artist thus there are also two prototype routes.
It is my first time planning out and designing for a platform in this scope. Because this is a business to consumer platform, we had to really consider every possible interaction the users might have with each other. It is easy to overlook an interaction that needs to be designed. We need to always think about the interactions between different components and features to create a cohesive platform from scratch.
The importance of differentiating what feature should be the minimum viable product when first starting out. If not followed, it is easy to get off track. This happened to us and we had to strip everything back down to the core to focus on making a functional product first.
Organization is vital to manage new ideas and progress from a multidisciplinary team.
I learned we can do prioritization plotting as part of ideation in future projects similar to this.
If time permitted, I would like to conduct a usability test on our design because we were unable to due to time constraints.
.png)
.svg)
