About the Project
Solace is the online store with handmade and unique ceramics products for anyone who loves the finer things in life.
I created this Web App during my UI Course at Career Foundry within 4 weeks.
Challenge
The goal of this project was to create a Brand Identity of the product, keeping the focus on user centred design (UCD) and on functionality following the popular design motto “less, but better” (Dieter Rams).
Building a Cohesive Brand
Branding is how a brand or product looks and what we think when we see it. Elements such as logo, typography, brand colours, images, tone and writing style are a powerful tool of creating visual recognisability of the product as well as its style.
Brand Guidelines
When designing a cohesive brand it's best practice to begin with defining the brand guidelines. Brand guidelines are a set of rules that define what the brand is and how it should be communicated to the users, both visually and in words. I started by careful consideration to how I want my product to “feel” and by building Brand Identity.
To go into more detail, I have developed the following elements that every Brand Guidelines document should contain:
1. Guiding Principles
Guiding principles will include anything that relates to the brand's values, personality, mission, and base foundations.
2. Logo
Solace means to give comfort or consolation. The name should emphasise the concept behind the products, which is being able to find inner peace in a busy everyday life without striving for perfectionism. To slow down, to find the beauty of mind and to take joy in the little things.
3. Color Palette
Colors inspired by stones, earth, clay, that brilliantly combine durability and aesthetic.
4. Typography
A simple, minimalist and modern typeface with the letter “a” from handwriting, suitable for handmade products. The typeface should have a minimalist look and not overwhelm or attract attention.
Use regular font for the body, bold for the part of logo and for heading and subheading to build up the hierarchy and improve navigation.
5. Imagery
6. Writing Style
The written content should include short but creative product descriptions. Each product should have a name that gives it a unique personality. It is important to tell product-related stories, describing the creative process and explaining the inspiration and the role of the product. Moreover it should include stories about Lenka and Zoya's life and work to create a strong connection between the customer and the brand. Topics that are also frequently discussed include handmade and sustainable product.
Style friendly, open, a little extravagant, creative, inspiring, but without loftiness. Simple and brief character of statements. Referring to spirituality, art but not naive and kitsch, rather modern and conscious.
Competitors Analyzes
To get an idea of the problem space, I searched for similar e-commerce apps and analysed which features make them easy and quick to navigate and most functional.
Specify the user’s needs
User Stories
The next step was to define several user stories in order to gather the requirements of the application from the perspective of my users.
User Flow Diagram
I put it all together as a single flowchart. This is where I start defining all of the screens for each of the flows.
Sketching & Wireframes
With the requirements in hand, I started sketching low-fidelity wireframes on paper and developing design solutions.
I transformed the low-fidelity into clickable mid- and high-fidelity wireframes using Sketch.
Evaluation
Usability Test
We have a lot of methods to evaluate our design and one of them is usability testing. To perform this test I wrote a scenario for each task and conducted it with 5 testers. Defining the objectives allowed me to evaluate the ability or inability of users to complete specific tasks.
I iterated my design bearing an important design pattern in mind: primary and secondary actions.
Final Wireframes
My final screens were created through many iterations based mainly on the results of user testing and feedback from others.
Responsive Design
As my product is a web app and lives on different devices, I created also tablet, and desktop website. To adjust a design layout for different breakpoint ranges I work with the responsive grid system.
Reflection
While working on branding and then on UI solutions for an e-commerce web application, I realised how beneficial strong mutual support between branding and the overall interface design can be for the product, its recognisability and memorability. If the design solutions match the overall branding concept of the product, this will make them support each other. This provides a more natural and harmonious sense of the brand in general and the specific interface as an integral part of it.
