UX Design - Convergence

Week 1 - Week 15 (1/4/2021 - 8/7/2021)
Vun Wan Min (0334263)
UX Design
Convergence

---

INSTRUCTION

---

Convergence

For this project, we are to make a mobile website mock-up for a travelling magazine in a group.

This is the brief:

The travelling magazine is called Convergence and they want to have a clean and minimal look while also have a vibrant colour to keep they're logo colour.

Convergence Website:

https://convergence.malaysiaairports.com.my/

Fig. 1: Convergence Website 

At the first glance, it looked more like an article website more than an online magazine, that was one of the problem. After looking more into the website there some features that they lack, which was a call to action and an archive to look back on past issue magazine.

We had made a survey form for people to fill out and get some information on people's feedback on the website as well as understanding the persona.

Google Form Link:

https://forms.gle/bsHprBg2adYc8FsB9

Google Sheets (responses) Link:

https://docs.google.com/spreadsheets/d/e/2PACX1vQCCPXTgiM9WTvIa7qXth1ZPc4bv6XJ20dKoSDYL5AAcJ9LY1jadSl59jQ1MgntQPsMzA_CjAdqfzMW/pubhtml

Fig. 2: Brand Guide

Here's our proposal slide:

We made a wireframe draft in the Miro board.

Fig. 3.1: Wireframe 1

Fig. 3.2: Wireframe 2

Fig. 4: Figma - 1st Attempt

We made a rough wireframe in Figma.

Fig. 5.1: Trace Logo

Fig. 5.2: Footer - Original (from website)

Fig. 5.3: Footer - Original (in mock-up)

Fig. 5.3: Footer - Rough Trace/Saturated colour

Fig. 5.4: Navigation Bar

We traced the icon and the footer to retain from the original website. Since the colour of the footer from the original looks too blended, I made a rough trace with a saturated colour for our mock-up. We also added a navigation bar with the topics and bookmark would be easier to access and when scrolling through it will always stay on the screen. 

Fig. 6: Final Outcome

After many trials and errors as well as feedbacks, we finally have the final outcome. We added an Account feature and Bookmark feature, so that when people sign in they can bookmark the magazine to look through again and plan they trip accordingly.

Mock-up (Close-up):

Fig. 7.1: Sign Up

Fig. 7.2: Sign In

Fig. 7.3: Homepage

Fig. 7.4: Homepage with navigation bar

Fig. 7.5: Burger Menu

Fig. 7.6: Search Bar

Fig. 7.7: Topic/Category - Fashion

Fig. 7.8: Bookmark

Fig. 7.9: Article

Fig. 7.10: Contact Us

Final Presentation Slide:

Figma Link:

https://www.figma.com/file/3MOmZd6958vWldn916qINF/Convergence-UX-Design?node-id=89%3A449

Miro Board Link:

https://miro.com/app/board/o9J_lLTahjs=/