Redesigning a Yoga Studio Website
Repositioning a brand through an UI process
For our Week 5 project at the Ironhack Bootcamp, it was time to finish the work that I’ve started at Week 2. But now, I went through the process by myself.
The final goal is to create a brand new website for Infinity, a yoga studio based in Portugal.
Since that the goal for this week was a redesign process, I started with a new market positioning map. This helped me to better visualize what kind of impression I wanted to create with the new website. It was also a great tool to understand where to look for references.
With the positioning map I’ve spotted an opportunity to create an innovative and luxurious yoga studio.
Searching for references
I knew it that I wanted to create a minimalist website, with a lot of use of white space and refined typography to create a sense of luxury and elegance.
I’ve started to search for luxury brands websites, like Tiffany & Co, Armani and Rolex. I also searched for other yoga studios websites, to get a glimpse of what I didn’t wanted to do.
After getting inspired, I’ve created a moodboard to visualize what would be the message transmitted to Infinity’s client through the new website.
Logo Redesign
To better match the brand with the new website, I’ve came up with a new logo. Below you can see the process with different versions before creating the final version. The logo typography is Jost ExtraLight.
Style Tile
In the Style Tile you can see the colors that I used in the new website. My goal was to build the website with a lot of white space. In order to balance the lack of color I’ve decided to use four different typographies.
Design System
After doing the Low and Medium fidelity prototypes to decide how the content would be displayed, I started to work on my design system. Here you can see some of the buttons, cards and icons I’ve used.
The new Infinity website
This is the new Infinity’s home page.
This was Infinity’s home page.
In the video below you can see the full journey of the user inside Infinity’s new website. Right after entering the website, the user gets a newsletter subscription pop-up, in order to grow the engagement between customer and Infinity. Moving forward, our user will add services to the cart and will also check Infinity’s ecommerce to add one more item to the cart before the checkout. Last, you can also see how Infinity’s responsive website looks like.
Learnings
- Say goodbye to a few ideas
- Prioritize the user experience
- Learn when to stop
- Trust the process
Thanks for reading :)
