Intro

The School of International Business (ESNEIN) is a Costa Rican Startup, founded in 2020 after the first wave of COVID hit the world.

This project arises thanks to the combined efforts of two academic professionals in the business area and my contribution from the logo design, brand design planning and the design and implementation of the website. 

As a UX designer my mission was to ideate and define a strategy to follow for the website. Create the user journey, architecture of information and logic, to finally create a pretty and clean interface that reflects the brand and ESNEIN offer. I worked completely alone from end to end, but in constant communication with the founders of ESNEIN. They generated their research for marketing and sales purposes and I used this data to better understand who the potential customers and users would be.

Business goals

The logo, the brand strategy, and the website were of great importance to promote the services and get the first clients.

Used tools

  • Adobe XD
  • Elementor
  • WordPress
  • Photoshop
  • Illustrator (for logo and graphics)

Understanding the user

At this point in the process, data collection and analysis is very important to better understand who you are designing for, their goals, needs, and pain points. Understanding the user empowers to design experiences that are helpful or easy to use. So what I did here was a meeting with ESNEIN to get the information they got from their market research and based on that I created personas based on real client cases. This helped to identify mainly the pain point when trying to get information about courses. 

Target market

Thanks to the digital transformation that skyrocketed during the pandemic, this Start up intends to expand the national borders and reach a more international market. Mainly enter other countries in Latin America and Spain, so the target audience will remain initially in the Hispanic population, but in the future could be expanded to other countries.

Personas / User journey

After understanding better the target market and the possible users we could have, I asked ESNEIN stakeholders about the clients that they got without a website. I planned to understand their behavior, which steps they followed, which information they asked for and required, whether the process of reaching them was difficult, etc. 

With this data, as mentioned before, I created personas based on these real clients’ cases and took notes about their behavior especially when they wanted to organize a course for a company. These notes helped me create a user journey and find out the website’s pain points and the “must-have” requirements.

And these analyses concluded that we had to design the website considering 3 types of users referred to throughout the entire product development process:

  • Interested students
    • B2B
    • B2C
  • Promote the platform to possible teachers.

And all this information helped later on to create the architecture of information.

I mapped out the users’ steps to see how I could simplify their journey to help them reach their most important goals with the website.

Userflow & Architecture of information

Userflow mindmap

I then began to create mind maps to design the logic of the user flow that they would take in various scenarios or tasks. The image shows an example of how the user would get information about the courses. And after this, I would create wireframes to test it with the people involved.

Sitemap

**Click on the image to expand.

Wireframes

After an analysis of what other similar platforms are doing, I started to generate the Wireframes. The purpose of these was to show the content of the website to sell the initial proposal. These went through a round of feedback with the client and once approved, I started designing the UI.

Solution

Responsiveness

When creating the solution, several things should be considered:
1. which devices are likely to be used the most?
2. Is it necessary to consider designing for medium screen devices such as tablets, or is web design enough?
It is possible to answer these questions knowing the resources available for this project. In this case, being only me, I could quickly design an alternative for small screens for mobile vertical/horizontal and an alternative option for horizontal tables.

Visual design

For the visual design, the brand colors that were proposed at the beginning of the project were heavily involved. These colors came about as an accordance with the stakeholders based on color psychology and how they wanted to differentiate themselves from other platforms.
Blue colors are very common to show elegance, intelligence or intellectuality, and on the other hand in ancient times owls and owls lords of wisdom have been the custodians of great knowledge and magical secrets for which men have fought tenaciously. The design of the logo arose thanks to this concept and the initial letters of the original name of the school, which was UIL, were used.

High Fidelity mocks

Eventually, this final prototype was created in Figma to be shown to stakeholders. I made a presentation where I exposed the design and the final result. I showed several user flows and let them interact with the static mock-ups. After this presentation and once they were satisfied with the result, I was able to start the implementation stage.

Hi fi mock ups which was approved by the stakeholders and we could not run a test because of lack or resources and time.

Implementation

I worked from end to end in developing the website UI and UX process. I have used as CMS platform WordPress because of the versatility and accessibility that it possesses to work on.

The implementation is done using Elementor web builder in WordPress. It took around 3-4 weeks to finally be able to publish it, after some iteration meetings. During this process, I created multiple blocks and page templates that will help the ESNEIN team maintain it easier.

Visit page