UI/UX Redesign for Online Marketplace

Technology Stack

ReactJS
Vue.js
Stripe

The Client

This digital marketplace allows signed-in users to upload/sell/buy/access study notes and study materials online. User-uploaded study notes on this platform are available for free and paid access. Every note, however, undergoes a quality check and verification process by the platform admin. After they’re verified, they’re made accessible to the signed-in learners. Those preparing for semesters or professional exams can read these verified notes to brush up on their skills and do well in their lives.

The Challenge

The portal was already up and running. But, the problem was it lacked a polished UI design. The site had unappealing layouts. The colors and patterns were old-school. The overall structure was inconsistent. Moreover, it wasn’t even responsive to all mobile screens or orientations. UI concerns such as these led to bounced traffic and poor user engagement. So, the platform owner contacted Capital Numbers to redesign the website and give it a fresh facelift.

Our primary responsibility was not just a visual upgrade but also to incorporate custom features. For example, we needed to correctly place the window controls (buttons, menus, dropdowns, searches, etc.). Our team had to custom-design admin controls (super-admin, sub-user admins, etc.). A reliable payment gateway had to be added for users to buy/sell online notes. We also had to keep enough on-screen space for the interface to look clean.

The Solution

Having jotted down the above points, we started the design work. We studied the existing website and its fractured navigation. A lousy UI such as this failed to resonate with users and was off-putting. So, we redesigned the current UI using the following stack:

We decided to go for Laravel as the backend architecture because its wealth of built-in tools make email, text, video, and styling integrations easy. Plus, it has authorization checks to verify new users before onboarding.

We used ReactJS to redesign the frontend. React is ideal for creating scalable and customizable interfaces. Its virtual DOM helps developers modify individual parts of a page without changing the overall layout, adding modularity to the structure.

We integrated Vue.js into this React app. Vue is lightweight and helps create visually-appealing apps. It also separates the UI from the app logic. So, if developers wanted, they could plug in a new desired template in the future without changing the underlying code, thus adding flexibility.

We added Stripe to facilitate reliable transactions within the portal. Stripe supports all popular payment methods around the world.

Instead of chasing after flashy items, we worked on just the custom elements like search filters, personalized dashboards, login systems, and the knowledge base. We made a few improvements around the CTAs, colors, headers, footers, and dropdowns to ensure they meet the brand's goals.

We subtracted all trash from the codebase to make it as simple as possible. Our experts used dependency injection to keep the codebase testable end-to-end. We hosted the redesigned website on the requested server once done with all the fine tunes and API call checks.

Results

What we finally released after the above refinements is an elegant-looking portal way better than its previous version. The resulting product has no broken links, haywire information, or other usability issues. We centralized all information to help visitors, even first-timers, get what they want quickly. Although the portal is information-heavy, it’s not crowded. And that’s what makes Capital Numbers’ work unique.

We completed the project within two months of its starting date. Here are a few of the frontend highlights:

Personalized Admin Panels

Our team designed personalized dashboards for three main user groups, namely the:

Super-admin
Sellers of online notes
Buyers of online notes

Mobile-Optimized

We made the page layouts ready for optimal viewing across mobile screens.

Responsive Designs

Desktop and mobile users can now read the notes without constantly zooming in and out.

Social Logins

We enabled Facebook, Google, and email sign-ups for quicker registrations and reduced abandonment.

Robust Search Box

Our custom search box shows user-uploaded notes within seconds of the search request.

Filtering Options

We also added a new feature that filters and serves up information like ‘most relevant’ or ‘most accessed’ notes.

Clearly-labeled Dropdowns

Our clearly-labeled dropdowns help users find notes subject-wise, country-wise, course-wise, and institution-wise.

Scalable Knowledge Base

Currently, users can upload thousands of PDF notes without worrying about system lags.

Graphics and Window Controls

Our well-positioned buttons, footers, headers, CTAs, menus, and other graphical elements make the UI more compact.

Easy Payments

Our seamless Stripe integration allows users in the US, the UK, Canada, etc., safely buy/sell notes without transactional failures.

Dedicated Development

Capital Numbers' dedicated frontend team implemented the above under the expert supervision of its experienced Project Manager.

Agile Method

For a faster rollout, the team divided the entire project into smaller chunks and then shipped individual chunks in an agile manner.

Modern, Redesigned Interface

The timely go-live was possible because of our agile approach. Impressed with the portal’s new look, the client realized how important it was to tie up with a trusted brand like us.

The all-new portal is cleaner, fresher, and better in aesthetics. Users enjoy its cross-device compatibility and freely navigate without feeling an information overload. There’s also an influx of new mobile traffic that the previous version lacked.