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.
Check out the prototype!
(Currently still in development)
Lix - a start-up company that offers educational institutions and student access to the required materials for different programs.
Qualitative research, idea generation process, concept development, mock-ups, prototyping.
Make the already existing platform more useful & viable for students.
This project was a part of my BA Digital Concept Development education. The company Lix wanted to further improve their platform and make it more than just a company that provided digital books. During the briefing, the company also provided us with 5 pain points they have discovered students have when studying: time management, organizing content, understanding content, structured reading, and preparation for/passing exams. The company wanted us to address all or some of those, so in this project, we focus mainly on improving content understanding/ organising for the students. I worked in a team with 3 other people and the duration of the project was about 2 months.
• Qualitative research • Six thinking hats for idea generation • Sketching wireframes • Mock-ups • Prototyping
• Adobe Photoshop • Adobe Illustrator • Adobe XD • Trello
• Increase Lix’ platform value for students • Give students a place to gather all their materials • Easy notes/ content sharing between students • Enhanced studying experience
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.
In step 1 our goal was to get a better understanding of the users, and in our case, those would be the students. That is why we decided to gather some qualitative data in the form of interviews and some quick tasks we had users perform. We mainly aimed to observe their studying habits, how they retain information and whether (and what) external sources they use (meaning outside of the required books in their curriculum).
The interviews contained questions about how they study, what is the best way for them to remember and recall information, how they prepare for class, how they prepare for exams etc.
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.
That is our problem statement that we work with throughout the project.
The current stage of the existing studying platform offers only access to books and highlighting. But based on the research we can see students use a variety of tools to study and having only an e-book and a highlighting tool is insufficient. Therefore, the direction which we decided to work in was to find a way to integrate other options that will enhance the student's learning experienc eand will fit with our extreme user profiles as well. And provide the students with one platform/ app for them to study instead of them having use multiple apps as we found out they did in our qualitative research.
Having our problem statement clear and what our users are, it was time to move onto probably my favorite step where ideas are made.
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.
During this project for the idea generation process we used a fun tool called The Six Thinking Hats to help us asses all our ideas. Since we are all creative individuals, having a bit of structure at this stage kept us on track and helped us evaluate our ideas better.
The idea we decided to go with was to create an extension to the existing program that will allow students to make and share notes with each other.
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.
The way we decided to go from an idea to an actual feasible solution was through prototyping. This step of making the prototype and the next one of testing it are very interconnected and we did jump between creating/ improving functionalities and testing them.
Initially, we made a list of features we wanted to add to the platform – sharing notes, sharing external sources, creating study groups, sharing with a specific person/ group/ the whole class etc. Then we took pen and paper and started sketching how all of those would look and how they would fit with Lix’ platform interface. We wanted to have all of these combined into one extension that will be added to the platform. In the beginning, we had a small column on the side pop up but once we tested it, it turned out to be too small and it was hard to fit everything into a small window. That is why we made the decision to have it expand and take half of the screen so that scrolling through notes would be easier. It is collapsible as well so students can easily close it if they want to read the book only and not have it in the way.
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.
Due to the time frame of this project we managed to test only the initial paper prototype. As mentioned, one of the main discoveries was that some people would like more space for the notes and so we increased the size of the sliding notes/ highlight panels which can be seen in the digital prototype. By doing the initial testing just on paper prototypes helped us discover an improvement we could make early on rather than discovering it later and having to put more effort into changing high-fidelity mock-ups for example. The testing of the paper wireframes helped us get a good base to build our digital prototype upon.
Further testing that should be done is to figure out the interactions within the prototype – the flow of sharing information, how exactly will linking additional sources work, how will they be displayed etc. For example, one interaction that needs to be improved is when sharing a note with someone/ group. What needs to be added are small boxes next to the name of a person/group that can be ticked so you can select multiple people/groups and a button to share.
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.
One big advantage of this project was the fact that the target audience was all around us since we were in university as well and finding people to interview and do testing on was quite easy. And even though the prototype is in its very early stages, we finished up the project by presenting our findings and solution to the representatives of Lix and they said they liked the proposed expansion INKS.
“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 >
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 >If you like what you see and need help with your design activities, get in touch!
diana@kichukova.com
