Surpay

Role: UXUI & Logo Designer

Members: Alan Abed (developer), Keegan Anglim (developer), & Christine Dang

Challenge: To develop a new type of survey application that incorporates cryptocurrency rewards for survey takers.

Deliverables: Competitive analysis, Site map, Low fidelity wireframes, Inspiration collage, High fidelity mockups and prototypes, and Logo design

Tools: Trello, Miro, Wireframe.cc, Photoshop, Pages, Coolors, Procreate, and Figma

Time frame: 2.5 weeks

The Approach

We used the Agile methodology and tracked the process with Trello. As the research and designer, I split my tasks into 4 sections: basic layout research, low fidelity wireframe design, detailed research for design and UI concepts, and the high fidelity prototype. I met with Alan and Keegan via Discord where we discussed the concept of Surpay and the functionalities they had already developed for the app. While I worked on the UXUI research & design, Alan and Keegan worked on the backend functionalities and database. For the login, they mentioned that they only needed to collect user or company names, password, email, and wallet information (making this optional for users who do not want it to be saved in the database).

Basic Layout Research & Discovery

My first steps included researching popular survey sites and a few cryptocurrency websites. These included Google & SurveyMonkey for surveys, and OneOf, Sushi, and Uniswap for cryptocurrency exchange websites. This was a crucial step as I did not have any experience with cryptocurrency prior to working on this application. I took notes of their layouts, color palettes, user experience, and navigation to understand why certain design elements were chosen and how it made the user experience differ from other financial applications.

I wrote down the general design similarities for each category (survey vs cryptocurrency websites) in order to select and combine components for the Surpay wireframe. Each website has different design elements because they cater to different areas in technology. It was both interesting and difficult to piece components together because the two categories greatly differ from one another. Survey websites are more complex, contain more information, more pages, and a fuller homepage. Cryptocurrency websites on the other hand are more minimalistic, with little description, fewer pages, and a cleaner homepage.

Survey Websites

Descriptive texts

Light themed

Complex layouts

Maximalist homepage

Cryptocurrency Exchange Websites:

Minimal description texts

Dark themed

Simplistic layouts

Minimalist homepage

Vision

I decided to combine the themes of common survey sites and crypto exchange sites. In order to do this, I created a low fidelity wireframe with a dark themed background and light themed modals, dashboards, and overlays for a sharper contrast. We wanted users to feel as though they were taking surveys from trusted survey sites, but to have the feel of cryptocurrency exchange sites.

Since Surpay was coded to have a database that separates the two different sets of users (survey takers and survey distributors), the team and I decided to use a condensed login component with a additional steps for users to interact with. I chose modals over individual login pages for the interface because of their simplicity and easy navigation. They also allow users to exit the login and quickly return to the homepage if they want to explore more of the application before making an account or logging in.

Both dashboards will have the same layout - the only difference between the two are the functionalities and what they have access to. We wanted to individualize survey taker's dashboard from the distributor's so users who access both will be able to immediately identify which account they are logged into. To accomplish this, different design assets were chosen for the login modal image and dashboard background (as shown below in the 'High Fidelity Prototype & Asset Designs' section).

Miro Whiteboard:

Inspiration Collage:

Low Fidelity Design

I began the process by creating a wireframe for the homepage, using Wireframe.cc. From there, I created the 6 modals: a modal that asks which type of user they are, distributor login & account creation, survey taker login & account creation, and create a new account. After users select their status, it directs them to the corresponding login. A link was added under the forms to send new users to the account creation modal. This design allowed us to have one less modal for users to go through if they already have an account.

After completing this step, I moved onto the dashboards. Each dashboard had a welcome banner message. There were two concepts that I had in mind: 1. a page with large navigation buttons and 2. a page that had a left sided navigation bar with each page content being displayed on the right hand side. I then divided the rest of the designs by dashboards: the distributors and the survey takers.

Distributor Dashboard:

The distributor dashboard consisted of 4 options: 'Create a New Survey','Launch A Past Survey','Manage a Survey', and 'Account Settings'. Buttons were designed to be located in the navigation bar on the left hand side of the page in order to make each selection distinct from one another. Once a survey is completed, users are taken to the 'Manage a Survey' section where a success message,number of users completed, fund amount, and survey link will be displayed. The users will be able to end any of the surveys they are currently taking by clicking on the 'End Survey' button. However, in order to end the survey, a safety modal will pop up, asking users to enter in their password before confirming the deletion. This was also done with the account deletion in the 'Account Settings' tab. I added this safety feature to prevent users from accidentally ending their survey process or accidentally deleting their account.

