Superbloom
Reimagining the Superbloom brand.
Background
roles
Art Direction
Prototyping
Motion Design
Timeline
10 Weeks
team
Dani Riofrio, Fionalene Tan
tools
Research
Superbloom's current site.
Nonessential Info
Superbloom's content layout is outdated by nonessential details that hides important info.
Unorganized
E-Commerce
Without proper categorization, customers felt uncertain by the experience.
Superbloom's in-person experience brings a vibrance that the current website did not reflect.
Ideation
Planning our approach.
Before tackling a whole redesign of Superbloom's web experience, I worked with my team to create a framework of how we would tackle this project. We would be working from the inside out.
1.0
Web & Navigation Content
In order to create anything high-fidelity, we needed to start at the roots and work our way up. Therefore, our first step was to tackle the website's current structure.
2.0
E-Commerce Experience
We then would separate the user experience within the online ordering section to better reflect any changes made from the past step.
3.0
Visual Branding
This step would focus on layering Superbloom's colorful branding and visual aesthetic with our new structured web architecture.
1.0
Web & Navigation Content
1.1 Card Sorting
We utilized card sorting to understand customer's mental models of Superbloom's content. For this method, we conducted each session unsupervised to allow freedom of decision.
1.2 Sitemap
We sequenced all participant's groupings and compared each to create an ideal layout of Superbloom's new sitemap.
2.0
E-Commerce Experience
2.1 Initial Analysis
1
Drink title is vague and becomes confusing when ordering specific Tea Lattes.
2
Dietary preferences do not specify if they apply to all drinks in the option category.
3
Drink options lack visuals to inform users what their drink will look like.
2.2 Competitive Analysis
We analyzed numerous small coffee shops around our home towns to understand what kind of design layouts customers feel most comfortable interacting with.
3.0
Visual & Content Branding
3.1 Mood-boards
Revitalizing Superbloom's visual identity was an extremely fun process. To reflect the eccentric and expressive nature of Superbloom's district, Starland, we knew we had to go big and bold.
3.2 Logo & Style Guide
The original logo's detail was excessive, making it hard for customers to read even from close distances. Our redesign focused on legibility, but also factored in Superbloom's identity to form a more unique, emblematic symbol.
3.3 Design System
This was my first project where I was encouraged to collect my UI elements as visual system. However, doing so enabled much clearer communication and design congruency between me and my non-design team.
Design
Wireframes to Mid-Fis
We created four layouts, two each for homepage and e-commerce sections. This would allow us to later test and validate designs with users.
A/B testing was done around mid-fidelities to finalize design choices and approach a unified final design.
A/B Testing
With our developed mid-fis, we launched a survey to gather as many responses possible to consolidate down to two best candidates for high-fidelity.
Final Designs
From our final A/B testing, we wrapped down to our final homepage and e-commerce screen. Make sure to explore our final designs via our Figma prototype!
Impact
A great success!
Reflections & Takeaways
I was in the mindset that all my portfolio pieces needed to be this polished, clean, and unified spread of work. Maybe that works for some people, but I don't think it works for me. I've found that my creative projects and challenges are what I speak most passionately about.
