Crystal Vision
An eyeglasses shop with a small but efficient medical facility, that has a long history of caring for people's eyes health and style.
The Challenge
Crystal Vision is a company that facing the new technologies and young clients needed a new logo, website, and an APP that was easy to use, simple, modern and user-friendly.
The APP goal is to provide an easy and fast way to navigate throughout the giant collection of glasses styles and appearances, promoting good pictures and a simple buy/checkout process.
This is an example of our approach and process when developing a solution for a UI/UX project, here we'll present the stages we took for this particular case.
- Logo Design
- Mobile App UI/UX
- Website
The Process
Our process consists of 4 main stages.
Each one of those stages helps us understand and solve the needs and problems to improve the usability.
A good user experience it's not just about how it looks or how many features the APP provides. It's about the feeling, the frustration and the pleasure that the user has when navigating around, when he clicks in buttons and perform simple actions smoothly.
App Flow
One of the best ways to look at all the information we have collected, and how things connect with each other is displaying them as a map or "tree". Without any kind of worry about the look of the app, we can focus only on the flow, actions and information that each screen will contain.
With this approach, we can see how the screens connect each other and if there are any difficult movements that needed to be solved, and how and what information is received.
Wireframes
We start to think about how the app will look and how the information needs to be presented. Some raw sketches/concepts are done initially on paper because it's still much easier to quickly put ideas out through a pencil and paper than a tablet.
Preferable without colors, we move those concepts to a computer to start building some layouts and scenarios.
This process can be a little dull sometimes (we love colors) but our main focus is on the blocks of information and how to display them.
Prototype
After the wireframes, we build an interactive prototype to test the interaction and usability. In this prototype, it's already applied a style with colors and elements to make it as similar as possible to the end product for user-testing and feedback purposes. In this step, it's important to avoid starting the coding stage with usability problems that will be more expensive to fix later on.
If we need to change something after the user-test we go to the previous stages and repeat the process.
The End Product
