The Project

Atexto is a transcription-as-a-service startup based in Buenos Aires, it lets businesses and people obtain ready-to-use, high-quality & low-cost perfect transcriptions for their audio/video records or those of their organization. Atexto was part of 500 Startups acceleration program.

Challenge:

Change the current methodologies of business by creating the MVP of a SAAS application to enable customers to order and manage their transcriptions online.


My mission:

Design an MVP of Atexto's customer portal based on Scrum stories


My tasks:

User Research, Information Architecture, Wireframing, UI Design, Prototyping, Frontend Development


Tools:

Sketch, Invision, Zeplin, Boostrap 4, SASS, GIT


Project Status:

Completed.

Information Architecture


The User Research documentation has been provided by the client, they built multiple profile personas and user stories using my User Analysis Guidelines.

Based on User Stories, I have built the following interaction diagrams to highlight the service-ordering process and the item management process for two types of users. Atexto has already a data base of frequent service users and decided to focus the first iteration of the MVP on their needs. Each screen of the diagram has a user story attached to it.

The following diagram has been built to understand the service-ordering process from the first time user's perspective for the second iteration of the MVP:

The next step was to merge both diagrams in one to get a holistic idea of how the MVP will be built, this is the General Diagram of Interactions:

Deliverables:

Wireframing


I worked on this project alongside with a team of software engineers from Toptal. I had to start a week before them so I could prepare the Diagrams above and at least one screen wireframe to help them understand the scope of the project. Following is the wireframe I built for the "Manage Project" screen. I decided to go for a high-fidelity wireframing style to help the frontend developer deliver ASAP.

The following wireframe is the "Upload Files" screen's modal:

High-fidelity UI Design


The next step is a must-to-have visual design iteration in order to bring the wireframes to life, I have started by building a UI Styleguide to help me speed up this process.

Atexto UI Styleguide

Then I applied the Styleguide's instructions on every screen of the project, following are some high-fidelity UI screens of Atexto:

High-fidelity UI of Manage Projects screen
High-fidelity UI of Upload Files screen
High-fidelity UI of Upload Files screen

I have used InvisionApp to create a full prototype of the designed screen, and I used Zeplin to collaborate with the engineers.

I also helped the frontend developer with iterating from the wireframes styleguide to the new UI styleguide using Sass.

Client Testimonial

" Work with Younes was great because his professionalism and outstanding capacity to make things done. He accomplished deadlines at 100% and his output is at least 50% greater than other designers with the same seniority.

The best: He has a well-defined work method that allows to stay one step ahead all the time."

Esteban Gorupicz - Founder & CEO of Atexto

Let's get in touch!