10-min Tutor

Challenges & Requirements

  • Perfecting the algorithm to match a student with the appropriate tutor in real-time (based on subject, topic, and level).
  • Integration of multiple features, eg. video call, screen share, and whiteboard on a small interface.
  • Making learning fun, simple and delightful for users Ensuring seamless payment and
  • subscription for users globally.
  • Data integration into the new platform Rating of tutors

 

Solution

The new solution empowers students to access affordable help from certified teachers instantly, live and 24/7. Booking a certified tutor is easy and takes only two easy steps.

First, students select a subject and level. Next, they just have to confirm and start the session. Students can use the video function in the app and show the question to the teachers. The app is integrated with an option for students to ‘favourite’ teachers so that they can connect to a specific teacher directly in the future.

We are proud to be working with Tueetor to bring affordable education to more students.

Stuck in schoolwork?

Connect with a tutor in less than 10 minutes.

Adopting the Agile methodology, we create screen designs and ship them for development. The MVP with video call feature was launched before other functionalities like chat and pen were added. Improving the app step by step with feedback.

Dynamic billing system. $10 per 10 minutes, extend the session as needed or purchase a subscription.

We have recently received complaints that members of the public are targeted by some agents through WhatsApp who claim to be from Hipster Private Limited and using our UEN number of Hipster Private Limited to prove that they are legit Singapore companies.

They also use a similar looking domain name, our logo, and address on the website to make it as similar & credible as possible.

We want to make it very clear that Our company doesn't appoint any agent/recruiter for this so call 'money earning by apps rating' or 'any Ponzi scheme' where you need to deposit any money to get jobs.

Our jobs are always posted on official company pages on social media such as Linkedin, Instagram, Facebook and WSG.

L’Hommes

Custom tailored clothes online

From job interviews to weddings and black-tie events, there are plenty of special occasions when one needs a suit or shirt that fits perfectly. However, purchasing a tailored made clothing piece can be costly and time-taking. To offer a hassle-free tailoring experience at customers’ convenience, L’HOMMES took an innovative approach of providing an online tailoring service.

Design and measure

First, the customer selects the fabric and checks the design in real-time 3D modeling. Next, using a body measurement technology, L’HOMMES can measure the customer’s size in a minute. The customer can then edit specific measurements if required.

After details of the design and measurements are input, the following details can be presented in the 2D/3D format:

  • Shirt
  • Collar
  • Buttons
  • Sleeves
  • Pocket details
  • Shirt fit (Slim or Straight Cut)
  • Fabric material

4 Technologies & an ecosystem

Once an order is received, L’hommes sends the measurements to their tailors for customization.
An integrated backend system built by Hipster makes it easy to manage BOTH the production and selling process.

Furthermore, artificial intelligence, computer vision, deep learning, and 3D matching converge to make accurate body measurements possible.

Does the L’HOMMES website inspire you? Looking to elevate your brand’s e-commerce experience?

Hipster has a wealth of experience in implementing technologies relating to e-commerce of different products. Our consultant can recommend you the right technology solution that fits your specific business and budget requirements.

Tueetor

Tueetor

An app that crashes hurts business

Nothing spells a bad user experience more than a mobile app crashing. In fact, in today’s competitive mobile app landscape, users have opportunities to switch product easily. Some might even avoid downloading an app if they read complaints about bugs before they actually try it. Needless to say, this breaks the business – lowering customer acquisition, retention and revenue.

Online platform for finding digital tutors

How then, to stop the crashing?

Hipster’s developers quickly realised that they had to rebuild the app in order to eradicate the problem. They then proceeded to:

  • Not displaying the full listing of tutors to a user at any one time. Rather, the technology optimizes the results based on one’s location and input. The user can then send messages to up to 10 tutors and trainers nearby.
  • After five months of hard work, our developers shifted to the then latest version of the PHP framework, Laravel, and improved the coding. They also successfully integrated user data from the old system in this process.

Improvements & outcome

Besides overhauling the app’s user interface design, Hipster also built a new website. The new design was well-received. The app even won the Certificate of Merit (Public Service Distinction) at the Asia Smart App Award in 2019. Tueetor has also successfully launched its services in three other countries – Malaysia, Thailand and Indonesia.

After the first successful partnership, we continued to work with Tueetor, developing a Coursesaver module, their website, and their second app, 10MT. Hipster is proud of Tueetor’s successes and happy to work together for the past five years. (to the next five years and more ahead)

