Smartbeast
About
Smart clothing is coming strong in the last years. Several big brands have started to have our textiles connected, and my team noticed an opportunity to take this young market and make a website aimed at a niche segment: athletes. I managed the project, gave the roles to each person based on their strengths, and my main duty was to lead the design of the site, which involved every UI aspect of the site including developing the brand, wireframes, mockups, prototype, and microinteractions.
Team:
Beto - Lead UX
Basma - Developer
Joan - Research
Timeline:
5 months
Services Provided:
Strategy
Branding
Product Design
UX UI
About
Smart clothing is coming strong in the last years. Several big brands have started to have our textiles connected, and my team noticed an opportunity to take this young market and make a website aimed at a niche segment: athletes. I managed the project, gave the roles to each person based on their strengths, and my main duty was to lead the design of the site, which involved every UI aspect of the site including developing the brand, wireframes, mockups, prototype, and microinteractions.
Understanding
The origin
SmartBeast was born from the idea of being able to put together different brands of smart clothing into one page, since up to this date, there's no webpage dedicated to this segment.
Design Research
We did a 30 people survey with Typeform to gather data on different type of athletes. We did 3 interviews to people that do sports, and gathered the information from the survey/interviews to build our personas.
UX Research
We review and pick the best smart (and useful) smart clothing out there. We offer it to athletes of 3 different sports: running, training (gym, crossfitters) and cyclists.
Exploring
Wireframes + Mockups.
I proceeded to build the information architecture, sketch mockups, and build wireframes.
After testing the wireframes flow with potential users, I started building the UI and prototypes. Eventually I sent the design to our developer and worked together with her for Q&A of the same.
A Beast with Style.
For the logo I thought that the typography should give the sensation of technology, but without leaving behind the little beast we have inside. This is reflected with the isotype/icon, which can be used separate as well. The "Beast" of the icon, doesn't have a proper description of what type of animal is, it is just an "Intelligent Beast."
The site uses Oswald for headlines, titles and short copy, and Open Sans for body copy. We used Anticon for icons around the site. The color palette stayed with blacks and grays, becuase we wanted the photography to take center stage on the site, so the interface needed to stay clean. We added a blue color as support when needed.
Prototypes
After the design was done, I created a navegable prototype in InVision so our web developer could start developing the site.
Materializing
The Beast Unleashed.
The first thing that we wanted people to do while entering the site was to choose an experience based on their sport (running, training or cycling). Each experience is build based on the personas we made for the research. The user will interact with the video via hotspots that they can click and see the type of gear the athlete is wearing.
For the video experience I used a combination of After Effects and Premiere. The website microinteractions were done in Principle. Below you can check the website experience that includes the home, video experience, product grid and product page.
Results
He was charge of the design and creating the prototypes of the webpage. He also created the promotional video of the project. He respected all of the deadlines, he even delivered ahead of time! I was very happy with my working experience with Alberto. If you’re looking for a great UX/UI talent, do not doubt to contact Alberto.
Basma Alghanim
co-founder @SmartBeast
Award Nominated
ELISAVA Barcelona School of Design and Engineering annually gives the ELISAVA Professional Edition Awards with the aim to award the excellence of the best Master and Postgraduate projects, as well as to recognize, spread and award creativity, rigour and talent within the framework of the advanced training programmes in design. SmartBeast was nominated on February 2018 as one of two of the best projects from ELISAVA's Master in Web Design and Internet Projects Management.
Additionally, it’s a highlighted project in ELISAVA’s website.
Featured Project on Shifta
The project has been highlighted on ELISAVA's Shifta Online Program for the Master of User Experience Design
