UX Designer
This was a course project from “Everything a UX designer needs to know about Figma” by Bring Your Own Laptop. I took this course to stay relevant with Figma and to see if I could learn something new about it.
Tasked with creating our own app, I had to come up with a brand for the app. This included the logo, fonts, and brand colors.
Within the course there were lessons on picking fonts and colors for the web and mobile apps. I was then tasked to research color theory and font pairing.
I created a mood board to gather inspiration from other similar preexisting designs. With this I could quickly find what works and what doesn’t within the same work-space.
With this course, we used a random project generator. Not only was the project itself random, the persona it generated was very brief. I fleshed out the persona a bit more, while sticking to the randomness of working on a project/product I did not choose.
After creating the brand, logo, deciding company colors, and finishing initial research, I began working on the design process starting with creating a flow.
I created a simple flow diagram to follow. This was a quick and simple web app with only a few processes.
Once I had a main flow path for the users to take, I began working on creating low-fidelity wireframes.
Once I had the basic flow down, I did a quick usability study on the low-fidelity prototype to find what else I could improve on. From there, I also had to design a logo, come up with a brand, and define the fonts and colors.
I wanted to keep the summer feel while remaining cool with the lighter blue.
After creating the branding and logo for the company, I began creating high-fidelity frames. Frames were also created for false states in the checkout process, with pop-up tooltips on how to fix the mistake.
After connecting my high-fidelity designs into a prototype, I was able to retest it with users to gain their feedback on what I further could iterate on.
Lastly, to add that extra little bit of magic, I was introduced to making animations within Figma. I had previous knowledge of animations using After Effects, but this was beneficial in that it was another skill I can now use with confidence in Figma itself. The course then encouraged us to make our own Figma animation and fit it within our project.
I evaluated the app against the AA standards of WCAG. I used various online tools to help pick good contrast ratio colors, as well as easy to read fonts that work well with each other.
During this project, I learned more in depth ways to utilize Figma. I also learned a bit more about color theory with accessibility in mind. After the brand was established, I began building out simple low-fidelity wireframes. From there I was able to iterate and incorporate my brand with high-fidelity UI design. Once the designs were complete, I began working on more advanced prototyping. With that came a simple animation to give the project a little more depth. I checked over my designs for accessibility concerns to address. Lastly, I learned about project handoff to either clients or engineers - something which was not touched on in the Google certification, but I found extremely helpful to learn about being apart of a team in the real world.
