Think, Shape & Refine — My first experience on Interaction Design
Feeling so glad of being one part of Coursera Interaction Design Specialization this summer, I’ve completed the prototype Vire for the design brief: Glance.
This is not the first time for me making user-centered design, but this time stepping into the whole design process is quite comprehensive and memorable.
Point of View
A dashboard with customized icons and simple manipulation brings users unique experience and effective productivity. Minimal interface design is used for straightforward information. This app is especially useful for users who is visual-oriented and has many social events with friends to attend.
Shaping of Ideas
“A picture is worth a thousand of words.” People who are visual-oriented feel close to pictures or icons. What if a dashboard with social events is basically formed of your friends’ faces and simple icons? It should be straightforward for you to perceive and interact with the incoming events.
After storyboarding and wireframing I gradually build the original prototype, which form follows its function.
Grid and Guides
I use Axure as the tool for prototyping. During the prototyping process I apply some of typography knowledge into it, like use of global guides. It makes things well organized with consistency.
User Testing and Refinement
User testing might be completely a new challenge to me: observe, summarize and refine. For friends I got the chance to see their concern on misoperation; for later on usertesting.com I got to know nearly all users’ 1.tendency on details of some events 2.hope on getting input successful notification. And these basically formed my refinement on the prototype.
For A/B Testing I choose my redesign based both on the comparison of completion time and the user’s reflection — one of the user using my original design is hoping that she can see the interaction like my redesign — reflecting that my redesign is more intuitive.
Final Polish
I use Flaticon for icons of my app. However my hope in this app friends’ icon is replaced by human faces, which is more comfortable and straightforward to use.
I also increased all icons’ size to make manipulation feel better.
Finally, the app name is Vire because it’s an app based on Visual icon & photos and manipulates quickly (which is Vite in French). I choose the letter R before S and T, and the whole app name sounds like Wire — an app connecting people through social events.
What’s More
I was hoping that my app could have some quick changing feature besides basic editing, like dragging to different dates, pitching to different periods…these probably need to be done if I have more time :)
For those who’re interested in my prototype, this is the online URL. Have fun and do not hesitate to give me advices if you want. Happy Designing!
