What is Catch
Catch is a mobile app we built for a course project that explored the product concept of a gift purchase planner for male clothing. Our team played around the idea of personalized gift recommendation based on accessible social media information of the gift receiver which also would be fine-tuned by the gift buyer’s input. Our design language attempted to reflect the sense of style of the demographic who were more likely to be attracted to such personalized gift shopping experience.
- KEYWORDS | Mobile UX/UI, iOS App, Gift Shopping, Persona, Storyboard, Mood board, Design Language, Wireframing, Visual Design, Prototyping
- MY ROLE | UX/UI Design Lead, collaborating with 3 other designers
Problem & User Research
Buying the right gift for the significant ones has never been easy. Gift givers often seek for certain personal touch that can be delivered with a special item to the gift receivers. However, not every gift giver has such instinct or the faintest idea for gift purchase.
In order to better understand the user need, each member of the team conducted 1-2 face-to-face interviews with young females in their 20s and 30s. Here are some of our key findings:
- Young women generally enjoy shopping, but they still find shopping for their boyfriend difficult.
- They want to please their boyfriend by getting things they like, but they also complain that their boyfriend has bad taste.
- They are unsure if their own taste fit their boyfriend.
- They forget important dates.
Based on our research findings, we developed a persona to communicate the needs we want to address and the design goals the group agreed to achieve:
Each team member created a storyboard to illustrate their ideas of feature for the app.
Mood board & Design language
We created a mood board to express the feeling we want to deliver through the visual design. Because this app targets at young professional women, we wanted Catch to convey the feeling of urban and sophisticated.
We abstracted the mood board and created this beautiful color palette to reflect the style we envisioned for an online (selected/boutique) clothing gift shop for men. We chose the mellow colors to deliver the urban and cozy lifestyle. The simple lines and shapes were aimed for creating a modern and clean layout.
Wireframing & Iterations
The interface design begins with quick sketches of the key interaction to illustrate user experience. We had several iterations of the paper prototypes within the group. It helped us consolidate the initial conception and communicate within the team.
One key challenge was how to present gift recommendations that are attractive to the users and also give users the ability to customize their search. Our solution was to arrange the gift ideas by important dates with countdowns. The solution to customization was to allow users to add tags to refine their search.
UI Iterations & Final Design
We incorporated our design language to our wireframes and created our visual interfaces. We fine-tuned the details according to the iOS Design Guidelines to make sure all margins and clickable areas are appropriate.