Extended Functionality Sketches

Although Off Chance had a functioning website, the founder wanted to add functionality to the platform. This extended functionality included profile management, a wallet system, a game where users could earn additional chances, display of the top donors for the week, and more.
I based the sketches off of the web app, and added more screens for the extended functionality. I worked closely with the founder and project manager to get these sketches approved, then moved on to making wireframes in Figma.

Creating the Design

After I had the layout sketched out, I went on to create wireframes in Figma. There were multiple iterations of design for each section, and I worked closely with the founder to get the designs to the final version seen below. A couple of the screens were inspired by the design on the website, but most were designed from scratch as a lot of new functionality was added to the mobile application.

Displaying Trending Raffles

Making the Home Page Immersive

Originally, the app was going to just going to display all of the raffles one-by-one from top to bottom. However, after some user feedback, we decided to change the home screen to have multiple horizontal carousels to display different categories of raffles. At the very top was trending raffles, because this would be the most important section that users should see first. We also wanted to display cards for the Top 5 Donors of the week, and for the latest winners for the most recent raffles.

Development: Sorting Raffles and Users

To separate each raffles into categories, I used the raffle query route for our API that returned raffles based on a certain field in the database. For trending raffles, I calculated a score by weighing likes by 30% and entries by 70%. I then sorted the array of JSON objects by their score.
For the Top 5 donors, I added timestamps in the raffle schema to check when the last time a raffle was donated to. I took the donations made in the last week, tallied them up, and took the top 5 donors.

Schemas for Raffles and Users in MongoDB

Design: "My Feed"

I made the background color black for the horizontal carousels that display users rather than raffles. This was to help the user distinguish between the two different types of sections. When a user clicks "See All" for a horizontal carousel, they are taken to a page with more detailed information for that section. The user can filter by the type of raffle, and like a raffle to get notified when it goes live. Since we wanted users to feel more immersed in the app, we added a feed that displayed raffles posted by people the user is following.

Profile Management

Followers & Hosting

One of the features that the website did not have was profile management. Although the users could log in, there was no functionality for following other users or seeing their activity. Another big thing that the founder wanted to add was a different kind of account for artists or influencers to host their own raffles for their own products. We also wanted to add a wallet feature, so that the user could just reload their wallet and use those chances towards a raffle of their choice.

Development: The User Schema

For keeping track of the followers and following, we had a field in the user schema for each. Every time the user wanted to follow somebody, we would modify their user schema and add the appropriate user id to the array. We also had a field to keep track of if the user was a host or not, since some functionality was limited to hosts only. The user would have to submit a form through the application and get approved to become a host.

Design: User vs. Verified Host

To distinguish between a regular user and a verified host, a green check mark was added to the profile of the host. The host had access to a dashboard, where they could see all their raffled items that were live and pending approval, as well as different stats for those raffles.

Gamifying the Platform

Drawing Users In

The founder wanted a way to reward users for more engagement with the app. We came up with a solution - to gamify the platform, and allow users to win bonus chances for a raffle after they've already signed up for it. After the user picked their size and paid for chances to enter into the raffle, the app would take them to a rock-paper-scissors game where they could win more chances.

Development: Dummy Opponents

Originally, the founder wanted to have users compete against other users for more bonus chances. However, we thought this would take too long to implement for just one piece of the app, so we decided to have the users play agains pre-determined dummy accounts in the database. The pre-determined account would just randomly pick a choice in the game, and the user would pick their own choice. We set a timer so that the app would pick a choice for the user if they took too long. We also capped the bonus chances that they could win at half the chances they bought for the raffle.

Design: Catering to the Userbase

I made an initial design for rock-paper-scissors. It was a simple two-screen interface where the user would pick a choice and see the results of the match on the next screen. However, we wanted to cater to the userbase, so we replaced the simple images with images of The Rock, Nike Air Force 1 Scissor, and money. We also displayed the user's information and the information of their opponent to make it feel more like a game.

The old RPS design vs. the new RPS design

The Live Drawing Experience

Making An Immersive Experience

We came up with the idea of "drawing cards" to make the whole experience immersive. When the user drew their own card, it would show them the prize they won. They could then click on other users' cards to see what they won.

Development: Live Chat & Social Media Sharing

For the live chat, we used Socket.io. To give users the option to share their cards to social media, I used the Expo Sharing Library. I used an npm package to simulate the confetti. Since we didn't compress any pictures, before uploading them to IBM Cloud object storage, they were still a bit slow in loading.

Design: Displaying the User's Prizes

Since we wanted users to walk away with a feeling that they still gained something even if they didn't win the raffle, we created four tiers of consolation prizes. Each tier would get a different number of chances that could be used towards another raffle.

The back of the card that's populated with the user's avatar

The back of the card would populate with the users' profile pictures. The design of these were inspired by Pokemon cards. After a user clicks on one, it turns over to reveal the prize for that user.

The front of the card that tells the user what prize they won

Final Product

The Github repo where all the code lives is private, but the application is in the works to be published in the App Store and Google Play Store.

Visuals for the Apple App Store

A marketing video made by Sam Clark, featuring wireframes by me

What I Learned

The most important thing I learned during this internship was how to communicate with people in non-technical roles. Throughout the internship, I worked with non-technical team members to determine what functionality was possible in the scope of the internship, what resources it would require, and how long it would take to implement. This helped me gain a high-level understanding of our tech stack as I had to work with others to fit all the pieces of the product together.

Another thing I learned from this internship was how to find a balance between implementing things efficiently and implementing them quickly. Since the workload was heavy and the time period we had was short, we had to figure out as a team what functionality would have to be sacrificed. If I had more time, I would have done more testing for the application and more refactoring out repeat code.

Others also liked...