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.
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.
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.
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.
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.
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.
