Design Challenge
How might we help users to easy to use, fun to play but constantly learning languages and keep the momentum in a long run?
Studies have shown that personalization and interactive communication could be the key value to support users maintaining their learnings.
Pokemon Go is a globally well known augmented reality (AR) mobile game that users could explore and catch the characters that numerous monsters appears based on the story line of pokemon animation. Hence, using high technology, augmented reality, to offer the users more realistic feeling of playing the game.
This project is to focus closely on their official website for expecially new users to get more information of the game and easy to understand meaning of each components exploring the landing page.
My role
User Research,
ideation,
prototyping,
interaction design
Duration
6 weeks
Type
Individual Project
Tools
Figma,
Miro,
MS Office,
some writing
implements
Concerns
Existing Design
- Less attractive main pages with contents and interactions.
The official website is outdated or much less care to highlight important contents especially for new users.
it only updates on latest news, which link from mobile app directly to news page for existing users.
2. Hard to understand key features of the game or way to use for beginner
it provides images of some functions like catching the ball, displaying Poke Stop, or Team Go Rocket, but it does not explain how to use for new users to understand
3. unmatching with youtube official site
main pages and banners are unmatching with official youtube channel and webpage, which confuses on users to understand the meaning.
Secondary Research
The desk research has been conducted to understand current BI (Brand Identification) and Key visuals on the app and official sites including youtube channel. Hence, key players’ official websites has been reviewed as below.
Key Competitors’ Analysis
Based on analysis of key competitors, some insights has been found as below.
| Table Header | Table Header | Table Header | Table Header |
|---|---|---|---|
|
Content |
Content |
Content |
Content |
Key Findings
- User Interaction
- Add videos
- Connect to other menus for more information
- ??
Process
- Create grid outline to design responsive website
more attractive interactions but including responsive website is essential in thesedays.Therefore, the size of three different devices, desktop, tablet, mobile, has been concerned with different grid layout.
Desktop : 1920px
Columes : 6 Margin : 300 Gutter : 20
Desktop : 1024px
Columes : 12 Margin : 50 Gutter : 20
Desktop : 768px
Columes : 6 Margin : 50 Gutter : 20
Desktop : 375px
Columes : 6 Margin : 16 Gutter : 20
2. Restructuring each topic
Hierarchy of each components on the mainpage needed to be re-organized for users easy to understand and follow the contents.
- added recent/popular video clips provided from official youtube channel to match and attract users.
- Highlights current festivals of the app to get some idea and offer ‘call to action’ easily access to further information.
- Displayed with chronical orders and included more interactions for fun to use.
- highlight AR platform in pokemonGo, which is the most trended technology thesedays, and enable to get further information if needed.
- Tied spreaded information with more explanation and included interactions for fun to use. Also, added CTA to easily access to detail pages of other menus.
- Highlight additional features to share information to users and ended with attractive images to get downloaded.
3. Added User Interactions
Display 4 different video clips at hero section for users to get some ideas in more attractive way
Card Type Interaction for the news
Highlight key features of playing the app and able to get further information by clicking each
Final Design
Reflection
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
What’s Next?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
