BEAU

Time Scope:
Three weeks
Members:
Thanh, Beck, Brenda
My Role:
UX / Visual Designer
Tools:
Miro, Figma, Trello, photoshop.
Deliverables:
High-fidelity figma prototype, presentation slide deck.

For this assignment, my team took on a new challenge by creating a platform that connects artists and non-artists in order to appreciate and create eco-friendly art. We created Beau (Bettering the Environment through Artist United) in hope of teaching art enthusiast the meaning of art that surpasses what is visually being represented. Through Beau, our team also want artists to be more mindful of waste materials when creating work.

Introducing Nathan Wu
A 30 years old bi-racial artist from San Francisco. Growing up in a big city Nathan witnessed a huge problem with pollution around him so Nathan decided to dedicate his craft to fight against global warming. Nathan want to find a platform where he can connect and share his work with other who shares the same interests. However, he thinks that mainstream platform such as Instagram, Behance, Pinterest are somewhat superficial and you only get notice if your work looks good.
Our team originally started out with Nathan as our based proto-persona because we were only thinking about artists but I soon realized that the site can also benefit those who aren't artists. I thought that the effort to fight the environment should be everyone's responsibility and not just artist. Although non-artist wouldn't be able to share professional work through the site, however, they can use the site for inspiration and learn how to do eco-friendly art project!. I ran the idea by my teammates and we all agreed to include a second proto-persona Allen Whitman. But for a sense of focus we'll be using Nathan as our base proto-persona.

Research

By analyzing our proto-persona our team came up with 2 set of questions that we used to interview artist and art-enthusiast in order to understand how these two group perceived art and global warming.

Affinitiy Diagram
After categorizing our findings into an affinity map, our team found that:
  • Sustainable materials are often more costly and hard to find, (often making it inaccessible to low income groups)
  • Artists aren’t too mindful about sustainability when making work although they do put in the effort.
  • There’s a disconnect between artists and non-artist understanding of art.
We messed up during this process because like I said above, we only thought of artists as a potential use for the site so we only made interview questions aimed for artists. However, as soon as we realized we needed a new proto-persona, we also went back and came up with 15 interview questions that we used on art-enthusiast. We were pretty behind during this part because we couldn't get any data until 2 days later which is very precious since we only have 3 weeks.

Introducing Alexander

Alexander is a hardworking father who wants to live a more natural lifestyle, and reduce his impact on the earth. He finds inspiration while smoking marijuana, and wants to work towards the de-stigmatization of weed. In addition to, he also wants to take action to help the environment, he dedicates his art to inspired other artist towards being more sustainable. He wants a platform to showcase his sustainable artwork while teaching others how to develop their artwork.

Problem Statement

There is no resource that provides information on sustainable and eco-friendly art products as well as practices, therefore artists struggle in locating the materials that they need, in addition to discovering practices to aid in their creation of sustainable artwork. How might we provide a service that can assist art enthusiasts to produce, discuss, and connect with others over sustainable and eco-friendly art? We believe that by making a platform to share and network about sustainable art and practices not only with help raise awareness about current environmental issues but also join together a potential community of like minded enthusiasts.

Ideation

Then we start creating Alexander's user story in order to visualize of his struggles and how BEAU as a platform can help him with it.

Through his user story we can see that he's inspired through the use of mirajuana but doesn't know where to share his work/ideas. He also want to share his work for people who cares! He struggles was solved when he discover BEAU and got connected with individuals who share the same cause.
Our team wanted to be inclusive so we added a little personality to him by having him as a mirajuana user. We weren't sure how it would play into our story but it started to connect when we put it together! We figured that since Alexander gain his inspiration through the use of mirajuana which makes him feel more connected to the planet.

User Flow

We started out our userflow at the home/start page and made it possible for user to view projects without an account. We hope that this will ignite an inspiration within our user to want to learn more and be apart, then they can decide on joining. But if they don't they can still use the site as an information source about all things eco-art!
Our user flow went through a couple of iterations because we totally forgot to create the steps necessary for a user to submit their work. After creating the prototype, I realized that these steps were missing so I took the liberty to go back and rework the user flow.

Prototype

