One of the many tasks I had at BfR Professional was to design 3 big roll-ups that the company could use at events as promotional materials. Each roll-up is for one of their 3 best-known products.
(Currently still in development)
BfR Professional - a small start-up company selling fitness gear for a specific type of physical training using blood flow restriction training.
Graphic Designer / Content Creator
I had to create designs for roll-ups that fit the brand identity and prepared the final files for print in the correct format with the correct sizing, bleed, colour format etc.
The project itself was very clear and to the point - create 3 designs for roll-ups that the company can use during exhibitions at their booth. The main goal is to use them as a marketing tool and catch people's attention that pass by. They also needed to fit the visuals and feel of the physical booth itself. The reason why they wanted 3 roll-ups was because they had 3 main products they wanted to advertise and put focus on, and that the company is known for.
• Graphic Design Principles • Layouts • Sketching variations • Branding
• Adobe Photoshop • Adobe Illustrator • Pen & Paper • My two hands
• More attraction for the booth at the events • Expanded corporate identity • Stronger branding • Reusable marketing materials
At the center of GreenCarLane’s consumer platform is the EV recommendation engine that helps people in their search for their new electric vehicle. To start off the platform strong, the team and I worked on research, personas, defining user flows, creating the MVP (minimum viable product), testing wireframes at various stages, and developing the UI.
I joined the team at GreenCarLane while they were at their research phase and jumped straight into working with the collected both qualitative and quantitative data from interviews and desk research.
The main focus was to find pains users have when it comes to EVs and research and to define their needs. We looked for patterns and what were some common things people experienced when looking for an EV.
With the available data we:
• Built an empathy map on the EV buying experience to have a better understanding of what buyers say, think, do and feel.
• Defined user pains and gains
• Used Maslow’s hierarchy of needs to see where GreenCarLane would fit.
• Looked at jobs-to-be-done where the main objective was to understand what consumers would “hire” GreenCarLane’s platform for.
Using all those tools to look at the data also helped us build more in-depth personas with user journeys. We identified some pain points they have when purchasing an EV and based on them brainstormed ideas on how to solve them and listed specific features/content we could later use when building the platform. At this stage there was also an initial concept of what GreenCarLane could be as an EV-hub.
User flow became very useful when trying to figure out the ‘pathways’ we would like to have on the platform. They helped us structure the list of features/content to be in line with the user journeys.
Wireframes are where all ideas up to this point started to come together. It is the stage where the concept became more tangible and specific. The initial wireframes included almost all ideas and things we wanted GreenCarLane’s platform to have – a place for consumers to find information on EVs, help them choose the correct one and guide them through the purchase journey. The wireframes addressed the user's need for an option to test drive a car, customization, guidance on car selection, comparing cars etc., just to name a few.
The main goal with the wireframes was to:
• Give ideas structure.
• Get an overview of the platform.
• Use it to test the concept.
The team reached out to users from the target audience and had one-on-one interviews where we tested the wireframes and overall concept.
These sessions helped us:
• determine if it met the needs of the customers.
• validate what ideas worked and what to focus on.
• got their feedback that we could use in the next stages of development.
Looking at user feedback and the overall platform wireframes it became clear that we needed to define the minimal viable product (MVP) and focus on the development of it and use it as a base to add on more and more of the features that were in the wireframes. In the case of GreenCarLane the MVP is the EV recommendation engine – a series of questions that relate to car specifications, lifestyle, and personality that consumers answer in order to find out which electric vehicle is most suited for them.
Therefore, the recommendation engine mock-ups were made first and then the landing page as well as a few other additional subpages. The mock-ups were made in Figma and are a functioning high-fidelity prototype. Those were handed in to the development team to be coded and launched. Alongside the mock-ups the design team handed them a style guide – you can see a small example from it in the images below. The design team also made a mobile version of the platform.
Below you can see examples of screenshots of the design in Figma. The mock-ups and prototypes can be shown in more detail upon request.
The way I tackled this task was initially to set a clear goal with the company on what the roll-ups will be used for and what is it that they try to achieve with them.
I started my process by defining what type of content should go on the roll-ups: A catchy title/slogan incorporating benefits from using the product, pictures demonstrating the use of the product, тхе name of the product, the company's social media handles etc.
Once I had laid out all the necessary elementsand done the written content, I moved on to the visual design. I started by doing a few sketches on paper trying to think of some graphic elements to incorporate throughout the roll-up design. As well as get a feel for where the different content can be placed and what the over picture would look like. I had a few layouts in mind, and I did basic sketches of them so I can quickly and easily compare them and pick one I thought worked best.
The small task, we had a few students do, was to have them read a short text as if they were preparing for class and at the end had them answer a few questions about the text. We had the text in digital form since Lix’ platform and sources are also digital, and we wanted to observe how they handled those types of study materials. While they were reading, a teammate and I were observing how they were handling the text – whether they were taking notes (either digitally or physically), underlining/ highlighting, were they looking up terms etc.
Some findings we had from the qualitative data that stood out and were most repetitive were:
· Students use external materials when studying –ex. videos, articles, definitions of terms, etc.
· Most reply on classmates to get a different perspective or explanation for things when a topic is unclear.
· Students often take notes on apps such as OneNote, Word etc. since paper notes tend to get lost.
Based on the interviews and data collected we did an exercise similar to card sorting to group different thinking and behavioral patterns among students. We looked at the mental models the students have. For example, writing things down and highlighting help people memorize information. Or when students find themselves not understanding a term or subject, they looked into external sources such as classmates, the internet etc.
We took the information from the interviews and mental models and created stereotypes of students’ extreme users. This later on helped us look at the platform through the perspective of different mindsets and goals the users have.
· The dummy - a user who struggles with understanding and memorizing things.
· The lazy maximalist - a user who tries to get good grades with minimum effort.
· The e-books hater - a user who is not happy with the e-books reading experience, as it doesn’t offer him the same perks as physical books and papers and feels like he remembers less.
· The geek - a user who puts a lot of effort into studies, takes notes when reading, and goes out and beyond to prepare properly.
The goal of having these user profiles set out, was to try and find an optimal solution that would fit the majority of them. Of course, one person would not fit perfectly into one category and most of the students are a mix of 2 or more. However, by creating a solution that would cater to these extreme users, we ensure that it would also be valuable to a wider spectrum of students. It also helped us look into things we wouldn't normally think about.
Once we had our qualitative data and findings, we decided to have a look at Lix’ platform.
These 3roll-ups are basically an extension of the company’s corporate identity, therefore keeping their visual identity consistent was key. Thankfully, they had a small design manual left by the designer of their visual identity that I referred to for fonts, colours, visuals etc. The company also had a lot of picture materials that I could grab and edit. My main job was to pick the correct elements and put them together in a layout. I did decide to add green triangles (that I also had in my sketches) that would unify the 3 designs and have a good background for the text.
After that I started with some sketches on paper. I thought the 3 elements (hairdryer, scissors, and comb) went well together and liked the circle element uniting them. So I took those and made them into vectors in Adobe Illustrator and started moving them around to see how they fit together best. As I was doing that, I thought that having the circle be an extension of the hair dryer would bring the elements together. I also picked a font for the name of the salon “Кичукови“ that wouldbe part of the logo and would fit in with the elements.
Initially, I also had “hair salon” as part of the logo but after I tested that version on some people and scaled it down, it turned out it made the logo too crowded and was not necessary since the symbols were telling as to what the company is representing– a hair salon. As stated by the people who I showed it to.
Once I was satisfied with the final main version of the logo, I tried to figure out different versions that would look better when scaled. I made 3 variants and tested it again on other people. Based on the feedback the 2 final variations of the logo are the ones you see here. One with the circle and name and one that is more simplified with just the elements and the name.
During my process I was working only with one neutral colour for the logo since if the logo works well in grayscale, it will be fine colourised too. For the main logo I picked the golden colour. It looked a bit flat, so I added a bit of shimmer to it with a gradient (more about colours in the next section) and it brought everything together nicely. For a darker variant of the logo, I picked a gradient variation of the gray colour. And these are the final versions.
When I had some ideas of what I was working with I moved on to the creating of the initial designs in Illustrator. I played around with the layout and the positioning of different elements (that I took from my sketches) until I had somewhat of a base to work with. When I had a few variations, I decided to show them to a few people and the owners and get their feedback on them. People did like the small illustration that demonstrated the targeted area (seen on the white roll-ups)so I kept that. And did rearrange some content to have space for everything.
1. You get an overview of who has what personal information on you (and ideally you can change it)
2. When needed youget to choose who and when you share your data with. For example, no need topull out your whole wallet to find an ID when you can just scan your phone and be verified.
When it comes to the verificationpart mentioned in step two, we imagined it done by NFC. Since most phones have NFC and are in our pockets anyways, we thought those could be used as communication devices for our concept as well. And since IOT and NFC are becoming more and more prevalent in our lives, we assumed that those technologies will be more broadly available in the future as well.
When it came to the security side of E-ME, we looked into blockchain as it offers a lot of security since it is hard to hack. Therefore, a system like (or similar to) blockchain would be a suitable solution to solve the security concerns that may arise. However, it does have its downsides as well,but since we are being a bit futuristic in this concept, we assumed that it will be more advanced and available in the future.
If we look back at our students’ extreme user profiles, we can see that the solution benefits most of them as a group. The geek will take notes and can help with explanations. The lazy maximalist can benefit from those by reading only the highlights and still get the essence of things with less effort. The dummy will get a variety of perspectives and different media options for studying from classmates and find at least 1 thing that will help them memorize things. Of course, those are true for the extreme users, however, as we said most students fall in the spectrum between those users and the solution would be beneficial for them too. Whether it be forming a small group and sharing notes between them or checking out the external sources other classmates have shared. Also, this extension will give the students a place to gather all their sources and notes and come back to them easily.
A thing I had to occasionally remind myself is that things will look much bigger once printed (the size of the roll-up was 220 x 79 cm) so getting the proportions and font size right were an important part of this project. I made sure all the colours looked correct – edited just a little bit the pictures and adjusted all the green colours on them so they matched with the visual identity. And once I had gone over all the details. I presented the final design to the company and it was approved. I locked all the layers, embedded the images, and transformed the text into outlines just to be sure nothing will change during printing. And sent the files to the print shop.
A week later my colleagues and I got to see the final physical product. And another few days later we got to use them at an event.
1. Log in securely and from there you can receive requests from near by devices and approve access.
2. Find relevant personal data you need to check/show.
3. Get an overview of all the companies that have access to your personal data (and change your consent if possible).
Once we had the base wireframes figured out, we build digital mock-ups of how the extension would look like on the platform. We kept Lix’ interface, colours etc. so that it fit in well with the existing elements. Below you can see some screen shots of the prototype and some basic initial interactions that are within it.
When a user clicks on a highlighted text the INKS extension pops out. There are 2 main views on the extension ‘Your Notes’ (first image) and ‘Shared Notes’ (second image).
On the ‘Your Notes’ view the student can:
1. View their notes
2. Go to ‘Shared Notes’
3. Add a Note
4. Add a link/image/video etc to a note
5. Share a note (with a person or a study group)
In ‘SharedNotes” students can either view all notes or filter them so they see notes from a specific person/group only that have been shared with them. They can also save a note if they want to.
Before sending the final files for printing I printed them myself just to see how they would look. And even though the size of the paper I used was much smaller than the actual size of the roll-ups it still gave me a good sense of how the layout would look and if everything looked well printed.
And here you can see the posters in real life at an event.
User Scenario 1
Anna goes to visit the doctor.
When Anna arrives at the doctor's she is asked for access to some of her data relevant for the doctor.
Anna scans the device that is at the clinic and scans her to open the app.
Then she confirms in her E-ME app that she grants permission for her data to be viewed.
User Scenario 2
John is trying to buy alcohol at a store and is asked to verify he is over 18 years old.
1. John scans his face for identification.
2. John clicks on "Manual Verification" and finds the tab with the relevant information he needs to show.
3. The cashier sees John's age and sells him the alcohol. Now John can go get drunk.
The 3 icons I needed to design were a phone, a Facebook icon, and a location pin. Those were the 3 elements that would appear on a few designs so I made them in advance, and I can just copy paste them between elements and keep them consistent in size and style. They are primarily used in the golden colour but have a white variation as well that can be used when there is a background (even though I aim to use the primary ones if possible). They can be used in the gray colour too if the design calls for it.
One of the most important designs I needed to create were the business cards.
The main form of communication between the customers and hairdressers is through phone calls currently so that is why I first put the phone number. The next channel of communication is Facebook, therefore it is also included on the business card. And the address is the third element.
The price list has "….." where the number should be since the prices were not decided upon yet and can be added later.
I used the hairdryer for this design and had it pointing towards the top part of the text and “leading” the eye of the client, so they get the info that this is the working hours and start at the beginning.
I worked with BfR Professional for over a year and I created a lot of graphics (and other types of content) for them. These 3 roll-ups were definitely just a small part, but I enjoyed making them a lot and the entire process. It was also one of my first encounters where I had to design something for print, and something quite big! Thankfully, they turned out fine and all the colours and sizing were exact. A small thing I would change/ improve is to use a full-size picture on the white roll-up as well similar to the way I used the pictures in the dark ones.
“Diana has been able to integrate the team easily and quickly which has been a tremendous benefit. It is as if she was there from Day 1. She is upbeat and brings joy to the team which in a startup with bumpy rides is a great anchor point to have. Diana has the ability to understand what the team is trying to do, why and how. She has then been able to contribute to the work with her knowledge, skills and experience, also providing guidance and challenging assumptions where needed. She is a great fit to the team and to the company. Taking the lead on activities and initiating others, providing impactful results.”
Tim H. Paarup Dridi
Founder at GreenCarLane
In this project I showcase my process of creating a visual identity and present the final results. It also includes some materials I created as a part of the salon’s corporate identity.
Read More >
GreenCarLane is the new go-to platform when it comes to electric vehicles. It strives to educate consumers, help drivers find their new EV, and assist government and businesses in their efforts for a greener future.
Read More >
INKS lets students share notes, highlights, and content among themselves easily. It is an extension to the already existing platform of the company Lix that supplies students with digital curriculum books.
Read More >If you like what you see and need help with your design activities, get in touch!
diana@kichukova.com
