Problem, Solution, Impact
Problem: As a UX designer, I need to create an impressive portfolio that showcases my skills to hiring managers. I must address accessibility, responsive design, and storytelling to stand out from other candidates.
Solution: To overcome these challenges, I will design and code a one-page portfolio webpage. I will prioritize accessibility, responsiveness, and strategic content placement to capture hiring managers' attention. By incorporating storytelling techniques and implementing Google Analytics, I will effectively present my work and measure portfolio success.
Research
During the research phase of my portfolio project, I started by tackling a few key objectives:
​
• Planning a 120-Day Action Plan and Job Prep: I kicked off by creating a detailed 120-day plan to get myself job-ready. This involved researching industry trends, understanding job requirements, and figuring out the best ways to develop my portfolio. Below are the goals I have for my career as a UX Designer. My full 120-day plan is attached here. >>
• Mood Board and Evaluating UX Portfolios: To get inspired and learn from the pros, I put together a mood board that can be found here. It was a collection of cool visuals, colors, and layouts. I also studied the portfolios of experienced UX designers to see what works well. If found a few here and there that gave me ideas of what I wanted in my portfolio which helped me launch an exact idea of what I wanted my portfolio to look like.
​
• Content Inventory for the Online Portfolio: I took inventory of all the content I wanted to include in my online portfolio. This included case studies, project descriptions, an about me section, my resume and contact details. It was important to have everything organized, cohesive, and visually appealing.
By completing these objectives during my first week of research, I set a strong foundation for developing my portfolio. It allowed me to showcase my skills, experiences, and design capabilities in a comprehensive and impressive way.
Wireframing
Low-Fidelity Wireframes
When designing my low-fidelity wireframes, I drew inspiration from the layouts I admired in the example portfolios I researched. I wanted to ensure that my wireframes corresponded with those visually appealing designs. By incorporating elements such as clean typography, well-organized content sections, and intuitive navigation, I aimed to create a strong visual impact. It was important for me to strike a balance between showcasing my own unique style and adhering to the best practices observed in the portfolios I studied. This approach ensured that my wireframes not only conveyed a professional and polished look but also aligned with my personal aesthetic vision for a visually captivating portfolio.
​
To the right are my mobile low fidelity wireframes and below are my desktop low fidelity wireframes.
.png)
Mobile
Desktop
Style Guide
I then developed a style guide on my own style guide for the beginnings of the high-fidelity prototype.
.png)
High Fidelity Wireframes
​To take my low-fidelity wireframes to the next level and make them high-fidelity, I added my style guide elements to create a more polished and professional look. I made sure to use my chosen color palette, typography, and other visual elements consistently throughout the wireframes. By doing this, I created a cohesive design that reflects my personal brand and design style. These style guide elements really brought my high-fidelity wireframes to life, giving them a more refined and visually captivating appearance.
Developing
Annotations to Prepare for Code
I took the opportunity to annotate my high fidelity wireframes with coding annotations, keeping in mind the future development of my portfolio website. By adding these coding annotations, I planned and prepared for the implementation phase. I carefully identified and labeled the different elements and functionalities within the wireframes, making notes on the specific coding techniques and technologies that would be required to bring them to life. This process helped me visualize and strategize the development process, ensuring a smoother transition from design to actual implementation when building my portfolio website.
.png)
.png)
Website Development
Learning HTML, CSS, JavaScript, and Bootstrap was a transformative experience for my portfolio development. With HTML, I gained the ability to structure and organize the content of my webpages. CSS allowed me to unleash my creativity by adding stylish design elements. JavaScript brought my portfolio to life with interactive features and dynamic functionality. Utilizing Bootstrap streamlined the process of creating responsive layouts, ensuring my portfolio looked great on any device. Mastering these technologies empowered me to create visually appealing and engaging webpages that effectively showcased my portfolio and captivated visitors.
​
Below is some snippets of my code for my home page.
In Visual Studio, my HTML allowed me to lay my framework for my website and CSS allowed me to create a visually appealing version of my design. I added a cool navigation feature using JavaScript that incorporates hovering circles around each menu item, enhancing the visual appeal and guiding users through my portfolio. By utilizing Bootstrap, I optimized spacing and accessibility, creating a seamless layout across different screen sizes. Additionally, I implemented captivating Bootstrap hover effects on buttons within my Greecycle case study, enhancing interactivity and elevating the overall user experience.
​
By combining JavaScript for the dynamic navigation, leveraging Bootstrap for improved spacing and accessibility, and incorporating captivating hover effects, I successfully transformed my portfolio into an interactive and visually appealing showcase of my skills and design prowess.
Reflection
Lessons Learned
Diving into website development for my portfolio was challenging but rewarding. Planning and staying organized before coding was crucial. Breaking tasks into smaller parts helped me focus and solve issues more effectively. I also felt that balancing aesthetics and functionality in my portfolio taught me a valuable lesson. I realized the importance of making it visually appealing while ensuring usability and accessibility. Navigating intuitively and adapting to different devices were key considerations.​ With that, embracing a growth mindset was crucial. Viewing mistakes and challenges as learning opportunities helped me overcome obstacles. Exploring new technologies and coding practices fueled my desire to improve and expand my skills.
In summary, my portfolio coding and design experience taught me the importance of planning, balancing aesthetics and functionality, iterative improvement, attention to detail, collaboration, and maintaining a growth mindset. These lessons will guide my future endeavors and foster continuous improvement as a college student.
​
I felt that developing my portfolio showed me the value of iteration and continuous improvement. Accepting that my initial attempts weren't perfect, I embraced feedback from peers and mentors. Testing and making changes based on user input helped me refine and strengthen my portfolio.
Continuing to improve my portfolio, I'm focusing on two key areas: the case study cards and the skills section on my About Me page. For the case study cards, I'll enhance their layout, imagery, and typography to create a captivating storytelling experience. In the skills section, I'll use visual elements like icons or progress bars to make it visually engaging and easy to understand. These adjustments will enhance the overall visual appeal and accessibility of my portfolio, impressing potential employers.