Undrline

Undrline is a website where underprivileged entrepreneurs can promote and advertise their business to potential investors for absolutely free!

Comment

Inspiration

The inspiration for Undrline came when we were looking at the specific SDG subgoals: we realized that the goals as a whole were too large to tackle with a single project. We noticed that both SDGs had an emphasis on economic opportunity and independence, and we decided this would be an amazing idea. When coming up with the project, we had a few rules:

  • It must foster economic independence but also cooperation,
  • It must provide a substantial, real-world benefit to its users (for instance not just an advice channel), and
  • It must incorporate all members of society, even if the goal is just to uplift underprivileged members of society.

We ultimately landed on a business promotion and investment website, which is a simple idea at its core but had an unexpected amount of nuance: for instance, is implementing investment on the website itself a good idea or not? We had landed on our idea, but there was still some brainstorming to do. The name "Undrline" was decided on for two main reasons: the first being that it is a very modern-looking name, emphasizing the fact that we are trying to impact the future, and also because the purpose of our website is to emphasize or underline the efforts of underprivileged people to try and improve their economic standing.

What it does

Undrline is essentially a platform for people to promote their businesses to the public for free. It's mainly meant for underrepresented groups in the economic scene, such as women and minority groups. Creators have the ability to create business ideas, set goals, and add information to it, such as tags, which help identify a businesses by its characteristics, for instance women-owned or Asian American-owned. This allows them to customize their business page (although this functionality has not been implemented yet as we do not have a database). Investors have the ability to search for certain businesses on the search page (also not implemented yet) and have the ability to contact and invest in business straight from the business page itself. The main page has a spotlight which recognizes outstanding businesses that we feel deserve more attention. People who have interacted with our website can add reviews, and people who have interacted with a business before can add their own views to its page as well. Currently, the website is just a layout, but it gives a good idea of how items are located on the screen and how they interact with each other.

How we built it

The first step in our process was to not actually code at all: we started with Figma, an online collaborative design software. We did this because coding is inherently very time-consuming, and chances are if we had no idea what the website would look like we never would have finished in time. Also, we need a platform which allowed us all to cooperate, as one person working at a time is highly inefficient and would have made the project take marginally longer. This allowed us to come up design styles, fonts, and layouts before we started coding. We designed our website without thinking how hard it would be to implement simply because we wanted to give ourselves a challenge. We also looked at other websites that have seen success and implementing their ideas into our design. To code, we used Glitch, which is a collaborative coding software; again, collaboration was necessary to speed up the process, but Glitch also has real-time website previews, allowing us to better implement our chosen layout. We used HTML for the content of the website, CSS for styling and layout, and a bit of Javascript and jQuery in order to implement some animations and dynamic elements. We used a lot of more advanced CSS styles, such as flex-boxes and floating elements, in order to create a better experience, but that meant that we needed to do a little bit of research online to learn more about these styles, for instance the flex-direction and wrap tags for flex-boxes. Flex-boxes played a huge role in the completion of this project, as they allowed us to space objects out horizontally and vertically, but we also use absolute positioning and div wrappers to help us build our intended design.

Challenges we ran into

There were many challenges in the process, some related to the website but some not:

  • The header: the ability for the header to have a block of text in the middle with a moving picture behind it and a floating navigation bar was just really difficult to create.
  • Trying to get many of the elements working: it took a lot of effort and playing around with absolute and relative positioning in order to come to this final result.
  • Trying to incorporate everyone's ideas together: we all had so many different ideas for what pages should look like, and it was tough compromising.
  • Balancing this project with school work: we all had a lot of finals and AP exams to study for, not to mention countless assignments, but regardless we came to a point we are proud of. ## Accomplishments that we're proud of As a whole, we are really proud of the way the main page came together. The home page, especially the header, really emphasizes the professional outlook that our idea has, and the different features on it serve to link our website together. We are also really proud of the "spotlight" idea on the main page, where we can highlight businesses that we think deserve more support. This helps link our community together, and it was really novel because very few business promotion sites that exist have a spotlight feature, and most of the time it is paid. ## What we learned We learned a lot of valuable lessons in website design and teamwork:
  • We learned that more is not always better: we had an idea for investors to have access to an AI-Search page, which gives more information, but after discussing it with some other people outside of our team we realized it was actually detracting from the user experience and made it more complicated than it needed to be.
  • We learned how to design a website by looking at examples of other websites that we thought had good layouts and incorporating those ideas into our Figma design.
  • We learned how to use flex-boxes and absolute positioning to manipulate where objects are on the screen, allowing us to create a more dynamic layout.
  • We used CSS transitions to allow elements to expand when hovered only, increasing responsiveness.
  • We learned important skills in managing work and cooperating with each other, incorporating our ideas into the final product seamlessly and in tandem.
  • We learned skills in time management, as we had a lot of other events going on and needed to find a balance between those and working on this project and finding where our priorities lay.

What's next for Undrline

The next steps, if we get a chance to truly develop Undrline into a fully functional site, would be:

  • To make it accessible on all devices (fixing scaling issues) and to all users, strengthening the message of inclusivity
  • To fully implement the functionality and gain access to a database where we can store information
  • To improve on the user experience by adding more resources and updating layouts
  • To show it to the public and allow it to benefit people in the way we intended it to!
Share this project:

Updates