I created a UI design for a companion mobile app for Skagen Connected hybrid smartwatches. With the app users can pair and customize their hybrid smartwatch experience.
Design
Opportunity
In 2015, Fossil Group saw that traditional watch sales were in rapid decline. There was an opportunity to give watches new life by integrating smart technology. This led to the birth of the hybrid smartwatch. Fossil Group partnered with with an external agency for the first generation of products.
In 2016, Fossil Group planned to release 2nd gen wearables and companion apps for six of its brands. The agency created a white label user experience for the companion app. The app enabled users to connect a brand’s hybrid smartwatch or fitness tracker and configure different features. Features included step and sleep tracking, notifications, and second time zones. The agency delivered an unbranded app that was customizable for each brand. Fossil Group’s brands held unique personalities whether they were simple, quirky, or luxurious. Fossil hired me to express Skagen’s unique brand personality in the UI of the app.
Read more about the Skagen hybrid smartwatches in the reviews below:
What is the
Problem
Skagen was 1 of 6 brands scheduled to release wearables and a companion app. Skagen had limited experience in app design and operated from a fashion perspective. They were ready to come alongside Fossil in setting a precedent in this new space where fashion and technology intersected. Skagen was one of the two brands assigned to me. The brand was the epitome of simplicity, distinct from minimalism. They embraced simple lines and shapes, inspired by nature. Thoughtful and careful use of these elements could be used to tell rich, compelling stories. The UI needed to be unique, but scalable alongside the UX of the white-label app.
What is the
Solution
I created a simple app design, inspired by Danish design and the natural order.
I created a UI that paralleled Emporio Armani’s modern design trends. I was inspired by the Emporio Armani Sounds app to create the diamond pattern. The imagery was successful in communicating luxury without being out of touch with modern trends. I incorporated retro neon colors to balance the dark palette, and appeal to their Millennial target audience. It added depth to the brand personality and reinforced EA’s edge. I also considered how the design would serve as a backdrop for EA’s hybrid smartwatches in-app. I used neon colors to draw attention to parts of the app users spent time reviewing data or configuring the device. I leaned on the neutral colors for information, or to let the smartwatch images stand out.
Impact
Many users loved Skagen’s user interface (and some watch styles were selling out fast!). It was turned out to be a clean, attractive utility tool for the hybrid smartwatch. There were some concerns expressed that the app was too “boring”, which was the result of reduced functionality post-launch.
iOS Reviewer
The watch is very nice, as is the companion app. The app is simplistic, but so are the watch features when it really comes down to it. Setup is easy and the watch sync is very fast.
Android Reviewer
Love my watch like my app…
Android Reviewer
It’s a great, clean app that’s easy to use and includes a mini user manual. I run it on an IPhone 5S.
Challenges
One challenge was balancing the brand’s fashion qualities with technology. Skagen’s brand looked excellent in print, but was much more difficult to translate to a digital context within a white-label process. One area that we really struggled was the usage of the thin font throughout the app. Although it looked good up close, the reality is that it caused a lot of accessibility concerns. Accessibility is everyone’s job and it should have been considered more in the design rather than expecting development to take care of it. Here is a humbling review to remind me of that:
Poor Graphic Design
This app does work, but it is poorly designed. It looks like Skagen’s website instead of an iPone app. It does not support bold text and large text sizes in the iPhone Accessibility settings. I don’t want to feel all thin and Scandinavian when I open my app, I want to check on my activity levels. This app design gets in my way.
Oof.
What was my
Process
[Discovery through brand analysis]
Project Goals
- Build a uniquely branded user interface on top of an inherited app user experience.
- Bring a predominantly fashion-focused brand up-to-speed with today's technology.
- Give the app user experience meaning through key "brandable moments", predetermined by the strategy team.
- Display the Skagen brand's values through meaningful design.
My Role
I was responsible for the entire UI design for the Skagen Connected app. I had the autonomy to apply creative processes and own the relationship with brand managers. I learned about Skagen’s brand identity from two design leaders for the Skagen brand. They taught me how to observe beauty in the simplest forms, and helped me translate it to a modern digital context for hybrid users.
Steps I took
I spent several weeks researching the brand, collecting as much material from internal stakeholders and scouring the web to find any digital I spent several weeks researching the brand, collecting material from internal stakeholders. I scoured the web to find any digital assets I could leverage to communicate my ideas. I ran design iterations by my peers, and presented my ideas to the internal client. Concepts were filtered until the best candidate was selected, which I moved forward and iterated on. Below are explorations of the app design to show how I arrived at the final product: I could leverage to communicate my ideas. I ran design iterations by my peers, and presented my ideas directly with the client internally. Below are design explorations of the app, inspired by nature and objects like the hourglass:
My prior experience in development helped me manage my team’s expectations on the front-end work. My influence curbed expectations away from unrealistic designs. The Skagen team was considerate and valued my expertise. The Skagen team championed simplicity in their design language was simple—not to be mistaken by minimal design. Together we were able to suggest areas of the app that would add delight to the experience. We envisioned accomplishing this through the use of color or fun animations.
I designed hundreds of screens in Sketch accounting for various states. The screens were uploaded to an InVision prototype to review and approve internally. I used Zeplin for our development team to provide approved screens ready to be built. Once we received manufacture samples of the Hybrid Smartwatch, I was able to QA beta app builds. The development team in Vietnam would check in builds overnight and I provided feedback. I communicated with them through threaded comments in Zeplin and JIRA tickets. Once all teams approved of a beta build, the app moved to production before to product shipments. I was responsible for providing support for app store assets and last minute hot fixes.
Introducing the
Final Product
We launched the Skagen Connected companion app in the fall of 2016 alongside a handful of Hybrid Smartwatches that combined fashion with technology.
The team worked with 14 brands to create utility apps for their hybrid smartwatches. Each app had the same functionality, but offered unique branded experiences. We carved out areas of the app for brands to customize without risking usability. One of those areas was the home screen for housing information about user’s devices. By optimizing this screen to offer a high level of customization brands could connect with users in a way that was meaningful to them.
My Lessons
My Lessons
How I continue to grow as a designer and a person.
Taste of Leadership
After launch, I was commended for my design leadership. I was asked to provide UX support to improve our full portfolio of hybrid smartwatch apps for a few months. When the leadership team realized there was far more hidden potential, I assumed ownership of new user experiences on Fossil Q. These new experiences would roll out on other brands like Skagen at a later date. By this point, our team had grown and I handed off the user interface design and maintenance to other designers. I handed the Skagen UI design off to Marie Libres, who maintained the brand and applied UI to new experiences I created.
Balancing Brand and Business
Many teams we worked with held their respective brands in high regard. They wanted equal or more influence over the app direction than other brands. I learned to carefully weigh the the business goals of Fossil Group against each brand’s perspectives and value. This enabled us to identify areas of the app that could be customized without compromising the integrity of the experience. But I also developed empathy toward brand ambassadors who wanted the brand to be represented accurately in the new age of wearable technology.
Demographic Insights
This effort taught us more about the audience. We learned that the average consumer was a German male between the ages 25–34. Our active monthly user increased 6,275% in 18 months after launch.
Active Monthly Users
Increase in 18 Months
Closing Thoughts
This project was really challenging for me. I was not formally trained in traditional design, but I found mentors in the Skagen brand leaders. I had to break away from my clinical approach to technology and embrace ambiguity and creative exploration. If I could do one thing differently, I would have taken a more user-centric approach and considered how to reconcile simplicity with accessibility.