tueetor Singapore

Widus Partners

Professionalism

The website features a clean, minimalist look and an effective navigation design. Unlike conventional financial services websites that may use many words and images, the approach allows the audience to focus on a few key components. Hipster keeps the design interesting by making the hero images fade in and out using CSS animations.

Colors

Colors has a big influence in brand identity and tone of a website. We deliberately chose muted, toned down over bright saturated colors to conveys seriousness and sophiscation. With a moderate color palette comprising, blues, black, white and gold lending to a professional tone. The colours complement well each other and also has the right level of contrast to improve readability.

Typeface

Hipster’s designers quickly realized that the Merriweather and Open Sans is a popular font pairing. Both typefaces are highly legible, even on smaller screens. On the one hand, Merriweather is a serif typeface featuring a tall x-height. Still, it remains relatively small due to its slightly condense letterforms. On the other hand, Open Sans is a sans-serif typeface, designed with open forms and a neutral yet friendly appearance.

Images

The website features a full-sized hero image on its home page, with photos of various cities that Widus operates in. In the foreground, the main header, “Trusted Advisor, Long-Term Strategic Partner,” communicates the brand’s primary message powerfully.

A common issue with full-screen photos is image distortion as it scales vertically or horizontally across browsers. Hipster has optimized the photos such that it displays perfectly across screen sizes.

KWSH

From physical to digital

Previously, volunteers would use hardcopy survey forms when interviewing the seniors. Volunteers then hand the documents to the staff for data entry. Hipster digitalized KWSH’s survey process. By developing an intelligent real-time tablet app and backend survey software, volunteers can collect data from interviewees onsite via a tablet app at HDB blocks. KWSH’s staff then manage the surveys and data in the backend.

Challenges to solve

  • Manual data entry is labour intensive and prone to errors
  • Manual organizing of the data and sharing of data analytics to relevant stakeholders
  • Ensure security and restrict access of data at all times
  • Easy administration of multiple survey types concurrently

 

Design considerations

After discussion with the KWSH’s team, we found that the majority of the interviewees are seniors. With that, we designed a tablet app that caters to the seniors’ needs.

Here are some well thought out features we have implemented:

  1. Option to change the survey font size (with three options to pick from)
  2. Question validation (When the respondent skips a required question, the system prompts them to answer it before proceeding to the next section)
  3. Skip logic (what question or page a respondent sees next is based on how they answer the current question)
  4. Various questions and answers layout templates to choose from

Security considerations

Previously, volunteers would use hardcopy survey forms when interviewing the seniors. Volunteers then hand the documents to the staff for data entry. Hipster digitalized KWSH’s survey process. By developing an intelligent real-time tablet app and backend survey software, volunteers can collect data from interviewees onsite via a tablet app at HDB blocks. KWSH’s staff then manage the surveys and data in the backend.

Converting data into insights

As for data analytics, it is pretty extensive as we can track:

  1. How much time does it take to complete each survey
  2. Total no of surveys completed for the month and year
  3. Total no of surveys attempted for the month and year (Tracking surveys that are drafted, completed, and unavailable)
  4. Total survey attempted by Volunteers for the month and year
  5. Total survey attempted at each postal code for the month and year
  6. How many times the survey have been unavailable

Benefits of a survey app

Overall in the backend, KWSH’s staff is able to create new and edit surveys, choose from multiple question types, and send notifications to volunteers via the tablet app. Authorized volunteers have unique login IDs and can only access surveys assigned to them.

All-in-one Tablet Solution

Volunteers only need to carry 1 tablet from block to block and can access the survey with or without internet connection.

Skip Question Logical flow

Volunteers are able to skip questions on a case-by-case basis. This enables them to facilitate the survey process better and with flexibility.

Secure Cloud Storage

All surveys are stored in the cloud and there is no need for physical storage. The database is encrypted and securly stored with automatic back-ups in place.

On-site Notification

Staff can reach out to volunteers in a timely fashion by sending push notifications to their tablet devices.

Real-time Analytics and Insights

Staff and KWSH’s management can easily view insights and real-time analytics of the results collected. This enables the team to perform in-depth analysis on the data collected. They are able to also share/export the results with at a centralized backend system.

Run Multiple Surveys Simulteously

Administrators can set up multiple surveys with different question flows. Furthermore, different teams can use the platform at the same time, with varying access rights assigned to them.

Lionsbot

Multimedia content using videos

