The Client

 Client

uBack

My Role

My Role

UI Designer

Project Date/Time

Timeline

2.5 Weeks

Tools Used

 Tools

Photoshop

Illustrator

Final Deliverables

Deliverables

Style tiles

High-fidelity mockups

Style guide

uBack Background

 

uBack is a nonprofit startup that developed a mobile app to help connect donors to nonprofits organization for charitable giving. There is currently an iOS and Android version of the app where uBack is focused on ramping up mobile giving and higher supporter engagement rates that make it quick and easy for donors to lend their support digitally at an event, at a sponsor table or on the go mainly at charitable events by bringing together donors, nonprofits, and corporate sponsors. This is making it possible for more donors to donate to nonprofits easily where nonprofits are seeing an increase in donors they don’t have any preexisting relationship with who is donating to their platform.

The Challenges

 

The client came to us looking for a visual redesign of their current mobile apps. My team and I were tasked with styling and improving the nonprofit and campaign homepage, about the campaign page, the sign in and sign up, the filter page and the donation flow. Additionally, we had to take into consideration designing for Android and iOS. This was a great challenge for me because it was my first time dealing with a client it was much more nerve wrecking vs the classroom experiences. I had to take into account the time frame and the work scope we had. With that in mind, the client and I decided that I would focus on my choice of the platform which was Android because I using one while I get more time to focus on improvements to the visual interface.

Furthermore, my biggest concerns were the way data was organized and displayed in the original wireframes. As the data changed the original layout would be overwhelming with endless scrolling, this was a big concern in the UX research and insights from existing users. We discussed these concerns with the client and they were opened to make alterations to the visual screens. Finally, uBack has its existing brand so we were constrained to work within the brand, our primary goal was:

  • Stay close to the existing brand while exploring new visual identities.
  • Make things simple for the users by presenting information in an uncluttered
  • Not to overwhelm users with information, make it easy to find stuff.
  • Explore with swim lanes vs vertical scrolling.
  • Use large imagery and icons vs text as Google Play.

The Initial Wireframes

 

As a part of the creative brief, my team and I were given mid-fidelity wireframes that were already developed for the mobile app from a separate UX team that worked with uBack founders to do research and provide a strategic vision for the mobile app. We started by studying the research findings of the UX work, which helped us determined uBack functionalities and use case. Their wireframes gave us some insight on what the research findings had shown: which was, the donation process was not seamless and doesn’t feel trustworthy, information was impossible to find or too confusing, user had to sign in every time to donate, too many notifications, lack the ability to share organization on social media, and too much scrolling. The wireframes was also a foundation of where I had to focus on fleshing it out with a visual direction and it helped me understand the amount of content I had to design with. However, the client agreed with most of the strategic decision from the user experience designers but was disappointed with the overall interaction of the site that was not implemented. Finally, my team and I realized that the layout could be improved in several cases on the wireframes.

My Design Process

 

I was on a team of three UI designers, we had two weeks and a half to complete this project, which was split into three design sprints. My team and I started by reviewing the handed over assets to better understand the domain. By reviewing the user experience designer work, we were able to better understand the strategic decision and product goal.

The first sprint was focused on working as a team with a joint competitive analysis in and out of the domain, then my team and I branched off to explore our individual design style. The second sprint was mainly focused on establishing the individual design direction and create high-fidelity mockups. The final sprint was about refinement of the design direction based on the client feedback, finalizing and expanding high-fidelity mockups for delivery to the client. In my visual process, I always began by:

  1. Reviewing the UX Assets
  2. Conducting domain research
  3. Studying trends both in- and out-of-category
  4. Conducting competitive analysis
  5. Exploring visual inspiration
  6. Creating style tiles to present various design directions to the client
  7. Following Google Material design guidelines
  8. High-fidelity mockups
  9. Iterate based on client feedback

Research & Developing the style

 

Research and Client Brief

After reviewing the wireframes we had an in-depth conversation with the clients to gain a better understanding of their overall vision for their product. My team and I learned that uBack is not only focused on fundraising, it’s a way for nonprofits to share and communicate information through updates and news to help build relationship development with donors and their favorite organizations or causes. The new push notification will make it possible and with the ability to receive donations through the platform in a more simplify manner which the present app failed to do. Furthermore, we learned that their fan of Google Play interface where a lot of information are nicely laid out vs their current app which is too clutter. We also learned uBack was married to their brand and colors so we were constrained within the existing brand. Additionally, we asked for adjectives that represented uBack which the client emphasized: modern, simple and positive. Reliable, engaging and quirky. Welcoming, professional and elegant. With these adjectives in mind and our research result, we had a start to present several potential paths for their site.