Survey Taker Dashboard:

The survey taker dashboard consists of 3 user options:'Take a Survey', 'Previous Surveys Taken', and 'Account Settings'. When selecting a survey to take, users will have two options: entering a survey link into a textbox or searching a dropdown list of active surveys. If the user does not have a wallet attached to their account, an alert will pop up with a button that takes them to the 'Attach Wallet' section in 'Account Settings'. The surveys will consist of one page and up to 4 modals. The first modal contains a captcha in order to block out any bots trying to complete the surveys. The second modal is attached to the close button, asking users if they really want to end the survey and it will give them an alert that lets them know their responses will not be saved. The third modal alerts users to complete all questions if there were any left blank when the pressed the submit button. Finally, the fourth modal displays a success message after they press submit. It will also contain a button that will take users back to their dashboard. As for the 'Previous Surveys Taken' section, there are 2 designs: one for users that haven't taken any surveys and one for users who have previously taken them. The empty survey page will contain a message letting users know that they have not taken any and the filled survey page will display a list containing information of the date that the survey(s) was taken and their payment status. Both pages will contain a button leading them to the 'Take a Survey' section.

Once the basic page layouts were completed, I compiled the wireframe links, screenshots, and descriptions into a PDF file for my teammates:

Detailed UI Research

Once the low fidelity wireframe design was approved and signed off by all members, I moved onto researching for the UI components. This included color schemes, creating an inspiration collage for the digital assets, fonts, and rounded vs sharp edges.

I wanted the main color for the UI palette to be blue because it traditionally represents trust, professionalism, and is also a common color for financial institutions. For the additional colors, the team and I wanted to remain within the blue to purple hues because they represent honesty, optimism, loyalty, and reliability. Some of the palette colors were changed to have a neon tint in order to represent cryptocurrency and to add a bold contrast against the other colors. I struggled with selecting the colors because I wanted the app to have a sense of individualism, yet contain aesthetics of cryptocurrency exchange and survey websites. I started out by using Coolors.io, mixing and matching different blue and neon hues until I had settled with this color palette:

However, when designing the digital assets, the colors did not have the effect that fit the theme of the application. It needed cohesive colors for a more professional result.

I reached out to other UXUI designers and was recommended to use Colormind's AI color palette generator. I used it to create a new color scheme and edited some of the color choices so it could match Surpay's UI. The team and I were satisfied with this new color palette and it became the application's colors:

UI Research Notes:

High Fidelity Prototype & Asset Designs

When it came to the creation of high fidelity prototype, I used images from the inspiration collage made in the UI research phase. I chose a combination of realism and 3D rendered images so that the app has a well-thought-out balance of modern and unique designs (via 3D renderings) and trust/human feel (via realism images).

I used royalty free stock images from Unsplash as fillers for the prototype and later replaced them with my own designs. For the realism photos, I edited the Unsplash images through Procreate and Photoshop by adding an image of the Surpay logo on a browser over the device screens. For the dashboard background image, I went with a light grid design on a dark gray background with thin to medium chevron lines in the corner. The chevron lines had a neon glow added to them so that they would stand out.

I wanted to have the background and design assets to carry the color theme for this application. This allowed for the components to be more subtle, calm, and easy to focus on. It also allows Surpay to update their look later on by replacing the design assets.

When designing the logo, I used image references of a shield (to represent protection/security), gears and squares/rectangles (to represent cryptocurrency), and checkboxes (to represent surveys).

The team chose to proceed with option two. When it came time to turn the sketch into the official logo, I used big name company logos (such as Apple, Nike, Windows, etc.) as a reference to give the logo a minimalist feel yet contain everything you need to know about the company. In order to achieve that, I filled in the wallet color with a shade of black, changed the text color to white, and added 2 white lines at the bottom left hand corner for some distinction. This was the end result:

The high fidelity prototype helped put the entire application and all of its components into perspective. Once we were able to interact with the Figma prototype, we were able to narrow down on which elements were fully necessary and which ones we could omit. It also helped the developers plan and organize the layout of the code. For example, it didn't cross our minds that we would need 2 extra modals for login assistance (one to send a reset password to the user's email and one to display a success message with a button leading to the third modal to change the password). It also helped me realize that re-launching a survey would need a safety modal because it is asking for users to type in their password to confirm the relaunch.

Figma Layout

High Fidelity Prototype