Facilitating Group Decisions: A Tracking App Challenge (Part Two)

Week#6 of the UX/UI Design at Ironhack got me to reprise my previous work and add some style to it.

What a weird feeling that is to go back to a project after a couple of weeks! Going back after some time away, made me realize the odd choices, the lack of hierarchy in fonts, inconsistent spacing…etc

The prototype definitely wasn’t as good as I remembered it. Sad face.

But no time to wallow in past mistakes: the UX part was done but the UI was still waiting. The good news is I was wiser than during the first phase.

If you haven’t read about Part One of this project, you can read all about it here.

Timeframe: 1 week

Tools: Miro, Figma, paper&pen, Sketch, Invision

Moodboard

My original mood board ended up being completely different from the end result.

When I started the project I wanted the style of the app to be cheerful and colorful, with soft colors. It was supposed to be playful as I didn’t want some trophies or announcements to sound like scolding but more like wholesome little jokes between friends.

My original mood board, very simple

So I wanted to draw inspiration from Duolingo, Animal Crossing, and other cartoon-like visuals. I didn’t have a really specific idea of how I wanted it to look, but I knew what colors I liked. And going into this color-frenzy without any sense of hierarchy was a mistake because I had to really think harder about it later down the road.

Design

Colors

This is a step I’ve struggled with for a bit. I think I had an idea of what I wanted the app to look like after building the mood board but couldn’t make sense of it once the design session started. At some point, the colors got overwhelming and I didn’t really know what to do with them.

The first version (left) and the final color palette (right)

So, from the first draft to the final decisions, I changed my main colors from Leaf green to Açaï pink and created a gradient.

This gradient was used mostly for buttons and announcements and I ended up using the secondary colors for icons and trophies. So I think it made the design much more consistent overall and I was really glad I downplayed the palette in the end.

Typography

For this part, I knew what I wanted and didn’t go back to my first decisions. So, it was pretty straight forward. I used Nunito Sans for two main headings and Comfortaa for body copy and buttons.

Simple and neat typography

The choice of Nunito Sans was supposed to convey the frank and disciplinary character of organizing and Comfortaa, with its softness and roundness, was supposed to bring playfulness to the design.

Buttons & Icons

I probably had the most fun here. I found my icons on flaticon.com and adapted the colors to match the palette I had previously setup.

Buttons & icons

The “GO” button signals the other members of the group that you’re on your way. When tapping on it, it expands to present transportation options. While you’re on your way to the event, the transportation is still available to edit and the time you take to get to the place will change as well.

Prototype

The final prototype after two non-consecutive weeks of development.

A sneak peek

See the prototype here.

Conclusion

I’m really proud of the final result. I truly think it is one of my best works yet and I learned a lot, especially in terms of color use.

I think some things could be refined, like the display of poll results for example. And I would have used an extra day or two to build the polling system screens, so this could count as a next step.

UX Designer focused on creating meaningful & lasting bonds through technology. I want to design experiences that bring people together for real! she/her