Online bilingual dictionary and vocabulary trainer

Role: UX Designer, User Researcher & Front-End Developer
Duration: January–April 2020 (4 months)
Team: Catarina Allen, Julius CelikBlenda Fröjdh
Links: Website*, Git repo, Adobe XD prototype
Awards: Best UX Design (out of 800 students)

The Assignment Brief 📝

Create a web application that interactively builds on an existing API.

The application had to persist data, use a front-end framework, have several views of the same data and have interaction on the data.

The Ideate Phase 🤔

After brainstorming individually and together as a group over two sessions, we agreed on the idea of creating an app that builds upon the online dictionary WordReference.

We agreed that WordReference’s interface was clunky and had great room for potential. We decided to build upon it by developing a web app that would users to save words and learn them for later through a vocabulary trainer.

To consolidate all of our ideas, sketches and perspectives, we developed a conceptual model from which we would build the app’s functionalities.

The Prototype Phase💡

We created prototypes on Adobe XD to bring our conceptual model to life. We split the dictionary, speak.exchange, from the vocabulary trainer, speak.repeat.

Originally we had designed it to have a spaced-repetition system, however we ran out of time to implement it.

The Prototype Test Phase💡

To quickly test our prototype, we designed and carried out a usability evaluation based on Steve Krug’s methodology with a bilingual English-French speaker. 

We devised research, recruiting and interview plans along with a test script. We sought informed consent and explained data gathering, usage and their rights.

From our findings and observations, we took the ten primary issues and iterated our conceptual model accordingly.

The Development Phase 🧑‍🎨

We developed the website using React for our front-end framework, Node.js for our runtime environment, Next.js for server-side rendering, Firebase for data persistance, Firebase Authentication for user authentication, styled-components for CSS and wordreference-api for dictionary data from WordReference.

My role in development was primarily around front-end design and development. With the team using GitHub Issues, I made design and development decisions by balancing time, usability, UX and practical considerations.

The Website Test & Review Phases 🪄

At the mid-way point of our overall development, we gave and received three peer reviews to and from another project group. We performed and received heuristic evaluation and code review.

Once we had developed our MVP, we performed another usability evaluation following the same structure and methodology as our prototype test, however this time with a participant who was only fluent in English and not French.

After the evaluation, we implemented the ten primary issues and iterated both our conceptual model and website accordingly.

The Outcome 🖼

We received the course award for Best UX Design out of 800 students.

The Three Takeaways 🌟
  1. This project taught me the value of balancing making design sacrifices for the sake of development and vice versa. 

  2. I realised how my perspective of a design changes knowing how it can or cannot be practically implemented.

  3. Always record and save ideation sessions or else risk losing precious ideas!

*Both APIs for speak.exchange and speak.repeat are currently offline as we have since disconnected Firebase from the website for use in other projects.