Innovative is the word that best describes Lionbot. We ensured their website reverberated innovation with videos and animations working together in tandem to elevate the user interface.

Lionsbot

Speed matters

Hosting so many videos would impose a problem to speed, that’s why we used “Cloudfare”, a content delivery network or CDN to manage the quality of speed. As per standard practice, we ensure verification checks reflect excellent scores when it comes to speed.

Backend handling by the website owner

Our content management system or CMS is created on WordPress and we make it super easy for the super admin to handle all content on the dashboard.

All the sections will have a placeholder. We followed the go, edit, publish policy. Simple. That’s it.

Lionsbot

A highly secure website

Part of our quality assurance is ensuring all websites meet a high level of security. We verify security measures on all websites with industry-standard tools such as “Security headers” or “Site check”.

 

Imavox

Interactive and clean ui

Instead of a fanciful design, we created a clean full-page slider with some titles and small paragraphs that directly show the website’s purpose. A trendy menu design expresses the beauty of the first interaction with the user.

Typeface and icons

Our UI experts thoughtfully select typefaces and graphic elements to align with the business’ style and tone of voice. For Imavox, we used the typeface family “Futura”, a geometric and crisp sans-serif typeface that is versatile in placements. The graphic style and iconography are also intentionally styled to the brand identity using the brands main colours in gradients.

Handling of backend by the website owner

The website’s content is managed through WordPress, a well-known content management system. The dashboard is customised to easily and independently add, edit, and delete posts, pages, and images. Users can also have different access rights based on their different roles throughout the company.

Ease with page builder

All dashboard sections have a placeholder to make finding, editing and publishing content seamless and straightforward. Simple. That’s it.

Highly secure

Our websites follow a high level of security. Multiple industry-standard tools are used to measure, verify, and ensure high-top security measures. Here are some tools to have a look at:

https://securityheaders.com/?q=imavox.ch&followRedirects=on

https://gf.dev/toolbox

https://sitecheck.sucuri.net/results/https/imavox.ch

Rocket speed

User experience statistics suggest that we lose our audiences and our business to slow websites. We ensured the basics were upheld to manage website speed, such as images, js, CSS, and code optimization. Verification checks were also completed with the help of industry-standard tools, ascertaining an excellent speed and optimization score.

Renonation

Hipster

Hybrid technology

Renonation had existing blogs on WordPress that they wanted Hipster to integrate with our newly created platform. This was managed  smoothly so that the two platforms flowed together seamlessly.

Smooth filters

Simulating the power of artificial intelligence, the website filters make detailed searching for specifics such as budget, style, property type, room size and area type a pleasant experience.

Hipster

User board convenience

The platform also offers saved search functions when you log in and select your dashboard. Users can save projects, designers and properties for later reference.

Fast and secure server

Servers are in the forefront when ensuring data speed and integrity. We chose Amazon Web Services (AWS) CloudFront and a private bucket to save data into the system.

Blogging platform

A blog management tool was provided to publish a blog in a few simple steps. A WordPress platform was given to manage blogging separately with ease.

Synfutures

An Intuitive Trading Platform

Combining stakeholder knowledge on the product, industry and their users with our knowledge of digital products.

Product understanding through NFT design

Since Hipster’s very first collaboration with SynFutures, we have been tasked to design NFT’s. Working alongside them for multiple products has given us a better sense of their company and customers over time.

Hipster
Hipster

Light mode + Dark mode

The initial product was designed for light mode. Through the process, we decided to also introduce dark mode as an alternative for users who prefer that. Through this process, Hipster has become adept at helping customers who want to design both the light/ dark mode at one go, optimising the process.

Enhanced Look and Feel

Hipster Inc worked closely with SynFutures to understand their requirements through a discovery session. In this session, our design team learned the sites that the SynFutures stakeholders liked and what in particular they liked or didn’t like about it.

We didn’t end up designing a website that was similar to what was shown to us, but rather, we encapsulated SynFutures brand values shared in the session.

Adopt A Backpacker

AAB girl image

It started with a random phone call from the Adopt a Backpacker team to find a Laravel developer. The platform’s demand was increasing, and the Facebook group and WordPress landing page setup the AAB Team had to register interest from backpackers all over the world was proving to have reached its limit.

Founders Miguel and Nikki came to us with their design prototypes that helped us analyse the platform’s flow and site information to build the platform structure.

But First, a Rebranding

