It is an analysis and re-design of UI / UX of the local gym's website and app.
This is the gym I am going currently, and I visit their site/app often, so I know the users' point of view very well.
Improve both user experience of their app/website, and design for the new targets.
Oct 3 - 27, 2022
Young female professional
YMCA stands for Young Men's Christian Association,and it was founded in 1844, London. It aims to put Christian values into practice by developing a healthy "body, mind, and spirit".
The YMCA of the USA changed its old logo, which had been in use since 1967, to a new logo featuring the letter Y in 2010 with the rebranding to new brand imge the Y.
Following USA other regions’ YMCA gyms has changed their logo to simple logo with Y including Robert Lee YMCA in Vancouver which I am going to re-design.
There’re 3 types of problems; visual hierarchy, layout continuity, and white space(margin).First of all, there are too much information on the nav bar. The nav bar is comprised of 2 blocks and they occupy more than 25% of entire screen on laptop which is apparently too much.Also on the nav bar, they only have a little white space (probably less than 5px); nonetheless, there’re vast white spaces on other main descriptive blocks.On “Our Programs”, there’re 9 divs with a title/ paragraph/ CTA btn, and uniquely, they all have different margins between each elements, and this is breaking the concistency and continuity of this layout.Last but not least, just same as the nav bar, its footer is also composed of 2 blocks and ignoring about the existance of white space especially in the 2nd footer section.Overall, this website can be define as flooded with information. So, I need to figure out what users need/ want to know from their website.
On the contrary to their website, main problem of their app is its simpleness.Basically, it has one function to book the class, and it isn’t a bad idea to focus on one function which users are demanding but even though, this booking flow is too simplified and only consists of texts. For some classes like Yoga, Cycling, it isn’t so hard to imagine what they are for, however, they have some classes which is hard to guess about the activities from their name for example YCore.Therefore, what I would do about their app is going tobe enriching their information (especially visual info) to make it user-friendly for everyone including new users.
One of the policy of Robert Lee YMCA is inclusive, as you can see bunch of Pride flags at their robby. However, on the training floor, 80-90% of users are male, and some classes like Zumba and Yoga I’ve seen group of senior female members, but over all, I see a really few numbers of young female members nevertheless, dominant residents of this city is relatively young women.In my opinion, one of the reason is their name “YMCA”. It says “Young Man”, and there’s “YWCA” gym in the same area which is completely diffenent company. In fact, one of my friend asked me before if YMCA is only for MEN and YWCA is only for WOMEN. Therefore, on this re-design project, I’d like to set the core-target to young females to expand the range of potential future members.
The oroginal logo is already a deliverated logo, like the triangle means “Spirit”, “Mind”, and “Body”. However, the impression of the original logo is a bit too formal for new targets I set.Hence instead of re creating the logo, I adjust two parts to soften the impression of the logo.
-Changing blood-looking color to energetic fresh color.
-Add little corner radius to each edges.
To keep the consistency of the website, I picked accent colors which is close to duotone colors.
However, if I use the exact same colors as duotone, it would be to bright to use as text or even background of elements, therefore I chose darker colors which have accessibly enough contrast to white.
For the header fonts I picked Futura PT. It is a world-well-known readable / sophisticated sans-serif font which has many variety of weights. Also, it is quite similar to the “Y” logo.
For the paragraph fonts I picked Quicksand. It is a bit unique but not too unique rounded sans-serif font which could deliver soft impression to readers with keeping the legibility.
For the header fonts I picked Futura PT. It is a world-well-known readable / sophisticated sans-serif font which has many variety of weights. Also, it is quite similar to the “Y” logo.
For the paragraph fonts I picked Quicksand. It is a bit unique but not too unique rounded sans-serif font which could deliver soft impression to readers with keeping the legibility.
Before start designing to understand the role for their app, I summarized 2 issues of it.
-Unnecessarily repeated info
-Lack of confirmation
Same flows that I redesigned to improve the above UX-related problems.
-Each tab buttons have independent contents.
-Add one cushion before the booking process.
I created a simple wireframe before creating a mockup of the app. The prototype can be played around in Figma at the link below.
For their website, site expected visitors can be categorized into two types.
New visitors who are curious about YMCA.
Frequent visitors who already are member of YMCA.
According to this, I extracted four elements as the most demanded information for their website; home, facility, plan / price, and schedule.
