Projects
Design and Prototype: Internal Styling:
Figma: Client Website and Mobile Design Prototypes
I used pencil and paper to create the initial wireframes and then Figma to establish my high-fidelity wireframes and sequential prototypes. We were given the task of designing an online food delivery website called Fresh Eats. We were instructed to make the website modern and inviting. This is a mobile-first approach. We were given the logo and instructed to select one of three color palettes. Seeing how many similar food ordering sites use green hues in their color palette, I moved forward with a pink palette. I choose food images with white backgrounds to make the contrast cohesive. The website I designed does have more of a feminine feel, but I do feel that it accomplished the goal of creating a clean, modern website.
Bootstrap Website:
Visual Studio Code and Bootstrap Framework
HTML, CSS and Bootstrap Framework were used to create this website. We were tasked with designing a responsive website using the Bootstrap Framework. The purpose was to gain experience with this framework. In learning how to use the framework, I discovered the simplicity of creating simple websites but also the complication of overriding code for further personalization.
UX Design:
User Testing and Project Management
I used Figma to create the high-fidelity wireframe and prototype. List the languages or design technologies you employed during the UX project. We used comparative analysis, heuristic evaluation, and user testing to evaluate and determine changes on the client’s website to make the online ordering more efficient and reduce the number of in-store phone calls. The purpose of the UX project was to experience various roles of UX design. Project management was the most challenging in a group project dynamic. Establishing roles and extending patience and comprehension. As a team, we analyzed the provided competitor websites. We performed the heuristic evaluation as a group, and finally, we completed the user testing in pairs. I took on the role of de facto project manager and designer of the prototype because of my understanding of the Figma software. I now have more experience with Figma and feel competent in executing prototypes and high-fidelity wireframes.
Client Blog:
Visual Studio Code through CSS and HTML
Bella Batilly Client Blog. My client filled out a questionnaire, and we spoke about her inspiration and what she would like her blog’s look and feel. I created medium-fidelity wireframes using pencil and paper, then coded the site using Visual Studio Code and my photography for the images used on the site. I used Affinity to edit the images for the website. The colors and fonts were provided by the client.
Internal Styling:
The Tribute
Visual Studio Code was used to recreate an image and web design. I used HTML and internal CSS for this project. I was given a mockup to replicate as closely as possible using internal CSS. I used the color-matching tool to identify the colors of the mockup. I edited the image using Affinity and coded using Visual Studio Code.
UX Persona
Figma designed persona
I used Figma to design personas for personal and professional use.
