Be Awesome Shoppe
Web UI, Logo
Timeline - 3 Weeks
Team - 3 UX & 1 UI
My Role - UI, Logo
Tools - Figma, Illustrator
"We want to connect people through their past experiences with this present one of making buttons."
- Anto Chen, Founder of Be Awesome Shoppe
Overview
About
Be Awesome Shoppe is a creative platform utilizing buttons as an art medium to express personal challenges. Founded by Anto Chen in 2013 in Toronto, Be Awesome Shoppe organizes made-to-order workshops for users to host fully-customizable button parties for all occasions, and experience first-hand the thrill of creating something that is truly their owns. It serves more than a business, but rather an outlet for all demographics to unleash and discover their inner creativity and use art as an outlet for self-expression.
Approach
We were instructed to redesign the website of Be Awesome Shoppe as the mood and the message conveyed are not clear for the target users. According to our client, the button people wear is more than just getting dressed. It’s a statement and a self-extension that speaks even more than words.
User Research
Michael & Brenda
After the UX team completed the user research, they identified two main personas that represented the majority of Be Awesome Shoppe's existing and potential target users.
Michael: As an art student with minimal expendable income, I want to find a way I can share my art and message with the world without spending too much money on supplies so I can eventually focus on art as a full-time job.
Brenda: As a corporate event planner, I need to find a fun way to increase attendance of team-building events, so I can better manage project deadlines and restore employee morale.
Visual Research
Why
As a UI designer, I started our visual research process with an inception sheet. An inception sheet is great for designers to use as it helps set a solid base for the design.
Starting with "Why", I focused on understanding the business of Be Awesome Shoppe and its goal. In this project, the "Why" is to encourage people to develop a unique relationship with art, understand its ability to evoke feelings and emotions to establish Be Awesome Shoppe's digital presence.
The visual language of this "Why" can be explored in the following five categories:
Mood: Emphasized on personal expression and self-extension, the mood of Be Awesome Shoppe should be empowering, trustworthy and friendly. While many Be Awesome Shoppe's current users are teenagers, the client wants to grow the business among young professionals as well. So, the overall mood also needs to be fun and professional.
Colour: The current reflects what Be Awesome Shoppe users would see. Based on the empowering and fun mood. the colour should be bright, cool, and fun.
Shape: Organic, round, and curvy reflect the button shape and give users a feeling of personalization.
Space: Drawing inspiration from self-expression and personal-extension, I want an open and balanced shape.
Movement: The movement of the website is simple and linear, very easy for users to navigate and move around.
Mood Board
I created two mood-boards. They are both minimalists. In the first one, the psychology of the turquoise is open communication and clarity of thought, just like the message Be Awesome Shoppes wants to convey. The orange and yellow colours make it empowering and adds some fun. The second one has more white space, which is inspired by Anto Chan, the founder of Be Awesome Shoppe who really likes clean and white photography portfolio websites.
Style Tile
With the colours and mood in place, I set to continue my exploration of the design and worked on two sets of style tiles to get a better idea of what the website should look like.
We decided on the first style tile and moved to the Hifi stage.
Final Design
We decided on the second style tile and moved on with the Hifi stage. The home page had to be the start of the show, so that’s the one I spent the most time on. As it is the home screen, it must be strong and clean and allow users to be interested in Be Awesome Shoppe and know its business is.
A wavey nav bar adds some fun and a free feeling to the overall design.
The button-shape quotes remind users of buttons.
The circles around numbers is another reflection of buttons.
Similarly, the circles around events is another reflection of buttons, which is also consistent with the above section.
Like the wavey nav bar on the top, this wavey footer generates fun and a free feeling, and is corresponding with the top.
The rest screens follow the same design direction and patterns. I left more white space and give some freshness. Below are some major screens. Please click on the Prototype Link to see the complete website.
Conclusion
What did I learn?
Although my role in this project was a UI designer, I made all my design decisions taking into consideration both our client and users, together with their needs and frustrations. It’s more than merely making the website pretty and appealing. This website is a channel for our client to deliver the idea and business of Be Awesome Shoppe. In the meantime, this website is also a channel for users to explore and understand Be Awesome Shoppe.
Future Consideration
From a UI perspective, I suggested our client hire a photographer in the future. The overall design style, based on our user research and the client's preference, is open and simple. However, the current photos from Be Awesome Shoppe are very crowded and overwhelming. The photos would better fit the website if they have a similar style.