Visual Competitive Analysis

After the client brief, our goal was to better understand the competitor’s overall space, look and feel. We divided our competitive analysis amongst the team covering the competitors: Charity Miles, March of DimesGivelify, Stand4, and One Today; other sites with similar functions and used any kind of data visualization: Paypal, Mint, Acorns, and Google Play. My team and I then used Google Drive to input the competitor’s and in-and-out of the domain visuals then collaborated to condense the list of sites that we felt best matched and shared our thoughts on the look and feel of the apps to determine common trends and what we can borrow or do better.

Design Principles

With the competitive analysis and provided UX insight, we combined to come up with a guiding reference to apply to our overall designs. We decided on three design principles to guide the rest of our process:

  • Clear and Clean – The design should reduce cognitive load by simplifying cluttered information.
  • Glanceable – The app is used at charity events and on the go to make it easier for donors to contribute to their choice of cause, data must be easily findable, scannable, and readable at a glance.
  • Easy and Personal – The interface and checkout process should have proper affordance so that user can easily navigate through to achieve task faster while engaging with the app to follow up on what new is happening with the nonprofits.

Style Exploration

From the analysis and visual inspiration we compiled, we presented three possible trajectories for our style tiles exploration where each member of the team developed their own tiles to present to the client. I really struggled with creating three distinct style tiles from scratch which ended up being less informative for the client to get an overall visual feel of the layout and elements. Nevertheless, one of my style tile was based solely on the client expectation, wants, and needs. My goal for the other two tiles was to showcase to the client how applying different styles could achieve a different look and feel.

Client Feedback

uBack founder and team gave us detailed feedback on all of our stylistic choices and was excited by all the options presented to them. However, it was very difficult for me to wrap my head around where everyone in uBack’s team has a different vision and opinion from the founder. It was hard for me to focus on who opinion and feedback to take and incorporated it in the high fidelity mockups. Key insights were: The founder Kaitlin liked my first tile but it was a bit dark while a member of her team didn’t like it because she thinks it felt “very garish and too harsh.” The second tile Kaitlin disliked because of the color and was not a fan of the bar graph but liked the layout while her developer liked the cleanliness and bar graph because it’s not boring. The third tile everyone like the social share features and the flat layout vs card-based design. Finally, we ended up sticking strictly to the brand colors keeping in mind the brand colors are dark, I had to think of a way to use the existing colors so it blended well with other colors to create contrast and we decided that I took various elements from each tile and merge them into my design.

The Result-HiFi Screens

 

After two rounds of the design sprint presenting our work and receiving feedback from the client and our project manager, I arrived at my final designs working off part of the annotated wireframes because they were user tested while I made alteration to the visual screens focusing on improving the way data was organized and displayed to helped improve the flow and keeping in mind the analysis and style tiles result. Below are key screen mockups that the client proposed and my version that I presented to the client showing changes and improvements I made to enhance the users’ experience.

First Screen Mockups

Final Screen Mockups

Style Guide

 

As a final deliverable, my team and I each created and delivered a comprehensive style guide for uBack to served as a visual guide to ensure consistency with all the UI elements found throughout the various screens of the interface so that developers and other designers can reference to.

Final Thoughts

 

uBack was pleased and excited with all of our final hi-fidelity screens, they responded positively, saying all the screens stood out in their own unique ways and were thrilled with the improvements made to the visual. However, uBack is not in the development phase until further notice.

It was an incredible experience given the opportunity to work directly with uBack founder and the team, they provided insights and feedback at each sprint. It helped me to discover ways in designing with strict guidelines in an agile environment where I learned to work quickly, adapt to changes, and prioritize usability over interaction due to time constraint.  However, I found it challenging working off the UX team wireframes because there was a lot of questions came up in my mind about improvements on the use cases, but asking clarifying questions helped me to made improvements for a better user experience.

This project was rewarding to me, being the first real client project that I worked on ― I was able to open up a conversation about the visual possibilities and usability issues the users would experience, and digesting the client’s insight to produce high-quality deliverables that meet their needs was a valuable learning experience.

Furthermore, working in a team with Lainey and Daryle taught me a lot; to watch them present their work to the client and talk about it professionally helped me improved and ease off my nervousness. Most importantly, I believe this project helped me increased confidence in my work where I learned a lot and was prepared for my next client project SpeakEazy.