Bulan Website
Designing a unique lore experience representing what the Bulan NFT actually is.
Role
Lead UX Designer, Illustrator
Team Member(s)
Chimezie (UX Designer)
Project Length
5 weeks, 5 days (2022)
Solution Type
Figma, Concepts App, Adobe Illustrator, Procreate, Notion, Zeplin
Solution Type
Website
Result
Hi-Fi UI Design, Design System, Illustration, Logo
Implementation
The Overview
The Bulan website was built to house all the utilities associated with the Bulan NFT, plus give users the lowdown on what the NFT is all about in general.
What is Bulan? Think African vibes mixed with a solid community focus and a dash of artistry; balancing engagement and value through cool utilities. The entire project is centered around using these unique 111 African gods to shake up the NFT scene and shed some light on African deity history and culture. The main utility here was “The Gallery”, where users can dive into the lore of the 111 African deities featured in the Bulan NFT collection.
My role in this project was leading the user experience design and solely creating illustrations and branding. Just like I did with the NFTs themselves.
The Problem
The Bulan Website intends to design and implement a one-of-a-kind lore experience that truly embodies the essence of the Bulan NFT.
The mission with the Bulan NFT project is to tackle the widespread lack of awareness and understanding surrounding African deities; tackle the common misrepresentation and limited knowledge about African history and culture, particularly when it comes to its diverse African pantheons of divine figures. This gap in knowledge makes it difficult to properly appreciate and recognize African gods, hindering meaningful engagement and education on a global level.
The Design Process
For the design process, we stuck to a tried-and-true framework: Design thinking.
You’ve got these five phases: Empathize, Design, Ideate, Prototype, and Think. Me and my team member, Chimezie, all different parts to play in each of these phases, but I made sure to take a leadership role in all processes; co-ordinating processes as we moved.
And to keep things on track, I broke down each of these phases into smaller, more manageable steps. Made it easier to keep tabs on what’s happening and stay organized.
Empathize
With the empathize process, we decided to split it into two parts:
- User Research – We interviewed about 20 potential users who are into art and mythology, as well as folks who already own the Bulan NFT. We wanted to hear straight from the NFT holders what they think a website representing Bulan should look like. And then, we pitched them the idea of “the gallery” feature. The mythology buffs really came through, giving us some solid ideas for what the gallery should include. They made a good point about how creative writing about African pantheons is hard to come by compared to academic writings, especially since knowledge on African Pantheon is scarce in general.
- Competitive analysis – We dug deep and found four other NFT projects that have a killer gallery feature. Now, while none of these projects do exactly what we’re planning to do with Bulan’s gallery, we wanted to see what these other projects were doing right.
Turns out these projects all get the importance of giving users a slick, organized space to show off their NFTs. Incorporating gallery functionality just makes the whole experience smooth and easy on the eyes.
Define
In this phase, we created two user personas to really capture the essence of who’d find the Bulan website really useful and use it:
Ideate
During this phase, we worked on the userflows for the gallery and crafted the sitemap. It was here that we had a lightbulb moment: why not infuse the website with a bit of a divine vibe? For instance, we switched out “about” for “decree” to give the site that subtle touch of uniqueness.
Prototype
This phase was a rollercoaster of fun and stress! I had my hands full because we were really diving deep into using illustrations and custom elements. Luckily, that’s my strong point, so I was in my element.
We kicked things off with wireframes and did some UI tweaks while still fine-tuning those wireframes. We made sure everything flowed smoothly before we went full-on with the high-fidelity designs to save time, making sure we did minimal tweaks on the Hi-Fi.
We decided to jazz things up with splash illustrations on every page before the actual page content. We did however, keep the home page simple: just a splash illustration with a clear call-to-action.
We wanted all the page illustrations to have the same color schemes, except for the homepage, where we let it unique from the rest.
I brought in the characters from the NFT collections to add some flair to these illustrations, keeping that consistent and familiar look and feel throughout the site. When a user sees a splash section on the pages, he thinks “Hey, i know this character from the NFT collection”. This, we imagined would further want users to learn more about these deities because they now see them in a scene; driving more use of the gallery
Also, for the roadmap card illustrations, I went for this loose, almost painterly style to give it that traditional feel.
For the Gallery—the main feature of the website, we wanted users to dive into the lore of these deities in a creative writing style. Tracking down info on some of these deities was like hunting for treasure in the jungle but, we got there in the end, doing a long, extensive research.
Now, for filtering, we set up categories; Gender, Pantheon, Class, Sub-continent, Background (straight from the NFT collection), and a special category called “Overseer” for a select few gods.
So, say you want to check out just the fire-wielding gods from West Africa, you could use the filters; class: fire, sub-continent: western africa and you’re there. And if you know the name of the deity you’re after, you could just use the search bar.
I created custom icons for the categories and called the catergory “Traits” to keep things in line with NFT lingo.
Think
We made a quick prototype of the gallery to iron out any user experience bumps before handing it off to the dev. This helps us find out any issues navigating the gallery and also gauge how users felt about the overall feel of the website without diving deep into coding or prototyping the entire website.
Time was of the essence here. The NFT crowd has a seriously short attention span. If you take too long to roll out something cool, it loses its shine real quick. So, speed was key for us to keep that excitement level up.
Future Iterations
There’s a plan to add a value-based ranking tool to the website. This would help users make smarter NFT buying decisions by showing them the value and rank of NFTs. It’s not just for Bulan NFTs, but for all NFTs in the Aptos ecosystem.
The bulan website built and designed to be really modular, so adding this tool in the future should be fairly easy. The Bulan team like to keep things flexible and ready for whatever comes next.
More UX Design Works
Graveyard
Allawe
More Work Categories
Visual Art
2 works, 3 Galleries
Visual Design
3 works