Before we could even begin our development of the platform, we knew that a total rebranding was necessary, which the Adopt a Backpacker team reluctantly agreed to since they already had the full set of designs. We eased the team to our suggestions, starting from  the logo. The result was awesome and they loved it!

Before:
AAB - old logo
After:

Aligning the visual language

The problem with the existing design was mainly the design language that did not well-cater to the platform’s target audience – an adventurous bunch! A more modern interface was better suited vs a traditional one. This was achieved with changing the fonts – finding one with a more reflective personality and selecting a body text with a better x-height for readability.  We also  streamlined visual elements such as the typography and iconography, and stripped down the original design to  give it breathing space so the pages did not feel so cluttered. 

Before:
AAB old screens
After:

The brands’ colours were also changed from orange and teal to deep blue and lime green. The existing colour combinations had poor contrast of less than the standard 4.05:1.  There wasn’t enough colour differentiation in status buttons, so user’s would have to find tasks with precision, causing frustration. The new colours had better contrast and were selected to be more reflective of the earth and its elements such as the sea, sky and fields- elements that most of the backpackers and travellers using the platform sought after.

Building the Information Architecture for a Better User Experience

To fix navigational problems, we seperated the website into two parts:

  • Informative pages
    • About Us
    • How It Works
    • Safety
    • FAQ
    • Terms and Conditions
    • Contact Us
  • Interactive pages
    • Login/Signup/Onboarding
    • Map/List view of Profiles 
    • Profile Details 
    • Interactive Community Wall
    • Stories 
    • Membership and User Profile

Information about the platform, the community, what it offers and how it works, needed to be easier accessed and understood by the user. Hence, we listed down all of the pages on the website that users generally look for before they start using the platform, and classified the Interactive pages in the category of the user journey. We redefined the way users register and verify their accounts, from the subscription process to how they search for backpackers/hosts on the platform. We had many more ideas and features to suggest but for first version, but we kept it simple, releasing only the MVP.

We split up content for pages only relevant to the specific use case, i.e host or backpacker. Content heavy pages such as the safety screen, were made to be more appealing by changing the information structure and text leading.

A Responsive Design and Progressive Web App

We followed mobile-first as the design methodology where every screen was designed first on mobile devices since surveys show that over 70% of people use websites on mobile devices. Following this, all screens were adapted for computers and tablets/iPads for a seamless experience no matter the device. We also strategized the website as a progressive web app  (instead of a regular website) which enabled the platform to:

  • run faster than a normal website
  • save data in offline mode
  • save the website with as an icon for frequent use
  • have real-time notifications in the browser

Mapview of Backpackers and Hosts

Deciding on the number of users to be displayed is more calculated than it appears. If all the app’s users are shown, the interface looks cluttered. If only a few users are shown, it appears like the platform doesn’t have enough users. To strike the balance between user experience and user content for AAB, we showed 100 location-based users on the map as the default view. Filters were also made available to cater to location-switching or to filter the type of users.

AAB - map view
AAB - Community wall (3)

Real-time Community Wall

The community wall functions like a Facebook feed. It gives flexibility for users to post their jobs, request for adoption, community tips, and everything in between. Each type of post works slightly differently and everything happens in real-time with engagement tools like comments, user tagging, likes and shares of posts. The speed and user experience were one of Hipster’s priorities while implementing the features.

A Global Platform – languages, payments

A global platform doesn’t just differ in languages, it also differs in behaviours and other localizations – in example, how locals prefer to pay for services. We initially integrated payment gateways using credit card and debit card subscriptions, but soon some users from Europe gave feedback that Paypal happened to be their first choice of payment. Our team quickly adapted the suggestion to add Paypal as an optional method of payment. We also kept the system open for more future payment integrations. Adopt a Backpacker also currently offers 5 language capabilities that can be extended.

AAB - Payment

Making community real and meaningful

Avoiding fake people and NSFW content was one of our key targets. To achieve this, we did an ID verification and also planned for government API integrations to verify the real person behind the screen. We further used Artificial intelligence to avoid any content or pictures that do not follow the platform’s standard guidelines.

Near

Near App Image

Participate in events and explore nature

The app features several events annually to encourage the public to explore and gain awareness of the green spaces around them. Elements of gamification, such as a leaderboard, earning points and badges, are built into the app to increase interactivity.

Near App Image

Explore PCNs and trails across Singapore

Information of attractions, services, facilities, heritage trees and trails are now at your finger tips. The app also allows you to navigate to a checkpoint, attraction or service provider.

App-Near