This project was a concern for an employee who wanted to have additional income to daily needs. With all the considerations of time and situation, she decided to focus on getting his first project as a freelancer UI/UX designer.
This website is expected to change the portfolio to make it look more professional in showing skills, self-quality, as well as projects that have been done before. This website aims to make it easier for prospective clients or recruiters to find out their persona skills, so that they are interested and recruit her as UI/UX Designers or web designers in projects that will be carried out.
Work Timeline
Research
Starting with researching several examples of portfolio websites from selected websites, also by taking UI/UX classes on making portfolio websites to find out the things that need to be considered when creating the design. Several user needs were found in creating a portfolio website as follows:
From the results of this research, it can be seen the user's needs in creating a website from each desired page section. Then it can be continued with the design solution stage, in which the website design is made based on the scope that has been explained along with the themes and pages needed. So, when carrying out the interface design process, the page designs that are made remain within the scope and can be completed on time according to the given timeline.
Wireframe
At this stage, it is enough to make a basic description of the sections and user needs that will be displayed on each page by being made directly (drawn with a pen/pencil) or by using wireframe making tools. In this project, wireframes are created using whimsical tools.
Design Interface
This stage is the most fun stage, creating a website interface design. Starting with selecting colors, typography, and assets or logos to be used, then creating the easiest page designs to complex/varied page designs.
Design Style
Mockup UI
Web Development
This is a complicated and exciting stage, there are many new things that need to be learned in terms of design editing, asset input, layouting, animation, CMS, etc. Until it doesn't feel like it has spent a lot of time for days just to learn it until you can put it into practice.
In this stage, the tools used are framers. An online website creation tool that is free and easy to learn without using coding with a look and function that is similar/familiar to Figma users.
You can see it here safitriann.framer.website
Content Writing
A very important and crucial thing that is sometimes overlooked is the content that will be displayed. During the design process, only the title/main text takes precedence, the subcategories of each section and only provide lorem ipsum for the content in each section.
This stage is one of the things that makes the portfolio website creation process take a long time. The obstacles faced were in preparing and completing the words from each page as well as writing articles from several projects that would be displayed.
Testing
After everything was finished, I continued to review all the assets for each section and page, as well as their responsiveness. if there is an error, I continue to revise it until it is correct and appropriate.
Then, I tried to do usability testing on one of my developer friends. The review he gave was:
"For websites that are too simple, you need to display some additional content such as other articles, or social media posts. So that users know what activities a designer is doing"
From the review that he gave for me, I know the things that need attention and need to be fixed. Then it becomes a reference to improve the next website.
Conclusion
Many lessons were learned from this project, the importance of time discipline so that the project can be completed more quickly, and the need to pay more attention to detail regarding the consistency of giving assets and colors.