Based on the user-flow, our team figured out the main pages and decided that each person come up with their own sketch with the best one being the one that we will use. Luckily, the team liked my sketch and we went with it!
While working on the sketch for BEAU, I wanted to include some element of nature such as leaves on certain pages, however, I didn't want to overdo it so I only include it on top on each page. For the overall design, I want to keep everything simple but also interesting so people wont get bored. I wanted to keep the homepage tradition with a carousel on top presenting new projects/ideas and an infinite scrollable grid below it. The main project information page will consist on lots of visuals accompanied by hide and show text to keep the page less busy. The about page is also kept tradition with some design elements. The material page is also keep tradition in a grid and manage by a filter to keep information organized.

First iteration

Based on the sketches, our team divided up the work and created our first mi-fi iteration with figma and proceeds to test our iteration. A few things that we've found through our test are.

  • The about page lacks information and would be nice to have more content like pictures od team members? mission statements/purpose?
  • filter options could use some work adding more options and changing the default option for a particular artwork to "all" so it doesn't seem like the artwork are being ranked in a certain way.
  • is there a way for artist to be contacted or sell their own artwork?
We were able to gather very useful data through our user testing and have used those inputs to make major improvements for our next iterations! The only challenge we had was, our support pages such as project submission have not been build therefore we couldn't test the submission process. However, thanks to this we realized we NEEDED project submission page to complete our user flow!

Style Guide

Colors
Type-face
Logo

When deciding on colors, our team agreed on a color scheme that represents nature. We also didn't want to overdo it with the color green so we decided to add some accents colors of orange, yellows and grays. These colors not only go well with the dark forest green but also create an area of focus to certain elements such as buttons.

Our typeface were based on our user analysis as well as our own judgement. Our team known first hand that we wanted a rounded san-serif font to create a sense of welcoming and friendliness but there were too many san-serif font to choose from. So we turned to our competitor analysis and from looking at site such as Behance. We like the use of Helvetica on these websites and decide to include it.

The logo was my idea, it came to me while creating assets for the website. Part of the logo is a pencil which traditionally represents drafting/sketching/ creating. At the end of the pencil is a little sprout representing new growth/nature. Combined the logo represents the message of "the start of a new growth begins with creating".

Second iteration

With testing from our first iteration, our team proceeded to create the second iteration with the changes in mind and as you can see there are some major overhaul that we did on some of our pages and hey are:
  • We took away the top carousel for our homepage and make an infinite scrollable grid just like a Pinterest page. We think that this way we can get user to start exploring right away!
  • For our about page we've added a "meet the team" section where we present images of each members of the team and we also decided to make ourselves the owner of BEAU.
  • Lastly, small changes were made to each page such as a "professional" and "personal" section on the homepage for separate content. A "contact" this artist button at the top of the project page and a support button below to increase the social aspect of BEAU.
At this point of the project, our team had a split decision between continuing our prototype on figma or bringing it onto a CMS like webflow and have it live. We agreed on doing a Webflow version so we started building our pages. Along the way we noticed that certain things were impossible to create on (such as form submission). webflow without paying a monthly membership so we decided to cut it short and just create what we can and do the rest of Figma. Although, we wasted time we've learned not to make split decision and to focus on what we CAN do with the time given.

Final Iteration

with more testing, our team finally came together with a final iteration. We made changes from the last iteration and they are:
  • Adding all appropriate images a graphics to all pages of prototype.
  • Changing the images on our card on the about page from JPG to PNG to create more dynamics. Also added opacity to the background element to decrease confusion.
  • Reduce the number of leaves on project and other page from two to one so it look less busy.

In conclusion...

Creating BEAU with two of my teammate was very fun and exciting as BEAU represents something that we want to stands for. The idea of BEAU connects with each of us differently. For me and Emily, it was based on our experience as artist ourselves witnessing the harmful materials being used in art projects. While for Brenda, it was a way to spread the message and fight against stigmas. For the future, with more time, our team hope to build our a fully function chatting system between users as well as options to "like" "bookmarks" and "follow".

View Project 2-
ReadyToGoTry out BEAU's Website Design!View Project 1-
MercyHouse Website