DEV Community

Cover image for [Phase 3.2] Personal Portfolio - Design (User Experience)
Harus, Chi Ho Ho
Harus, Chi Ho Ho

Posted on

[Phase 3.2] Personal Portfolio - Design (User Experience)

Context

In the design phase, development team not only design the user interface but also ensure a good user experience. In this article, I would like to explain some designs and what kind of experience I want these designs to bring to users. They will be explained in these aspects:

  1. Usability
  2. Efficiency

Usability

The images at the bottom are the design of the portfolio website: two of them are for desktops or tablets, and the other is for mobile devices. It ensures that users can use the function on the website with their desktops, tablets or mobile devices. The navigation is controlled by three buttons. When users visit one of the three webpages, the text in a related button will be underlined. That clearly shows the users which page they are visiting.

Besides, those three buttons are named with keywords on a resume like projects and work history. When recruiters notice those buttons, they can immediately understand what they will see after they click the button. It allows the users to quickly know how to use the website.

Furthermore, the separated webpages facilitate independent updates. The creator can independently modify the contents on each page without affecting each other, allowing creators to focus on updating specific webpage.

For the consistent experience, the process of updating content on each page will be the same. Once creators have learned how to update the content and save the changes, they can use the same steps on other webpages.

Efficiency

The website is designed based on the layout of a resume. The contact information, therefore, is put on the top of the website. Following the contact information are the personal summary and skills. It allows the users to decide whether they should go ahead or leave by reading the personal summary and skills. Usually, personal summary and skills have shown the candidacy. If recruiters recognize the skills they need, they will proceed, and vice versa. From the perspective of a recruiter, it guarantees that they can finish their tasks in an efficient way.

For creators, the management panel is a great tools to manage their content about work history and projects. In the management panel, creators can feel free to decide to hide or display sections by switching the "release" status to on or off. When creators want to hide a section, they might not want to delete it because that sections might be released again after a modification on it. The status switching design allows creators to update and manage the sections without worrying about rebuilding the same sections later.

Summary

The designs aim to keep the usage easy and simple meanwhile users can get information or manage content without making much effort. The separated webpages allow users to easily manage their content or quickly find the content based on the categories, keeping content clear and precise.

About Me - Desktop

About Me - Mobile

Management Panel - Desktop

Management Panel - Mobile

Top comments (0)