DashBill is a finance web application that assists treasurers and administrators of organizations in budgeting and collecting membership fees and transactions. DashBill tasked me with redesigning their website because they felt it was:

not exciting nor captivating
"clunky"
lacking professionalism

Studying the original website and testing the usability for myself, I identified some weak points:

inconsistent theme
unintuitive web flow
unaesthetic

Let's set some goals for this project:

Create a consistent theme that is professional, aesthetic, and dynamic.
Re-work the web flow to be more intuitive.
Re-design the landing page to capture visitors' attention.
Re-design the sign-up/log-in page to look more minimal & lucid.
Create a budget page to act as a financial dashboard.

Here are some screenshots of the original landing page:

The original log-in/sign-up page:

LP - Research

2. Research

How can we improve these weak points?

Unfortunately, due to the time pressure and being the only UI/UX designer, I was not able to do extensive user research. However, I was able to ask close friends and family to go through the landing page and jot down what they thought needed improvement. Their user experience helped me form a better understanding of the landing page's pain points and helped me discover breaks in the web flow, such as faulty buttons and links. Their input also informed me of the need to add a budget feature to the website.

After discussion with the team at DashBill, I formed an idea of the target audience, which was predominantly males in social fraternities. Thus, I should draft up designs that will cater to that audience. Then, we collaboratively established the overall look DashBill wanted the landing page to present to its audience by identifying key words, such as clean, dark, simple, and minimal.

Before I created a theme board, I made sure to look at competitor websites and note what elements could be useful for DashBill's redesign. I also looked to Dribbble (a design inspiration platform) and Pinterest for existing designs that fit our key words that I could draw ideas from. I knew I wanted to create a more dynamic website that offered more animated designs and interesting fonts.

Here are some examples of the designs I drew inspiration from:

Screen Shot 2022-10-04 at 3.24.19 PM.png

Screen Shot 2022-10-04 at 3.24.48 PM.png

LP - Ideation

3. Ideation

Let's start forming a theme board!

With lots of research, discussion, and inspiration to draw from, I was ready to create a theme board. I loved turning our team's collective ideas into something visual, and creating a theme board gave me an easy guide to refer to when I was designing.

I chose base fonts that fit the key words and target audience we were going for, but also matched the style of the DashBill logo the developers had created. After a meeting with the founders and development team, I narrowed down the base colors that suited DashBill's new theme.

Up next, I created the very first map of how the landing page would look. With the limited time frame, I decided to create a weird combination of a wireframe and a low-fidelity mock-up. It's not quite as developed as my usual low-fidelity mockups are, but it contains more information than my typical wireframe. A chunk of the mock-up was based off the layout of the original landing page, but with some improvements to the web flow.

LP - Design

4. Design

How can we create a design that meets our goals?

After many cafe visits, Zoom meetings, YouTube tutorials, and snack breaks, I designed the first draft of the high-fidelity mock-up. By meticulously referring to my user research, online research, and theme board, I created a detailed draft of how the website might look. I usually like to leave various comments throughout my designs that either explain a choice I made or notes questions I had.

During this step, I also began prototyping the design, where I start to form the web flow of the page. I can let viewers unfamiliar with Figma see how each element flows to the next.

View some of the major design changes below.

The Landing Page

Original (before)

Redesign (after)

The Log-in Page

Original (before)

Redesign (after)

The Sign-up Page

Original (before)

Redesign (after)

Creation of the Budget Feature

5. Feedback

How can we collaborate?

After presenting the first draft of the high-fidelity mockup to the team, I opened the floor to comments and constructive criticism. My colleagues gave me great feedback, and offered perspective on elements I was not very familiar with. They also gave me great suggestions on how to make the web flow more intuitive, and some aspects that could be left out of the design.

For some pages, I debated between two different designs. I created different versions because I was unsure which layout looked better - which I then presented to my team and had them vote which one they preferred.

For example,

Version A

LP- Feedback

Version B

In this case, Version A was the winner. During this step, I also asked my colleagues to go through the prototype and test the usability of the design. With my team's feedback, I made the corresponding changes within my skill set, or I looked up articles and tutorials to learn new design tips that helped me meet my team's needs and requests. There is always something to learn!

6. Solution

Did we solve our weak points?

Let's review the goals we set.

Create a consistent theme that is professional, aesthetic, and dynamic. We created a theme board that listed the theme's key words, target audience, color palette, and fonts. That way, we could always refer to the theme board in order to design consistent pages and frames.

Re-work the web flow to be more intuitive. We tested the usability of the site ourselves and noted what part of the flow needed improvement. We also had our friends and family share their experience going through the web flow. The more experiences, the better. We needed to see how different people could experience the website differently, and decide which parts of the website were not intuitive.

Re-design the landing page to capture visitors' attention. We added more dynamic and animated elements to the website to really attract visitors' attention. We also improved the aesthetics of the website through a consistent theme that fit our key words.

Re-design the sign-up/log-in page to look more minimal & lucid. We removed features that were unnecessary created a design that was very straight-forward and clean-looking. We wanted visitors to be free from distractions while inputting their personal info.

Create a budget page to act as a financial dashboard. We created a budget page that acted as the home base for the web flow. We felt that the website needed to add another function in order to make the web flow more intuitive.

View the live Figma file of the finished design:

LP -Solution

Reflection

This project was no easy feat. As my first big project as the only UI/UX designer in the team, I stumbled across a lot of hiccups and obstacles along the way. I learned so much about the UI/UX design process, and became very comfortable with Figma.

Some things I would do differently next time:

carry out more extensive user research (although we were on a time crunch)
create a wireframe and low-fidelity mockup for each and every design
use the prototype feature more

Overall, this project was a great learning experience and first step into the industry. Feel free to contact me abut any questions or comments about this project!