• UI/UX Project from Concept to Prototype

  • Final project for CS 422 (User Interface Design and Programming) at the University of Illinois at Chicago, Spring 2022

In this project, we designed an interface for an emerging startup of our choice.

We followed a design process covered in the course to understand user needs, generate design ideas and refine our design ideas to generate an interactive high-fidelity prototype. Then we built a working UI implementation of our prototype, and conducted user testing.

Contributions

Although we didn't designate official roles for everyone in our group, my main contributions were:

  • Organizing documents and meeting times

  • Creation of low-fidelity wireframes

  • Assisting with high-fidelity wireframes

  • Creating the interactive prototype

  • Creating the base React app, as well as:

    • Home screen

    • Assisting with the Accounts screen

    • Handling navigation between screens

Focus and Research

After browsing our options for the basis of our project, we decided to choose a startup called Apollo, a debit card with a rewards system based in stocks rather than points. This particularly interested us because it allowed us to compare banking apps and stock trading apps and come up with designs that take the worst parts out of both.

Focus Group and Affinity Diagram

We held two focus groups who fit in the target demographic of the product to narrow down the kinds of things that they might expect from an app like this. What do they like about their banking apps -- what do they hate?

We compiled our notes and created an affinity diagram to categorize and organize all of our findings. Then, we broke them down.

Breaking it Down

We took specific notes on each category after creating the affinity diagram: a breakdown/summary of the category, followed by possible design ideas, holes/problems with those ideas, and specific summaries of what our users care about.

A trend we saw between the different categories is that complicated systems for rewards, and unnecessary fluff around the primary functions of the apps turned users away from using them.

Key User Needs

Our next step was to decide on key user needs that should be addressed in our app's design. Clarity, transparency, and simplicity were a must in our designs.

And based on these user needs, we created three personas.

Personas

Each persona we made covers at least one of the user needs from above.

Bianca Count

Simplicity and convenience

Justin Thyme

Useful data for stocks and easily accessible info for transactions


Rei Ward

Clarity on rewards and a non-intrusive rewards system

Taskflow, Wireframes, and Screens

Taskflow

Below is a basic taskflow of a user using the app. Each action is determined by what a user might do when they open the app -- what screen they will navigate to and for what purpose, and what they can do on that screen.

This taskflow applies most directly to Justin Thyme, the persona whose main focus was on the banking and stock portfolio features of the app. It ensured that each relevant screen that Justin might want to navigate to would have a natural flow from start to end.

Low-Fidelity Wireframes

With our personas, key user needs, and intended task flows in mind, we used Balsamiq to create wireframes. Below are a few of the main screens in the app.

Following the taskflow from above, we start at the login screen to access the app. From the home screen, we can decide what to do next: check one of the accounts listed front and center, or navigate to the Portfolio screen.

Login Screen

Home Screen

Portfolio Screen

Stock Screen

High-Fidelity Wireframes

Following the outlined schedule of the assignment, we then used Sketch to create higher fidelity wireframes. Below are the same screens as above.

Login Screen

Home Screen

Portfolio Screen

Stock Screen

Interactive Prototype

We used the high-fidelity wireframes to create an interactive prototype using Invision (link here) to show how each screen is connected and can be navigated to.

At this point, we presented our project and the interactive prototype with our classmates for feedback, which is listed below:

  • Make the Home page more personalized (welcoming the user)

  • Display how many shares of a stock the user owns on the Portfolio page

  • Make the bottom navbar bigger

  • Allowing users to sell custom amounts of shares instead of just all

Account Screen

The Account screen on our application, from low fidelity wireframe, to high fidelity wireframe, to our working prototype.


Low-Fidelity Wireframe

Created using Balsamiq

High-Fidelity Wireframe

Created using Sketch

Screenshot from Prototype

Created using React Native

Expo Snack

Try the React app in Snack!