Hi, I’m Elena, a Graphic/Motion and Web/UX Designer, keen on digital experiences, getting beautiful products together through deep understanding of user interaction and business needs.
Connou App
Responsive Website Design
The Problem
Connou is an AI – based app connecting people according to their mutual interests. It has a landing page describing its, for now, primary functionality: connecting students inside their university. We needed to expand the web covering all of the functionality the platform will give.
The Solution
In a team of developers, UX/UI designers and copywriters we developed a multi-page website introducing the new functionality of the app.
My Role
I was responsible for the UX, UI, visual design, motion design, usability testing, gathering insights and iterating the designs, the mobile version of the web, while the developers are doing their magic implementing the website.
Throughout the project we followed the Design Thinking methodology:
Empathize – Define – Ideate – Prototype – Test
In the First Empathize Stage we conducted:
- A series of interviews with people to understand their pain points and needs
- Created empathy maps
- Created a Customer Journey Map
- Drew a Problem Statement
- Created Personas based on the findings
Primary Persona
As part of the Define Phase based on the user interviews we’ve drawn the key user Pain Points and the Problem Statement:
Pain point 01. Personal
Need to overcome shyness to meet new people in the new city and University
Pain point 02. Language
Need to improve Spanish to overcome language barrier to meet new friends
Pain point 03. Interests
Meet new people according to her interests, which are quite specific
Problem Statement
Ellen is an Arts and Design freshman student who needs to meet new people according to her interests because she’s a newcomer to the city and doesn’t know anyone just yet.
CJM
We’ve built a Customer Journey Map, and here’s a fragment of the approximation of the user to the product.
Ideation
During the ideation phase I came up with a series of paper wireframes for the landing page, which was the most challenging part, since it had to represent the three facades that app has: the University, the Corporate and the Global sections.
Paper wireframes
Getting to the Prototype Phase we needed to think of the Information Architecture, this is when we drew out the site map.
Responsive Web Sitemap
Prototype
We created a High Fidelity prototype for the Responsive Web in Figma as part of the Prototype Phase of the Design Thinking process in order to do the early testing with users.
Test
I conducted two rounds of usability studies with the high – fidelity prototype, iterating the design at each stage to improve the user experience.
Usability study: Findings
Round 1 findings
1. Users need a simpler navigation
2. Users need a hero image for the landing page to introduce the content
Round 2 findings
1. Users miss a Book a Demo Call-to-Action button in plain sight
2. Users need a clearer Investor’s page, better structured
Refining design: High-fidelity prototype for the web
You can play around with the high fidelity prototype here.
You can play around with the mobile web prototype here.
Results
Most users found the web engaging and expressed the desire to download the app. Overall design and final navigation, especially through the footer came gave 100% positive feedback from the usability testing users.
Future Prospects
The company currently has ongoing contracts with two universities and is planning to expand further, once the new website is launched and once we add new functionality to the app.
Free Tree Taoist Restaurant
Order Customization App with a Gamification Element
The Problem
The challenge of this project was to create an order customization app for a unique restaurant. In our case it’s Free Tree Taoist restaurant. It’s based on the Taoist belief that food can balance out our emotional state.
The Solution
I came up with a flow that takes the user through a quick mood quiz and the food is offered to them according to the their current state of mind, this adds a gamification element to the flow to engage users.
My Role
I was responsible for the UX, UI, Illustrations, the usability testing, while the developer part is still on hold, since it is a study project.
Throughout the project I followed the Design Thinking methodology:
Empathize – Define – Ideate – Prototype – Test
In the First Empathize Stage I conducted:
- A series of interviews with people to understand their pain points and needs
- Created empathy maps
- Created a Customer Journey Map
- Drew a Problem Statement
- Created Personas based on the findings
Primary Persona
As part of the Define Phase based on the user interviews we’ve drawn the key user Pain Points and the Problem Statement:
Pain point 01. Time / Effort / Skill
Can’t cook elaborate meals at home.
Pain point 02. Interface
Struggle to choose from a long menu, need for assistance, e.g. guide or imagery.
Pain point 03. Delivery
Delivery takes too long at times. Time estimates are not accurate, the food gets cold.
Problem Statement
Maria is a Data Analysis student who needs guidance when placing food orders because she has trouble choosing from a variety and making a decision.
Ideation
During the ideation phase I came up with a series of paper wireframes using crazy eights technique, among others. This was a fun exercise, since I came up with a flow including a gamification element, keeping in mind how we all like quizzes and finding out personalized stuff about ourselves.
Paper wireframes
Getting to the Prototype Phase I needed to think of the Information Architecture, this is when I drew out a user flow for the app.
User flow
Prototype
I created a Low Fidelity prototype for the Mobile App in Figma as part of the Prototype Phase of the Design Thinking process in order to do the early testing with users.
You can check out low fidelity prototype for the app here.
Test
I conducted two rounds of usability studies with high and low fidelity prototypes, iterating the design at each stage to improve the user experience.
The usability study included five participants, 3 male, 2 female, for all of the participants English is not their native language. The usability study was unmoderated, each user performed the testing at their own home.
Usability study: Findings
Round 1 findings
1. Users need better navigation
2. Users want to be able to order without logging in
3. Users want a more descriptive prototype
Round 2 findings
1. Users need contact information on the contact page
2. Users need a progress bar on the order tracking page
3 .Users need the price of meals put on the menu before checkout
Refining design: High-fidelity prototype for the app
Please play around with the high-fidelity prototype of the Free Tree app here.
Results
Most users loved the gamification element of the flow, which makes the underlying mechanism of the app a success.
Future Prospects
Despite most users loving the gamification element of the flow, some questions arose regarding the content of the app (the suggested menu items, for instance), which means that for commercial use the mechanics I came up with work well, but the content must be revised by the restaurant and the business itself.
Emotions
A dedicated mobile app and responsive website experience to help kids learn about emotions and empathy
The Problem
Emotions was born out of a need to fulfil a market niche, where there’re not many apps that help kids learn about emotions and empathy, therefore emotional intellect. The parents I talked to do express concern about their kids sometimes lacking to understand their own emotions and those of others. Which is why I decided to come up with a tool to help kids and their parents with that.
The Solution
In order to resolve the problem I came up with a tool based on research which turned out to be a dedicated mobile app and a website to help kids learn about emotions and empathy alone or with their parents.
My Role
I was responsible for the UX, UI, Motion design, Illustrations, the usability testing, while the developer part is still on hold, since it is a study project.
Throughout the project I followed the Design Thinking methodology:
Empathize – Define – Ideate – Prototype – Test
In the First Empathize Stage I conducted:
- A series of interviews with parents, grandparents and other kids’ caretakers to understand their pain points and needs
- Created empathy maps
- Created a Customer Journey Map
- Drew a Problem Statement
- Created Personas based on the findings
Primary Persona
As part of the Define Phase based on the user interviews we’ve drawn the key user Pain Points and the Problem Statement:
Pain point 01. Time
There isn’t always time to teach kids about emotions and empathy.
Pain point 02. Interface
Feeling skeptical about existing tools to help kids learn about emotions.
Pain point 03. Effort
Can’t always teach kids about emotions and empathy on their own example.
Problem statement
Sheila is a busy working adult and a mother of two who needs a tool to help teach her kids about emotions and empathy because she can’t always teach them by her own example.
Ideation
During the ideation phase I came up with a series of paper wireframes using crazy eights technique, among others. This was a particularly difficult phase due to the novelty of the design, since there’s almost no competition in the area of emotion teaching apps or websites for children or adults.
Paper wireframes
Since the whole thing is a multi-platform experience (mobile app and web) I created a Responsive Web Sitemap as part of the project to plan a clear Information Architecture and user flow.
Responsive Web Sitemap
Prototype
I created a Low Fidelity prototype for the Mobile App and Web in Figma as part of the Prototype Phase of the Design Thinking process in order to do the early testing with users.
You can check out low-fidelity prototypes for app and responsive web.
Test
I conducted two rounds of usability studies with high and low fidelity prototypes, iterating the design at each stage to improve the user experience.
Usability study: Findings
Round 1 findings
1. Users find it confusing without a clear user flow
2. Users miss comments section in the Emotions Diary
3. Users find the prototype not sufficiently descriptive
Round 2 findings
1. All users find the app and website fun to use
2. All users successfully complete user flow
3. Users miss sounds in the app and website
Refining design: High-fidelity prototype
for responsive web
Please play around with the high-fidelity prototype of the Emotions app here.
Results
I’ve tested the final app with users: kids aged 5 – 10 years old (and adults, just for fun). The results were astonishing. Both kids and adults loved it! 100% of kid users loved the Guess Game feature most, despite the fact the amount of images is limited the kids would play it over and over again.
Future Prospects
As a conclusion I would love to bring the app to life getting in contact with freelance developers and launching it to the app stores. The business application for it would be market the app to schools and educational establishments, psychologists and to general public, as it helps raise awareness of the importance of emotional education.
Tails Animal Shelter
Pro Bono Responsive Website Design
The Problem
As an animal lover myself, I decided to create a website for an animal shelter as a pro bono project to offer the prototype to an animal shelter that might need it. Talking with people who would love to have a pet I found out that most of them find adoption the best way to go, but as research has shown, a lot of shelters only have a social media page at best, and not a dedicated website, which is where the idea for the project comes from.
The Solution
I developed a flow that takes the user through from the list of the pets up for adoption to the profile of each pet and then to contacting the shelter in case the additional information is needed.
My Role
I was responsible for the UX, UI, the usability testing, while the developer part is on hold.
Throughout the project I followed the Design Thinking methodology:
Empathize – Define – Ideate – Prototype – Test
In the First Empathize Stage I conducted:
- A series of interviews with people, mostly animal lovers who would consider adopting a pet from a shelter, to understand their pain points and needs
- Created empathy maps
- Created a Customer Journey Map
- Drew a Problem Statement
- Created Personas based on the findings
Primary Persona
As part of the Define Phase based on the user interviews we’ve drawn the key user Pain Points and the Problem Statement:
Pain point 01. Time
No time to go to the shelter and meet the pets in person.
Pain point 02. Interface
Looking at pets online makes the persona feel like they are looking at a catalog of living things, thus makes them feel guilty.
Pain point 03. Effort
Feeling guilty about not being able to adopt every pet in the shelter.
Problem statement
Fiona is a busy working adult and animal lover who needs to access pets up-for-adoption descriptions in advance because she can’t visit the shelter in person and meet the pet to adopt.
Ideation
During the ideation phase I came up with a series of paper wireframes using crazy eights technique, among others. This was quite a challenging activity, since I had to keep in mind all of the Pain Points that came out during research and make the flow as seamless as possible.
Paper wireframes
Getting to the Prototype Phase I needed to think of the Information Architecture, this is when I drew out the site map.
Responsive Web Sitemap
Prototype
I created a Low Fidelity prototype for the Responsive Web in Figma as part of the Prototype Phase of the Design Thinking process in order to do the early testing with users.
Test
I conducted two rounds of usability studies with high and low fidelity prototypes, iterating the design at each stage to improve the user experience.
Usability study: Findings
Round 1 findings
1. Users need a sticky menu
2. Users miss a separate Contact us page
3. Users miss filters to sort out selection
Round 2 findings
1. Users need widgets for calling and online chat
2. Users need a subscription form for donations
Refining design: High-fidelity prototype
for responsive web
You can play around with the high fidelity prototype here.
Results
Most users found the design appealing and the website easy to use and navigate through, which makes it an altogether well – grounded user experience for future use.
Future Prospects
The pet adoption flow turned out quite usable and easy to navigate, and a pretty universal to use, so the next steps would be find an adoption center or an animal shelter and offer them to use it, in case they need to.
Together App Landing Page
Gamification Flow
The Problem
The idea for this project was to create the concept for a landing page to ‘hook’ the user on to get going and exploring the website further and entice the user, to spark their interest to download the app.
The Solution
I developed a concept flow that takes the user through the introduction of the app phrase by phrase by a click-through flow, each page uncovering more and more information. This way the user gets their endorphins and excitement flowing together with their interest sparked around the idea of what the product might be.
My Role
I was responsible for the UX, UI, usability testing.
Throughout the project I followed the Design Thinking methodology:
Empathize – Define – Ideate – Prototype – Test
In the First Empathize Stage I conducted:
- A series of interviews with people to understand their pain points and needs
- Created empathy maps
- Created a Customer Journey Map
- Drew a Problem Statement
- Created Personas based on the findings
Primary Persona
As part of the Define Phase based on the user interviews we’ve drawn the key user Pain Points and the Problem Statement:
Pain point 01. Personal
Need to overcome shyness to meet new people in the new city and University
Pain point 02. Language
Need to improve Spanish to overcome language barrier to meet new friends
Pain point 03. Interests
Meet new people according to her interests, which are quite specific
Problem statement
Ellen is an Arts and Design freshman student who needs to meet new people according to her interests because she’s a newcomer to the city and doesn’t know anyone just yet.
CJM
We’ve built a Customer Journey Map, and here’s a fragment of the approximation of the user to the product.
Ideation
During the ideation phase I came up with a series of paper wireframes. This was quite a challenging activity, since I wanted to create a flow that would intrigue the user, engage them to stay on the website and keep on investigating the website and make the landing page spark their interest to download the app.
Paper wireframes
Prototype
I created a prototype in Figma as part of the Prototype Phase of the Design Thinking process in order to do the early testing with users.
You can play around with the high fidelity prototype here.
Test
I conducted one round of usability studies with the high fidelity prototype, the study included 5 participants: 2 females, 3 males, all of them non-native English speakers.
Usability study: Findings
Round 1 findings
1. Users are intrigued and engaged by the gamification flow
2. Users want to explore the website more and feel curious about downloading the app
3. Users miss more information on the website, since the landing is quite engaging
High-fidelity prototype for the
Landing Page Gamification Flow
Results
All users found the gamification flow engaging and appealing. The aim to spark their interest to investigate the website further was accomplished, which makes the gamification flow a success.
“Oh, cool! It’s like a game, I love it!!”
Study Participant 1
Future Prospects
This gamification flow is one possible concept of approximation the the landing page design for the multipage website. Another concepts are still to be tested to figure out which flow works best with the users.