SWORD GIRLS UI DESIGN AND DESIGN PROCESS

Role: Designed and developed the Sword Girls official website.
Company: ChangYou (US) Inc.
Game: Sword Girls

browser_game_flowchart

browser_game_wireframe_Page_05

browser_game_page_gamepage1

browser_game_wireframe_Page_07

browser_game_page_news_details_after_login

DESIGN PROCESS

This is the workflow I have used on this project and many future projects. The process is in five sequential phases. This process allows me to handle any kind of project with great confidence.

Phase 1: Kicking off the project

  • The first phase of the Core Process is all about gathering and analyzing the information necessary to clearly identify the scope of the project and then prepare for a kickoff meeting.

1. I used an online project management system called “SmartSheet” to create the master schedule.

2. During the brainstorming and regular meetings, the product team and I analyzed the compeitior’s data. The product team came up with the main features that will be on the site. Last, I used the feature list to create the design document and details schedule.

Phase 2: Developing site structure

  • With Phase 2, the actual hands-on work begins. Developing site structure is all about content and information strategy – determining how to organize information so that site users can find it quickly and easily.

3. Based on the design requirement, I started to create a flow chart.

4. Once the flowchart was finalized, I created wireframe.

5. Throughout the process, I work closely with the developer and listen to their concerns and feedback.

Phase 3: Visual design

  • The visual design, the look and feel, the graphic interface – it’s the first experience the user has with the site.

6. After the wireframe was finalized, I started the visual design to create the look and feel of the site.

Phase 4: Production and QA

  • Everything comes together at this point. Production merges content and design into a complete site design.

7. Ship final design and technical document to developer side.

8. Track progress and make necessary changes.

Phase 5: Launch the site live