Gold
CLIENT
At the museum
DELIVERABLES
- UX / UI design
- Graphic design
- App design
BUDGET vs QUALITY
SCOPE
1-2 months
The problem: Thredz is an iPhone app for people in a city they do not know: it finds famous places, restaurants, theatres, malls and cafe bars nearby. The problem was the first minute. A stranger opens the app with one question, and the idea had no screens that could answer it.
The fix: We started from the wireframes, solved 33 of them, then designed 35+ custom screens, a logo and a four-color palette. The key transitions were animated in After Effects, so the flow could be judged before development.
- Platform
- iPhone
- Role
- UX/UI and graphic design
- Scope
- 1-2 months
- Delivered
- Wireframes, screens, logo, animation
Mobile App UI Design for an Unknown City
A visitor to an unknown city wants three things from a phone: where to eat, what is nearby and how to get there. Thredz puts famous places, dining out, theatres, malls and cafe bars into one app, so the interface has to work for someone who has never seen it before.
That set the order of work. Wireframes came first, because the screens depend on the flows. We solved 33+ wireframes before we drew the first custom screen, then designed 35+ screens on top of them.
Color System and Logo Design
The palette has four colors: blue #4abbc3, burgundy #a63a3c, green #598246 and gray #32353c. We kept it that short so every screen stays readable on a small display, and the logo was drawn from the same colors.
Animation Before Development
For the animation sequences we started from block animation, then divided the timeline and placed new key frames in Photoshop. We imported those frames into Adobe After Effects and added the tweens and the vector shape animations there. After Effects carried the most work in that pipeline, Photoshop about half as much and Illustrator the least.
The result is a prototype that moves like the finished app. Developers get the keyframes together with the screens.
What We Cannot Show
This was a design engagement. We do not have download, rating or retention numbers for the released app, so this page shows the design work and nothing else.
Tips From This Project
- Solve the wireframes before you pick colors.
- Keep the palette to what a small screen can hold. Four colors were enough here.
- Animate the transitions people meet in the first minute, not every screen.
- Build the animation from blocks first, then add keyframes and tweens, so changes stay cheap.
- Hand developers the keyframes together with the screens.
Thredz App
iPhone mobile application to find the famous place, dining out, theatres, malls, cafe bar using this app. When you visit the unknown city easily find the locations of our needs.
33+ Screens
Colors
Blue
#4abbc3
Burgundy
#a63a3c
Green
#598246
Gray
#32353c
Logo Design
Wireframes & Screens
Animation & Tools
For animation sequences we started from block animation. Then we divided a timeline and strategically placed new key frames in Photoshop.
After that, we imported all those frames to the Adobe After Effects and there we’ve added all additional tweens, vector shapes’ animations and so on.
Nearby you can see an example of what can be achieved with this pipeline and usage of different tools in percents.
33
Wireframes Solved
35
Custom Screens Designed
Read Next
- BetterBill: fintech app design for Android and iOS Another app, 100+ screens.
- SpaceEngine: game UI design A menu and a splash screen for a game.
- Price calculator See what a project like this costs.
Chat With Us
We usually reply within an hour.
On busy days – 24-48 hours
To schedule the work, start an hourly contract on Upwork
(set a 10-20h weekly limit, pause anytime), or send a message or email us