Affinity OS
Affinity OS: At A Glance
Over a ten-week class of 6 sprints, my team and I had to design an original mobile operating system (OS) and a range of apps from scratch that professional designers and engineers would critique.
Our team decided that our OS should be influenced by nostalgia, enhanced productivity, and
an emphasis on social connections. Ultimately, we created a Nintendo DS-inspired flip
phone OS that uses technology to make real-world connections with a 90s/00s retro feel.
We created AffinityOS.
Click to jump ahead!
Daniel
Baek
Jesse
Sershon
Michelle Guan
Ginsu
Eddy
Minh tu Huynh
Timonthy
Joo
Carson (Me!)
Meet the
Team
My Role
Product Designer, UX/UI Designer
Project
College Course: Mobile App Design - INFO365
Timeline
Senior Year, Winter Quarter, Jan. - Mar. 2022
Project Introduction
The Challenge
This project began with a simple but complex challenge: Design an original mobile operating system in ten weeks—not like Apple's iOS, Android, or Windows, but something entirely new. We needed to create a new mobile OS and 10 core apps based on our principles in five 2-week sprints.
Form Factor & UI
We were committing to a 10-week design process, so we knew we needed to take the time to find a concept that the whole team was interested in and genuinely excited about. Through initial brainstorming and mood-boarding sessions, we landed on an OS idea that felt familiar yet unique and provided space for us to have fun with the challenge—an old-school DS-inspired, foldable OS.
Problem Area
With the UI picked out, our next step was to define a specific problem space. One feature that repeatedly came up in our team's brainstorming sessions was DS PictoChat. We all had memories of us PictoChating a friend we just made at the playground or joining random PictoChat rooms to see who was in it. We realized that today, this type of human interaction is a responsibility placed on third-party apps and is no longer a feature built into the OS itself. There needed to be a device that integrated community building as the crux of the system and allowed users to reminisce on a familiar user experience.
Sprint 1:
Design Elements & Low-Fidelity Wireframes
User Research
To gather more insight into what our demographic felt about our OS and their pain points with their current OS, we surveyed 40 people and interviewed seven. Based on the responses, we compiled a list of the key points to guide us through our development process:
Key User Insights:
-
New Mental Model: People are very used to single-screen phones, so a dual-screen would require users to make a new mental model. We needed to make a new experience feel familiar and intuitive
-
Nostalgia is subjective: What is nostalgic/retro is subjective to an individual, so our design elements have to portray that feeling to all users clearly
-
Portability - The mere size of a foldable phone may turn off users, so we need to pick the right aspect ratio for our OS
-
Social Interaction - Nintendo DS boosted social interactions and created lifelong memories
Defining Our Design Elements
-
Reverence for retro
-
Integration into daily life
-
Tailored to purposeful experience for folding screen
-
Encourage social interactions in real life as much as online
OS Design Principles
Synergy is our design language. We call it synergy because it's centered on natural collaboration. It's about strengthening your old connections and thriving in new relationships. It's intuitive, clean, nostalgic, and focuses on putting you first.
OS Design Language
The Brainstorm: Low-Fidelity Wireframes
With our problem space, product goals, and design elements mapped out, our next step was to start imagining what an Affinity OS would actually look like. Who is our OS for? What features would it have? To do this, between the seven of us, we split up drafting mockups for the physical design and three key apps: Profile, Calendar, and Music.
option of landscape & vertical positioning style
edge-to-edge screen & screen on the front of closed phone with minimal amount of buttons
clear separation screens with a hinge (as opposed to seamless)
Physical Form
Profile App
My Mockup
I took inspiration from the Pokémon "Pokédex" for my mockup. The Pokédex was a foldable device that showed users the profile and stats of each Pokémon. Not only was it a dual-screen device, but Pokemon was also an extremely popular game from the 90s/00s, playing into the nostalgia factor. In my mockup, the interactions are prioritized, and then the profile info
Accept & decline nearby connections
Showcase yourself for community building
Airdrop/Bluetooth functionality to share calendars to assist in planning time with friends
Spilt screen utilization calendar at the top, to-do list at the bottom
Calendar App
Music App
Playing Nearby
Shared Playlists
Music station based on location
Personalized features (music compatibility, what friends listen to)
User Journey #1:
Connect with nearby peers
-
Going to a concert/event alone and wanting to meet people
-
Make plans before going into the venue / inline
-
Centralized connection as opposed to trying to find someone through social media
User Journey #2:
Share photo with nearby user
-
You don't have to give out your contact information
-
Share photos with people based on who was around when the photo was taken
User Journey #3:
Stabilized video calling
-
Utilize the flip-phone feature to prop up the phone for video calls
-
Not confirmed in one location (like video call on a computer)
Sprint 3: User Persona & Use Cases
Meet Michael Stuart
Basic Info:
-
21 years old
-
College student
-
Currently on study abroad in London
-
Grow up with games and technology of the late 90s/early 2000s
Problems:
-
Doesn't know anyone on the trip, so he needs to make friends
-
Needs to get in contact with the trip organizer
-
Doesn't have the contact info for most people on the trip
Use Case #1: Clock - Share alarm
With so many activities going on with so many students, the shared alarm keeps all group members on track. If the students are on an off-campus trip like a museum, the professor can send an alarm to go off 15 minutes before meeting back at the bus.
Clock View
Set an Alarm
Share an Alarm
Use Case #2: Contacts - Find a contact from group
Before studying abroad, Michael didn't know anyone else on the trip or had their contacts. Through the contact groups, he can see the profiles of other students instead of trying to figure out who's numbers are whose.
All Groups & Contact
Group View
Single Contact View
Sprint 4: Lessons Learned & High-Fidelity Wireframes
We had 2 more sprints to design 8 more apps, so at this point we knew it was time to divide and conquer. Before we all went off on our own, we needed to first reflect on what we learned from the apps we designed as a team.
Challenges we faced with our design
-
DS UI in '22 is terrible — the UI of the DS was partly stylistic but mostly due to the constraints of the available technology. Applying outdated DS UI on a modern OS looks very clunky
-
Showcase form factor better — one of the unique factors of our OS is the 2 orientation options, but our use cases only considered the landscape form factor
-
Missing nostalgic feel — our gray color palette didn't have the retro feel we were hoping for and left too modern
What we learned & implemented
-
DS as a guide, not a replica — using old school UI with a modern font like Futura to reduce clunkiness
-
Apps have multiple views — each app would be designed in both landscape and vertical views to show the dynamic orientations better
-
Introduce color — pops of color would help us give a retro feel, again without committing too much to 90s/00s UI
One of the apps I was responsible for was Emailing. Below you can see my mock-up of the emailing app from this sprint and how I implemented the lessons learned:
Landscape View - use case of typing emails
Vertical View - use case of reading emails
Sprint 5 & 6: Final Product
Introducing Affinity OS
We spent the final two sprints of our project wrapping up our individual apps and regrouping to review them as a team. We made team decisions like, "Maybe we went too crazy with the color, let's dial it back," and personal choices like, "Wait—I like how they did that more, I'm changing mine." We made our final selection, and it was time to introduce Affinity OS to the world (the students of INFO 365).
Below, you can find our 10 apps:
-
Email & Keyboard- my responsibility
-
Notes - my responsibility
-
Music
-
Contacts
-
Clock
-
Messaging
-
Photos
-
Home Screen
-
Lock Screen
Email - designed by me
Notes - designed by me
Music
Contacts
Clock
Messaging
Photos
Home Screen & Lock Screen
Project Reflection
Of all my design projects, this was the biggest team I've ever worked with. I was so lucky to get a team that came to class daily with a mutual excitement to create. Our team had such a great team dynamic that once the course ended, we remained friends, and they were even the people I sat next to at graduation.
However, while we had a great team dynamic, I learned a lot about the importance of effectively communicating ideas. Looking at our final product, I think it's clear that the apps were designed by different people (which was not the goal). This taught two big lessons:
1) If you are going to take a divide and conquer approach, saying make it look "retro" isn't enough. You have to really take the time to communicate to figure out what the team does and doesn't want and to map out the design elements beyond just fonts and colors.
2) At the time, I was not using Figma to its full potential, and looking back, it shows. Using a component library and utilizing variants/properties would have helped us have a more consistent look between the apps. Learning from my mistakes, after this project, I took the time to learn how to utilize the full range of Figma's features (auto layout, variants, etc.) and how to apply them.