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.
Check out the consumer website HERE.
(Currently still in development)
GreenCarLane – a start-up company that helps people find their new electric vehicle and provides educational content. They also work with institutions to help develop the charging infrastructure.
UX/UI design, research, mock-ups and wireframes, user flows, prototyping and testing.
Develop GreenCarLane’s online platforms. One targeted towards consumers and the other towards government and institutions.
This project can be split into 2 different parts: 1) GreenCarLane’s platform for consumers and 2) GreenCarLane’s platform for governments. The graph below shows a better overview of GreenCarLane’s target audiences and what it strives to be as an all-inclusive platform for the EV (electric vehicle) market. This page of my portfolio focuses on the development of the government side, and later on, I will add my work on the consumer side as it is still in development. I can provide the contact details for the founder Tim upon request if you would like to get a reference. The project involved a lot of internal communication between a variety of employees - UX/UI designers, content creators, front- and back-end developers, and data analysts.
• Wireframing • Mock-ups • Prototyping • User testing • User Flows • Personas • Interviews and desk research • Jobs-to-be-done • Empathy maps
• Figma • Miro • Slack • Adobe Illustrator • Adobe Photoshop • Typeform
• Guidance for buyers when purchasing an EV - before, during, and after (consumer) • A hub on all things related to EVs (both) • A diverse set of useful tools (government) • Educational content on EVs (both) • Consistent UI design & good UX (both)
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 government side of GreenCarLane’s platform focuses on providing municipalities and employees with relevant tools and data they can use to achieve their goals for a greener future. The platform aims to provide them with information and assistance on electric vehicles and infrastructure.
Throughout the work on the government side the team had meetings with some municipalities both in and outside of Denmark. The goal of the sessions was to get to see how they operate, what goals they have and to introduce them to GreenCarLane. We have presented some municipalities with the concept of what the platform can do and others we have shown some of the more specific wireframes and mock-up, so we have had continual feedback and dialogue with them.
After each meeting the team would debrief and brainstorm ideas. Alongside the meetings we did desk research on the initiatives municipalities have that can relate (or are directly connected) to EVs.
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.
Another point of interest was what are the direct and indirect competitors to the company. The competitor analysis helped identify what GreenCarLane has in common with them and how to differentiate itself on the market.
For us as a team, this research helped us narrow down the focus. Alongside with the municipalities meetings, it helped define the features of the platform and become more concrete in what GreenCarLane would like to offer.
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.
Once there was feedback and research to work with, the team made a list of features that the platform should include. We used MoSCoW prioritization to evaluate them. Later in the process they were visualised and put into the context of the website.
The goal of the platform is to provide value for municipalities and their needs.
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.
Before starting with the wireframes, the team made information architecture of the content the platform should include. The wireframes started broad but were narrowed down to an MVP – the very core of what we offer. In the end it was a small website that had a Dashboard, Interactive Map, and a Task Overview. During this stage we made some of the wireframes into low-fidelity mock-ups to test by showing them to some municipalities. The results and feedback helped improve the UX on the platform, and more specifically the flow and grouping of information.
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.
For me, personally, this is probably my favorite part of a project. Taking the plain wireframes and bringing them to life. This stage of the project involved:
• Research into data visualization tools
• Design of filters and map icons.
• Designing the UI for the government side of the platform
• Choosing relevant images
• Evaluating a few different visual designs
• Connecting frames and making them into a prototype
• Testing and adapting according to feedback/changes
The main tool used here was Figma. Alongside a bit of Photoshop and Illustrator.
I can show more of the mock-ups and platform only upon request, due to confidentiality. And I’d be more than happy to talk about my work process and the progress made on the government platform of GreenCarLane.
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.
The work process in GreenCarLane was very dynamic and agile. It was very interesting to have these 2 directions of the platform to work with (one involving government institutions and the other just consumers). And even though the main topic was always related to electric vehicles the user journeys of the personas and goals were different and therefore the flow and interactions had to reflect that. I was part of a diverse team involving other UX designers, data analysts, programmers, content creators etc. As a UX/UI designer I worked in close collaboration with all of these people and enjoyed bringing everything together into a cohesive design and a smooth UX.
“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
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 >
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.
Read More >
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 >If you like what you see and need help with your design activities, get in touch!
diana@kichukova.com
