Screen Shot 2020-08-17 at 7.22.28 PM.png

 CREATING A NICHE COMMUNITY WITH WABI

Tools:

Sketch

Invision

Adobe Creative Cloud

My Role:

UX Designer

UI Designer

Brand Development

Timeline:

6 weeks

01 Problem Statement

Carving your own lane in an oversaturated market

The local scene is experiencing an overload of shareable information. Today’s consumers are inundated with local events, meet-ups, and group activities. Despite the endless sea of happenings, people continue their struggle to find activities that align with their personal interests.

On top of that there are a dozen of big industry players vying for users, and it is safe to say it is a tough game to win. Though there are many advantages in appealing to a broader market, the key to success is finding and choosing a niche.

I was tasked to create the brand and visual design for a mobile responsive platform that reimagines how people can search and find activities that reflect the target audience.


02 Discovery

Big Fish In A Small Pond

I began working on Wabi by analyzing the barebones UX material provided in the handoff. UX deliverables included wireframes and the development of user personas.

User Personas

Venn Diagram Analysis

Venn Diagram Analysis

Focusing on health events stemmed from the user personas provided. Looking into Amy and Nate’s portfolios specifically their goals, frustrations and motivations, I found health to be an area of opportunity to explore.

Apart from making decisions based on analysis, I also felt this was a great opportunity to flex my creative muscles and think beyond what was given to me.

Visual Competitive Analysis

Example of analysis

Example of analysis

Analyzing how the big players in the events space are presenting their brand identity and UI characteristics was the first step to laying the groundwork of my designs. I wanted to know what was out there, what was working, what was not and if people were responding to certain patterns or visual characteristics.

Affinity Map Summary

 
Screen Shot 2020-08-20 at 3.35.18 PM.png
 

03 Design

Establishing The Brand

Now that I was certain about pivoting what the application would entail. It was time to name the brand. A brand name helps identify and differentiate your company from others. Communication is an important aspect of marketing and brand names, being an integral part of communication is very important to carry out any marketing and branding strategy.

WABI

(in Japanese art) a quality of austere and serene beauty expressing a mood of spiritual solitude recognized in Zen Buddhist philosophy.

Logo Design

Screen Shot 2020-08-20 at 3.54.57 PM.png

After some guerrilla marketing tests, the second logo ultimately one. Overall it went along the brand name of being serene and simple. It also lead me to the pillars of the mobile application which are health events focusing on mind, body and soul events. Hence, the three dots.

Logo Process Takeaways

Sketching: I learned the importance of sketching before tackling a project head on. This boosts efficiency and makes the design process more seamless.
Testing: This was the first time I have user tested a logo. I believe I could have done a better job testing the logos which I will keep in mind for future reference.

Moodboards and Style Tiles

After establishing the brand identity, my next step is to move on to moodboards then style tiles. Down below are two sets of visuals that I both loved but were not quite there. I decided that converging the two would be best.

asset.jpg

Wireframe Evaluation

Upon receiving the UX provided wireframes for Wabi a couple of potential problems stood out.

Onboarding

I wanted to keep the onboarding process as intuitive and seamless as possible. The current screens were congested with a lot of information and excess functionality that was not needed. To combat this issue, I eliminated the outdated accordion style onboarding. This kept things as straightforward as possible by allowing the user to first pick their location, enable alerts, choose their category and lastly choose their interests. A sleek sliding bar allows the user to know where they are in the process as well as how much more they need to complete to start using the application.

Bottom Navigation

The current bottom navigation has 5 option, I narrowed it down to 4 options. My plan is to house the search option and home option into one.

Wabi-Annotated.jpg

04 Results

Onboarding

After making changes to the onboarding flow, I was very happy with the final result. Originally onboarding had six steps and I was able to narrow it down to four simple steps. In these four screens the user is not inundated with information and they have full control over their experience with Wabi.

wabi asset 1.jpg

Bottom Navigation

A quick view into each of the bottom navigation screens.

wabi asset 2.jpg

05 Responsive Web Design

ezgif.com-video-to-gif (1).gif

06 Final Thoughts

Getting From A To B Is Not Always a Straight Line

This project has allowed me to wear different hats and to look at a project beyond what was given to me. It wasn’t as straightforward as I originally thought it would have been and I am glad it was not.

Previous
Previous

Life Snapshot (Live)

Next
Next

GoodDeed