OMU Digital

A redesign of critical interfaces for a B2C community-based website with a focus on engagement and intrigue.

Overview

OMU Digital is a B2C website focused on engaging Muslim American youth nationwide through memberships, events, and perks. The current user interface for the website lacked user engagement. Through a design process focused heavily on visuals, I redesigned three pages on the website as a conceptual framework.

Problem

How might we create an engaging interface that aligns with modern UI trends in order to increase user engagement?

Solution

By synthesizing the initial user flow on the landing page and market research findings of modern UI trends, OMU Digital was provided with rebranding intended to display both engagement and intrigue.

Project Goals

Users & Audience

Made for Muslim youth in America 🌎

Process Highlights

My Design Process

A nonlinear design process focused heavily on visuals and secondary research.

Discovering the Problem: The Original Website

My client indicated his website OMU Digital was lacking engagement in regard to users signing up for paid memberships. He mentioned he would like to add "more clarity and intrigue" to the overall look of his website.

The two problems associated with OMU Digital:
1. Lack of engagement and personalization on critical pages such as the landing page, user dashboard, and events page
2. Users signing up for a free account must enter sensitive credit card information.

To begin by understanding the problem, I analyzed the current interfaces on the live website:

OMU Digital's Users...

From information given, majority of users were between the ages of 20-24 years old. Current users indicated they would like to use OMU Digital to make new friends, attend events, and meet people in the same career path.

User frustrations? They had not found anything engaging enough, some also felt the OMU membership sign up process was frustrating.

*Note: this project took place two months after OMU Digital was launched as an official website. Therefore, research surrounding users was limited.

Secondary Research: Finding Inspiration

I began research by doing a brief competitive analysis on landing pages. Since the client prioritized engagement and promoting the amount of membership sign-ups, I narrowed my research to web pages displaying engaging elements. The competitive analysis focused websites for connecting communities.

Designing a mood board established a guide for the user interface design. In this case, the redesign of OMU Digital was focused on bright colors, aesthetic minimalism, and large typography.

Inspiration...
• Contrasting bauhaus
• Relatable imagery
• Large typography

User Flow: Analyzing the Pain Points

With a role focused heavily on UI design, it was inevitable to ensure the overall user experience of the website was just as smooth as the visuals. The biggest priority for the client was having a new user sign up for an OMU Digital membership.

The original user flow...

• No flexibility for user as they cannot select membership type.
• Users HAVE to sign up for a premium membership with a free trial.
• High chance of users abandoning the website due to entering credit card information.

The redesigned user flow...

• Provides users with a choice.
• Includes flexibility when selecting membership type.
• May increase user engagement as there is no need for sensitive information.

Designing the Screens: Wireframes

The Landing Page

The redesign of the landing page was structured to be as easy and simple for new users to scan established via effective visual hierarchy.

A new section 'Membership' was added to the landing page, allowing users to choose and select a membership directly.

The User Dashboard Page

The new user dashboard included a simpler design allowing the user to view all services at once.

A new element (user avatar) was added to the dashboard to promote engagement and personalization.

The Events Page

The new events page would include text alongside an image, making the information displayed easy to digest and engaging.

The use of cards would also be seen here to organize information.

Designing the Screens: High-Fidelity Designs

After iterations, the high-fidelity screens emphasized bright colors, large typography, and visuals via relatable imagery.

A look at before and after...

Landing Page (Original)

Landing Page (NEW)

Visuals of real-life images were added to increase both engagement and relatability towards the user.

User Dashboard (Original)

User Dashboard (NEW)

The user dashboard was redesigned with a focus on personalization and engagement.

Events Page (Original)

Events Page (NEW)

The new events page includes text alongside an image making the information displayed both engaging and easy to comprehend.

Impacts, Thoughts, and Takeaways

Redesigning a B2C website with a focus on engagement and intrigue was exciting. I learned about balancing delight with accessibility and minimalism.

The purpose of this project was to create a conceptual framework surrounding UI elements highlighting intrigue and engagement.

In order to improve this redesign, I would conduct another round of iteration and assess the design with real-life OMU users. This would allow for direct user feedback and provide insight into how this product works in real-time.