Category
Website Redesign
Tools
Figma | Google Docs | Zoom | Stark | Picular | Coolors | Google Fonts
My Role
Product Designer | User Researcher | Visual Designer
My Contribution
I am responsible for creating my client’s portfolio for her freelancing business. I was able to collaborate, user test and get feedback from my client to ensure that it lines up with her expectations while having UX methods in mind.
The Challenge
For this project, I am tasked to redesign my client’s portfolio and showcasing her past projects to attract potential customers and expand her clientele for her business.
Research
Heuristic Evaluation
Before the initial redesigning of my client’s portfolio, I conducted a heuristic evaluation of the current design. This allowed me to analyse the portfolio and determine the problems that can be improved throughout the design process.
Portfolio Impressions
- The header is too large for the website
- Unnecessary / inconsistent buttons
- Logos are not aligned evenly
- The text and background does not meet the contrast requirement
- Brand inconsistency and no proper style guide
- Navigating through the website is confusing and unclear
- Resume user flow is unintuitive and difficult to navigate
User Research
Next, I interviewed my client to understand her expectations when I design her portfolio. I wanted to understand how the client’s goals, brand identity, and how she wants to portray to her potential clientele and customers.
SWOT Analysis
Afterwards, I conducted a SWOT analysis of my client’s portfolio to strategically rebuild and redesign her website to meet my client’s goals while identifying factors that can influence her brand. This can also recognise the risks and opportunities that can be viewed in the early stage of the rebranding process.
Brand Identity
After the user research, I gathered the keywords my clients described her brand. This allowed me to find inspirations for potential designs, and directly focus on her brand identity.
Redesign
Brainstorming
Before creating the interface, I began brainstorming with my client to show my process in developing her portfolio while she gives me feedback on what I can do as the designer to bring her portfolio in her vision.
During the brainstorming session, I asked my client about the colour palettes and styles she want on her website. She mentioned the camp that she was part of growing up, and wanted to encorporate the colours of nature and the environment. I also took some of her brand identity, and used the website Picular to look at the colours associated with her brand.
Style Guide
Information Architecture
Using the original website as an information, I developed the site map of the website, which serves as the skeleton of the portfolio, which allows for easy navigation for potential clients and recruiters.
Wireframes
I tested the wireframes to my client, obtaining direct feedback and promoting maximum satisfaction with the portfolio.
Accessibility
During the design process, I used the Figma plugin, Stark, to check the contrast between the background and text to ensure that potential clients have an effective user experience, and easily access my client’s portfolio.
Website
Final Prototype
What’s Next?
- Design the GB Events page
- Create the pages for the projects
- Testing, Testing and Testing