Timeline

August - November 2023

Team

Elbeg Amar, Duurenbayar Ulziiduuren, Munkhkhuleg Tserenpurev (me)

My Role

UX Designer


Problem

There are no APIs related to Mongolia available in the marketplace.

According to Rapid API Hub, the world’s largest API marketplace, there is a lack of APIs specifically focused on Mongolia. This absence results in an insufficient amount of information about Mongolian history, culture, and language. Consequently, developers face significant challenges in integrating functionalities or obtaining information related to Mongolia.


Solution

An open-source API website is crucial not only for disseminating information about Mongolia but also for the developer community.


Research

Background story:

After a coffee chat with two of my software engineer buddies working in edtech, I realized the challenges they face in finding APIs related to Mongolia for their students and integrating them into their work. The process often involves starting from scratch repeatedly, demanding a significant amount of time and energy. This realization motivated us to embark on this project.

Competitive Analysis: 

There are no direct competitors for us.

In conducting a competitive analysis, I assessed industry giants such as Mulesoft Anypoint Platform and Zapier as potential competitors. Despite their extensive portfolios with thousands of APIs, none of them were specifically related to Mongolia and its rich culture and history. This insight led to the conclusion that, currently, there are no direct competitors for us in the market.

User survey:

All of the survey respondents were from the software engineering industry.

To identify our primary target audience, I formulated survey questions and distributed a Google Form in Facebook groups consisting of Mongolian communities working and studying in the United States. This effort yielded 15 responses, providing significant insights into our users.

Research questions:

    • What do you know about Mongolia?

    • How important is it for you to stay informed about new technologies or features? Why?

    • How frequently do you use Application Programming Interfaces (APIs) in your work?

    • Tell me about your experience searching for and integrating APIs?

    • Have you ever used an API related to Mongolia, its history, or culture? If so, please share your experience?


Analysis

Insights:

There is not enough information about Mongolia for developers. 

Consequently, based on our research, I synthesized user insights into different themes through affinity mapping. These insights guided us as we transitioned to the ideation phase, providing valuable information:

Persona:

Drawing from our insights and research, I crafted a persona to encapsulate the characteristics and interests of our users.

Sitemap:

Keeping our insights from the analysis in mind, I created a sitemap to visualize and demonstrate the hierarchy and organization of our web page designs for our engineers.


Design

Low-fidelity wireframes

To establish the basic structure of our web pages, I began sketching and creating low-fidelity wireframes.

Mid-fidelity wireframes

After brainstorming low-fidelity wireframes with our developers, I opted to create mid-fidelity wireframes to test the intended design elements and interactions of our final product, facilitating quick iteration.


Iteration

Consequently, during the creation of our mid-fidelity wireframes, we sought feedback from users. I reached out to three computer science students and a professor to identify areas for improvement.

Improved Areas:

Colors

The color was too dark, conflicting with the design's branding and giving users a disconcerting feeling. I opted for a brighter color to convey the branding more clearly and enhance the overall user experience.

Illustrations

Some illustrations appeared redundant alongside their corresponding text, leading to user confusion about the purpose of 3D graphics. Consequently, I transitioned to a flat and minimal design to maintain clear branding and elicit positive emotional responses from users.

Animations

I made the animations flippable because the previous design required users to click to see examples. Reducing the number of clicks enhances ease of use and the overall user experience.


The Final Screens

Final Design

You can check out the prototype below and view the website here: https://mongol-api.vercel.app

The Style Guide


Reflections

  • Think on a Bigger Picture. After creating and launching our product to the public, I realized the importance of considering the adaptability of the design in various scenarios. For instance, contemplating what the design should do if the system's functions or features expand in the future, or how design elements should transition from one position to another. Keeping these factors in mind, I aim to design more comprehensively in the future.

  • Maintain Constant Communication with Developers. In the initial stages of design, I encountered a situation where our developers asked me about the URL for each page. These queries prompted me to think from a different perspective and provided insights. Consistent communication with developers is crucial; it helps both designers and developers stay on the same design track and quickly identify any issues or questions that may arise.


Next Steps

My future steps will involve expanding the design systems and further developing the product by adding component designs and style libraries, as well as iterating on existing ones. By doing so, I aim to enhance the overall aesthetics and functionality of the product. This approach will ensure a cohesive and visually appealing user interface, which in turn will provide users with more elegant and intuitive digital experiences. I believe that continuously refining and expanding the design elements will keep the product fresh and engaging, fostering a positive user experience and encouraging long-term use.

Previous
Previous

KOOLKick

Next
Next

Whitworth Community Partnership