We are asked to design ALCATEL's Fitness Web Portal based on their existing Android app in order to standardize and implement their fitness app user experience.
Interaction Design & Visual Design
Current Alcatel Fitness Mobile App
ALCATEL ONETOUCH is about to release a smart watch that can track a user's steps, calories burnt, distance traveled, fitness hours and sleep data. Four categories of exercise including walking, running, hiking and biking can be detected. In addition, a user can check his/her heart rate.
Users are able to check personal fitness data and set goals on their mobile app or on web portal.
With their Android mobile app design almost finished, Alcatel came to us asking us to design Fitness Web Portal for them.
We collaborated with Alcatel's designers from the very beginning for best mutual understanding. Rather than justing providing what they asked for, our team proposed additional functions like community section to implement the UX of Fitness App and Alcatel branding.
As for visual design, we started from comprehending their mobile app and ALCATEL ONETOUCH style guide. In addition, we developed a more elegant and round visual style across the whole web portal design.
Dashboard
Here you can check your steps, calories burnt, distance traveled, fitness duration and sleep hours you have had so far compared with your personal goal. You can also share your data through other social networking platform like facebook and twitter.
Timeline
Your personal fitness activities are listed according to time and duration along with activity type, distance, time and calories burnt. When hovering on the heart icon, a list of heart rate checking history during related activity duration will be listed out. The length of a rounded corner rectangle represents duration of an activity. A user can quickly check different date's data through calendar.
Community
You can compare your fitness data with your friends and add new friends here. You can also check what is going on inside your groups, leave comments and create/join new groups. For the first launch, people around a user with similar level of exercise amount to that user will be suggested in order to quickly grow his/her networks.
Pop-out Card Design
What shown here is the screen for creating/joining a group. The whole viewport is masked in blue while a white pop-out window shows up. Besides here, this kind of card design is utilized across the whole web design.
Design Guideline
Rather than just finishing design layouts, we organized every single element together and prepared a design guideline which allows not only designers but also developers on Alcatel side to quickly access to what they need.
Design Process
Agile development methodology is applied to the whole design process. Apart from online communications with Alcatel, we had onsite design review/workshop with Alcatel designers once every week to ensure the best mutual understanding.
Thank you for watching!
You might also be interested:
