During the Click Start Course with Bath Spa University, I had an opportunity to learn about the basics of UX and UI design, and apply this knowledge when working on my final project in Figma. This is the result of my very first attempt at designing a website from scratch.

Problem statement

Phoebe is an owner of a yet to open coffee store. Her new coffee store will be set in an urban creative area, popular with professionals, students and young families. She’s looking for opportunities to attract new customers before the store’s launch date. She’s struggling to know what to put on her website and whether she should consider other methods to help her create noise before the grand opening.

Teamwork

As a group, we were presented with the brief and encouraged to dive into crazy eights and a group discussion to explore different ideas and ways of approaching the assignment. I thoroughly enjoyed our group exercises and the whole ideation process.

I then intuitively started working on the information architecture and drafting some first low fidelity wireframes to summarise our team’s discussions.

Individual work

Later on, I carried on the work independently. I started with digitising my notes on IA and developing more mid-fidelity wireframes, while also completing some competitor analysis. As I was learning the basics of Figma, I produced all high-fidelity user interfaces and eventually a working prototype. During this process I would seek my tutors’, fellow students’ and friends’ feedback in order to test my designs and apply any feedback. It helped me improve the visual hierarchy, the contrast and the flow of my designs.

In the meantime, I expanded my knowledge of style guides and created one myself, specifically for this website.

Results and learnings

I was then proud to presented my work, the interactive Figma prototype, as my final project at the end of the course.

I have learned about different stages of the design process, got to experience the joy of team work during the ideation phase and how satisfying it is to then turn these ideas into design when developing them on my own.

While on this course, I also had an opportunity to learn the basics of HTML and CSS, which I know will be very useful when working and communicating with developers on any future projects.

At the end of the course, I was excited to sign up to the UX/UI Bootcamp, to be able to deepen my knowledge and develop further skills. I especially wanted to learn more about the UX research, testing and user centred design, as well as build my confidence in UI design. You can see how I progressed in this regard in my next case study.