Swell: the surf brand
Ahead of joining the NHS App, I utilised the quieter holiday period to up-skill in Figma in order to hit the ground running when I joined the App team. Having not had the opportunity to use this design tool before, I completed the Udemy course: Figma UI UX Design Essentials - a 12 hour deep dive exploring everything from mood boarding to auto layout, maintaining component libraries to prototyping.
Overall, this self-initiated project accumulated to over 80 hours of learning, and has allowed me to explore my interests in branding, illustration and visual design together harmoniously.
Project length: 4 weeks
Role: Service, UX, Illustrator & Visual Designer
With thanks to Katy Oldfield
The design requirements:
-
Produce a flow of four screens: Homepage, Product listing page, Product details page & Checkout.
-
Develop a strong and authentic brand.
-
Iterate my concepts from mood board to high fidelity designs, holding users at the centre of that experience.
To kick off this project I generated a mood board for my surf brand, considering my target audience and the type of designs they may be receptive to. I looked into successful, trusted outdoor brands that have been around for a long time such as Patagonia and the North Face. These long-standing brands inspired me to design something with simplicity in mind, something traditional and of high quality, but also new, bright and joyful.
Throughout the design process I referred back to my mood board for inspiration and direction. On completion of my low fidelity wire frames, I started layering the functionality and UI onto each screen, iterating as to what user’s may expect to see and how I could enhance their experience.
As I became familiar with Figma, my designs quickly improved in quality; I learnt how to create components and variants, maintain a component library, and add interactions & micro-animations to my prototype.
As I iterated my designs, I sought out feedback from more experienced designers. Although this feedback was positive overall, I concluded that the designs were lacking a level of personality - as this project had no limitations, I felt obliged to create something more exciting and trend-led.
This lead to re-working the entire project. I began with my mood board, building in trend-led, warmer toned imagery, culminating in a brand that felt more youthful, modern and engaging (see below). I applied what I had learnt throughout the course to create unique interactions on this re-worked version, sparking moments of joy throughout the experience.
User experience
To match the bright, youthful imagery of my re-worked mood board, I decided to explore a different way of laying out the same user flow, considering how I could make the user’s experience more joyful as well as personal.
This led to the development of a ‘quiz’, where the user is led through a series of questions about their needs, where at the end a product based on these needs is suggested to them. To add a touch of playfulness to the design, I made each ‘answer’ in the quiz an interactive surfboard that changes on hover.
Imagery & Illustration
To bring the brand to life and integrate my skills in graphic design I created hand-drawn illustrations, with the aim of tying in the joyful and exciting feeling of the brand throughout the user experience. The illustrations were made in Adobe Fresco, using the warm colours from my mood board to create a safe or inviting feeling, while adding in bold, punchy colours to evoke a sense of youthful playfulness - just as any good surf brand should.
Additionally, I made sure to choose my brand’s imagery very carefully, matching it to the tone of my illustration style as well as the tone of my brand. Therefore, I selected photos with warm, saturated hues that felt uplifting and inclusive.
Prototyping & layout
To create an experience that felt straight-forward and enjoyable to navigate, in my re-worked design I increased the spacing between components. This was both to allow the designs to breathe, as well as reduce the overall visual load on the user, perfect for a modern, chilled out surf brand.
Furthermore, this more minimalistic experience allows for exploring the various interactions and micro animations at ease, resulting in a brand that feels sleek, engaging and approachable.
The response
While learning a new software, this project gave me the opportunity to be really creative. I was able to create a full product design journey for a theoretical brand of my choosing, including the concept, elements of service design, UX, UI, branding, typography, colour, illustration, prototyping and micro animations.
I presented these designs during the IBM iX showcase to over 50 people where I received positive feedback. I'm really proud to have produced something of this extent and quality independently.
Reflections
I am delighted with what I have been able to achieve with this project; I have learnt how to use Figma as well as the best way to approach a project with such a powerful design tool. However, when I have the time I would like to continue to refine these design further as I gain knowledge and experience.
One change I would make is to better utilise my illustrations within cards and banners, to create something that helps to sell the brand rather than just perform a basic function. The photo I used in this banner (see right) did not compliment the orange colour next to it, and the equal split of image and text down made the banner feel disjointed. Improve this, I implemented subtle suggestions of brand and purpose into the banner to make the intention behind it feel clear and self explanatory to the user.
In an ideal world I would love to go back and complete a mobile flow for the re-worked designs, the exercise of doing so would be an excellent design exercise and help to really draw my vision for the project together.
