TeLetreo
UX/UI design

Summary

Users

Spanish-speaking students and teachers in higher education and writers

My role

Graphic and UX/UI designer, co-founder in TeLetreo.

Timeline

2 months (planning and organization), 2-3 weeks (initial design)

Tools

Illustrator, Photoshop, Figma, Pen and paper, Miro.

teletreo nombre.png

Format

Desktop + Landing Page

Methodologies

Startup Strategy
User research
Personas
Branding and visual identity
Demo and Prototyping

Project Overview

TeLetreo is a startup I created with an amazing team of 2 engineers and a linguist. This is a project of a digital language assistant tool for Spanish. TeLetreo is yet in its pre-seed phase but we have been able to write and develop the idea through documentation, a demo and a landing page.

Visit TeLetreo's website

 
team teletreo.png

Scope and problem

Being at is incubation phase, we have been focused on writing our objectives, structural organisation, user research and preparing our project to pitch it to incubators and other stakeholders to help us further in the development of our project.

We needed an initial demo and graphic identity for TeLetreo to present our idea.

 

The solution process

We jotted down as a group ideas, primordial data on users and then I proceeded with the initial visual identity, product demo and landing page.

Brainstorming ideas and user research

We used Miro to jot down and share ideas regarding the use of the product, goals, values and potential audiences. Rodolfo Zevallos, our CEO and lead developer, led these discussions.

We started to measure the number of Spanish-speaking students in universities per country. To have a general idea of our demography, we calculated that out main target was of 2 million, which included higher education students in Iberian America, mainly from the top 100 universities in Hispanic American countries and top 10 universities in Spain.

teletreo_miro1.png
teletreo_miro2.png

Initial objectives, purpose, values and SWOT analysis for TeLetreo

user research.png

Quantification of target audience

User personas

Even though our main target audience are higher education students from Hispanic-speaking educational institutions, we also considered our users might also include professor, writers, journalists, Spanish foreign learners and other specialists in need of style and grammar correction solutions for their Spanish writing. Based on some 1-to-1 interviews and our initial user research, we created the 4 following personas that would help us focus  better our design and development of the product.

 
UX extras for Case Studies - Personas TeLetreo.jpg
teletreo_style-sheet.jpg
 

Branding and visual identity

For the brand design, I focused on researching different language assistant tools in the market. I mainly wanted to capture a simple, minimalistic design, alluding to primary colours. Our naming 'TeLetreo' is a play of words, coming from the word 'deletreo', which means spelling out, but adding the pronoun 'te', meaning 'for you', reaffirming the service of the digital product to the user. So 'TeLetreo' means 'I spell it out for you', which also has a fun and playful ring to it. 

The underlining and dots under each syllable on the brand name allude to the correction style the language assistant tool has, and each color corresponds to a category in the app itself. We wanted that the logo transmitted a little on how the app works with grammar correction, underlining and that it has a clean, simple and clear presentation and use.

 
teletreo demo 1.gif

Product demo

I designed the product interface in Illustrator and Figma. It is an initial visual prototype which helps to envision the use of the product and can be used as a stepping stone for further development of the UX and UI of TeLetreo.

 

We needed a quick demo, where the functions of TeLetreo are shown as well as the possible menus and desktop look-and-feel for the user. Eva Mühlbauer, our linguist and language specialist, wrote the text, the mistakes and corrections.

My original version (Figma)

TeLetreo_landing_figma_edited.jpg
 

New version after comments (GitHub)

TeLetreo_landing_github.png

Landing page

I also designed a mockup landing page so Nelsi Melgarejo, our front end developer, could code and add any new features that were discussed or needed. For example, we later saw that we needed the page in both English and Spanish, as well as more information about the team.

 

In general, we needed an initial landing page to show the potential it has as a real product, which makes it easier for stakeholders to envision for future mentoring or investment.

Constraints and limitations of the project

This project is still in a very early stage but we needed tangible visual and informative material to show it to stakeholders and possible mentors to keep on developing it. We needed to make initial user research, initial graphics for the demo and the landing page and write together the main information of the project, such as our goals and ideas. We also had to work with a deadline to present it so we had to work fast during the time frame we had. It would have been great to be able to work physically in a same space, however we live in different countries (Peru, Spain and Denmark) so we could only work remotely.

 

What did I learn

I have experience in making projects to present to stakeholders, nevertheless it is the first project I get to participate more from the UX/UI perspective. I am learning greatly on software development and coding, which were very new to me. I have become very interested in learning more about software development, both in back end and front end development, while doing this project.

maria jose campos logo_web encabezado.png