MIRA SOLDO WEBSITE

UX/UI, Branding, Illustration

INTRO

This long project put me in charge of the complete creation of an online solution for a language teacher, Mira. She needed a website that showed her skills, was a contact hub while showing her personality and vibe.

I did an integral aprroach to the project, from the UX point of view to the visual aspect, touching branding and copywriting in the process.

The close work with the client, sharing the advances and taking the feedback was a very important part of the process. Also was the fact that, for the sake of a future autonomous update of the website, it was necessary the use of a website building platform, in this case, WIX.

  • Team: me
  • Role: Research, branding, copywriting, UI, illustration, WIX integration
  • Tools: Google Forms, Tableau, Figma, Invision Freehand, Inkscape, Adobe Illustrator, Adobe Photoshop, WIX builder
  • Timeline: 3 months
VISIT MIRA'S SITE

CHALLENGE

" How Might We present Mira to possible students in a way she can be the best option to learn a language, even a competitive alternative to a school?"

RESEARCH

The research went in three clear directions:

  • Thorough interview with Mira, to really catch the essence of the project and her real needs.
  • Benchmarking: knowing what is out there and how to align with the market, while finding the USP (unique selling point) for Mira's website.
  • Survey: I launched a survey to gather information about the users needs.
Benchmarking
Lean Survey Canvas
Results of the survey

With all this information I was able to build an affinity diagram, from wich our protopersona and user journey were born. The general guidelines, such as the problem statement - the one displayed in the challenge, the jobs to be done, or the user statements were the foundation for the website.

Affinity Diagram
Protopersona
User Journey

THE WIREFRAMING

We took a couple of ideation sessions with Mira herself. They were helpful not only because of the ideation itself, but because through her ideas I was able to see clearer what was her vibe and what she wanted people to see from her. This was going to be very helpful in the next stage (branding and copywriting). With the ideation sessions in InVIsion Freehand, we were able to have a clear structure of the website, and after some information arquitecture work, I built a wireframe for the website.

Wireframing

BRANDING AND COPYWRITING

Finding your voice within your field is always a complicated thing. In this case, it was crucial, because one of the most important points of the project was connecting with the vibe of Mira and being able to transmit it to the users. I did different exercises and studies to find both the voice and the tone of the website.

Word foundation
Hola! Graphs

Once the voice and the tone of the site was set, a key part was finding the leitmotiv for the website. This first sentence was important because it was the first point of contact of the user with the site, and thus with Mira. The mood had to be set from the beginning, and that sentence was the perfect opportunity for that. Also it was very important for the visual aspect. Finding a sentence would help with the visual ideas.

LEITMOTIV

"Learning languages never felt so good."

UI AND ILLUSTRATIONS

The election of colors was very clear since the beginning. Relax, nature, professionalism, close relation were some of the words around the project since the beginning. With that in mind the primary color was purple, with green as secondary and yellow as the action color.

Basic Design System for the website

One big constraint of this project was the platform that was going to host the website. From the very beginning it was clear the a common Website builder had to be used, since the client needed to be able to update it in the future without coding. WIX was the election, and that already was putting constraint in terms of fontfaces or display resolutions.

In terms of illustration, it was crucial to convey the vibe, the message and catching the eye of the target user. From the beggining of the project I was working in designs (even before the branding or the copywriting exercises). Here you can see some sketches of ideas that were handled in the process.

Tree sketches
Stones sketches
Ideas flowing from head sketch
Monument bulbs sketches
Puzzle mind sketch
Puzzle mind evolved sketch
YOur peace retirement sketch
Tech Guy sketch

THE FINAL WEBSITE

The final result is online. It can be checked in Mira Soldo's Website.

The website was optimized both for desktop and mobile use, according to the WIX standards. Here you can check some screenshots of the website.

Screenshot 1
Screenshot 2
Screenshot 3
Screenshot 4

NEXT STEPS

The next steps for this website depend entirely on the performance of it during the first months. So far it is putting Mira online, and the difference in visibility is evident. Some other ideas would help improve that presence, but it would always depend on the volume of business the client would like to have. Some of this ideas would be:

  • Integration with Calendly for the "first interviews" for a direct and easy first contact.
  • Groups section, language exchange groups, coordinated by Mira.
  • Eventually, and since the Mira's product happens online, a growth of the "company" that would include a person managing the website and online presence. This way the website could be out of WIX and out of the constraints that this platform has.

LEARNINGS

  • I had to push myself further into branding and copywriting, even attending to specific courses to fully understand this vast areas.
  • Illustration was something I had done in the past and catching up with the last software developements has been a nice surprise. It is something I definitely want to do more in the future.
  • WIX (or any other website builder) is nice, but has a lot of constraints and sometimes it is almost imposible to translate your design there. At the same time, being able to understand and use it to its full potential takes time (language versions, mobile adaptations)

Thanks for reading!