Redesigning Marry Jocee Landing Page

Project Info

One company I applied in the past asked me to redesign the portal page of Marry Jocee. Marry Jocee is a news curration site targeting women, especially those who are planning their marriage.
While I know the project is never going to be released, I feel this is a good practise to me to sharpen my design skill. In addition to that, I was and I'm still learning Framer.js as a protytping tool and working on a real project helps me a lot.

  • Project Role: Designer

Problem

Curration site is one of the form of user-generated content. People can post their own idea there or simply summarize and share form another news site. It is simple, yet a useful site. However, it could be a little bit overwhelming because the richness of the contents.

There are 2 principle that I have in mind when I redesign this page. First is to avoid redundant content and second is I want the visitor can get the information they need easily. They don't have to dig deep into the site just to get information about the latest trend of wedding dress.
Let's take a look of the current site.

Marry Jocee before redesign
  1. There's this category on the left-side side bar. The right-side bar contains tag and other trending articles. No search panel found.
  2. There's several navigations and the conversion button (login or sign up) but it's not clearly emphasized.
  3. The page is too long, but the both of the sidebars is not long enough, it looks a bit empty.
  4. There's another category in the footer. Too many information in the footer.

Building the foundation

I started to brainstorm the new visual identity. According several friends’ opinion, wedding identic with “Pure” and “Sweet”. Therefore, I'd like to keep those words as a guideline and I came out with the color palette.
As for the structure of page, I apply the card-like structure to create clean and modern look. ​​​​​​​

Marry Jocee before redesign
  1. The body consist of: header, body (recommendation, trending topic, and top rank articles), and footer
  2. The card's details. It has a space on top to put featured image.

User Interface Proposal

The prototype was made with Framer.js and is uploaded to Framer Cloud. Feel free to play around with the prototype below.

In order to make searching become easier, I add a search bar and category bar. These two remains sticky when the user scroll the page so they always have access to search function.
The order of the page is: recommendation for viewers, best article, and trending topic. These structure are made based on my interview with several people about what they want to see first when they go to curration sites.

Final Product

Result and Learned Lesson

While I did not make it for the job, I show this prototype to several people and designers and their responses are quite positive

Neat and tidy, unlike the usual Japanese curration site

A, Recruiter

Good choice of color, when you open the page you'll understand that the main goal is getting people to register because it's stand out.

S, Designer

I also think that there're a lot of things that can be improved, for example if I get the chance to study more about their user, I would understand what features that they use the most and what they don't like about the current design.