RingTailor 4.0
During my internship as part of my UX design education, I worked on the latest version of Schalins Ringar's ring design app.
My job was to apply usability and a more modern look to the app as well as the company's new branding guidelines, without making too many changes to the structure.
Project details
Project type
● iPad app design
● Internship
● Team project
Tools used
● Figma
● Trello
● Adobe Illustrator
● Adobe Photoshop
● Discord
My roles
UI & UX designer
The design team consisted of me, two other interns and the product owner. I was responsible for setting the main design guidelines, creating the basic components and structuring the instructions for the developers.
Project duration
6 months (2021-2022)
What I learned
● To communicate with developers in their language.
● How to compromise on design choices and argue for opinions and points of view.
● To argue the importance of accessibility to senior management.
● Create and update a component library / mini design system.
The problem
Previous versions of the app were designed and built without a UX person involved. This led to many usability issues in the design. When I came into the project, the company had just received a fresh new branding that was not well suited for digital solutions.
The challenge
The design team started working on the app on the same day as the developers. This meant that we had to deliver quickly throughout the project. The goal was to make as few changes as possible to the code to save time. Since the app is heavily dependent on its 3D functionality, it was created in the Unity game engine. This also brought some challenges and a different way of working.
My biggest challenge was to solve the question:
"How can I improve usability without major restructuring?"
The solution
I worked extensively on building a heading structure and a visual hierarchy to make the app easier to navigate. I wanted to guide users' eyes to the important parts of the design and create a natural flow. Another main goal of my design was to give the user clear visual feedback so that every decision was obvious.
The result was an app with a much more intuitive and well-structured UI, at the cost of minimal code adjustments.
Design process
1
Connect with the user and analyze findings.
Branding guidelines analysis
Previous research analysis
Heuristic evaluation
User archetypes
3
Simulate the user experience and hand it over to the developers.
Hi-Fi prototype
Instructions & handover
Beta testing
Research & analyze
Analysis of branding guidelines
One of my first challenges was to interpret and analyze the new design guidelines. Since these were developed for print, I needed to find alternatives that worked better in an app. I tested and analyzed fonts, colors, contrast levels etc.
It turned out that the new primary color did not have approved contrast against white text, which the company wanted to use in their digital content. Therefore, I developed several suggestions of different contrast-approved shades to choose from if the company might consider changing its new primary color. In the end, the company chose one of my alternative colors as they wanted to be able to use white text against their primary color while still meeting the accessibility guidelines.
Evaluation of previous design
In reviewing the previous design, I found several usability issues. Text and buttons were in most cases far too small. I found it very difficult to read some texts and to find the right buttons.
Another consistent shortcoming was problems with heading hierarchy and general structure. As a user, I often had to scan all the text to understand what was what. It was also often awkward to use sliders and other functions, either because they were too sensitive or because I didn't understand what they did.
Previous research
Before I joined the project, the company had two other UX students doing research based on the then-current design (version 3). This research was made available to my team at onboarding. Our interpretation of these insights contributed to the foundation of our design in version 4.
We took part of:
-
Customer journey map
-
Impact map
-
Insights from interviews
-
UX review
The insights I took away from studying and analyzing the work of other UX designers helped me get into the project more easily. Building on someone else's research was not something I had done before, so it was a bumpy ride but a good learning experience!
User archetypes
Based on the previously gathered material and insights, my team developed three user archetypes. These made it easier for me personally to always keep the user in focus during my work.
The purpose of developing archetypes was to make it easier for us as a team to work towards the same goal and make sure to satisfy the user's needs, even though we were working on different parts of the app.
Key insights from research
Improved filtration
The customer journey map made it clear that there was a dip in the user experience when filtering in the app. A new UI is needed for this that makes the process clearer and more transparent.
More user-friendly UI
The problems identified in the impact map and UX review made it clear how important it is for users to have a UI that is easy to use and navigate, which the old design didn't live up to.
Ideate & define
Collaborative sketching
When I needed to come up with new ideas for different parts of the app, I usually used either paper and pen or simple wireframes in Figma. Since I was working directly with a product owner who needed to approve my design before handing it over to the developers, this step was sometimes very important.
Within the team, we went through each other's sketches and gave feedback and suggestions. I also often received sketches from the product owner to provide direction, which was especially valuable when it came to technical features that I didn't fully understand.
Early wireframes
New typography guidelines
To meet the requirements of digital solutions, I had to create a new set of fonts since the ones acquired with the new branding were not suitable. This became an enjoyable project for me!
To preserve the desired brand feel, I selected options that closely resembled the originals. Additionally, I explored fonts within the same category. As a team, we finalized our choice and settled on a favorite set.
Building a component library
I started by developing a component library at the project's outset, gradually expanding it as the work progressed. This library ensured that everyone on the team could easily keep their responsibilities up-to-date. Additionally, I provided textual guidelines to assist in using specific components effectively. I relied on Apple's "Human Interface guidelines" and WCAG 2.1 as references to support my work.
As the app was made in the Unity game engine, which often bases its UI on images rather than code, it was also important that all elements had the right properties in the right structure of layers.
Standardizing buttons proved a complex challenge, even with the entire team's efforts. We needed various variants for active and default states in the filtering section and at least one type of regular button/call to action. After discussions with the product owner, we eventually arrived at a consistent solution that was implemented across the app.
Styleguide
Prototype & deliver
After finalizing the app's structure, we began the prototyping phase. As the components were exported as images to Unity by the developers, it was crucial to create a pixel-perfect prototype.
Designers were assigned specific sections of the app by the product owner. Having clear definitions for the appearance of components and elements proved invaluable. In cases where new challenges emerged without predefined solutions, our team collaborated to develop suitable resolutions.
Solution
Selected views
The views I was responsible for in the design included:
Starting up
Problem
Issues with contrast and readability posed challenges during the login process. Small and poorly visible input fields made it hard to interact with them, as they were difficult to tap and the text within was not easily discernible.
Solution
Improved UI with larger input fields and buttons, enhanced contrast, and added functions for password display and reset to empower users, allowing users to fix minor problems themselves.
Old design (version 3)
Browse & filter
Problem
Challenges with the filter section included contrast issues, unreadable text, and unclear formulations. The results also lacked clarity on rings available for 3D modification, a central function of the app.
Solution
Improvements included clearer visual feedback and enlarged hit surfaces for buttons and clickable elements. A more defined hierarchy improved category understanding and filtering visibility. Results were better organized, with icons indicating rings that can be modified in 3D mode.
Old design (version 3)
View products
Problem
The product page suffered from unclear interactions to select metal color and carat, and it prioritized data over actual choices, which customers are usually most interested in.
Solution
The redesign includes clearer visual feedback on the choices made, with a focus on customer choices rather than data for store staff. The image gallery is now more prominent. The "Add to favorites" function was removed to streamline the app's use.
Old design (v. 3)
Create rings in 3D
Problem
The 3D mode presented challenges with unclear text hierarchy and industry-specific language, resulting in user comprehension difficulties. Inconsistent pop-up window designs worsened usability issues. Additionally, sliders caused usability hurdles, impeding user interactions.
Solution
Visual clarity was improved by making the user's choices and their appearances clearer. Language was simplified, and all pop-up boxes now adhere to the same pattern and grid layout. Sliders were enhanced for better usability by providing incrementally adjustable values on a scale, along with a clear input box for fine-tuning values.
Old design (v. 3)
Admin panel
Problem
Small input fields were challenging to hit accurately, while low contrast and cursive text in several places made the text difficult to read. Additionally, the lack of a clear structure and information added to the usability issues.
Solution
The input fields now exhibit clear states with a shadow inside when unlocked, a colored frame when active, and a padlock when locked. Fields, where the user has modified the automatic price now, display this price to the right of the input field. Checkboxes were replaced with toggles, which better suit the purpose. The fonts were enlarged and made generally clearer for improved readability.
Old design (v. 3)
Handover to developers
A Kanban board on Trello was utilized to structure the work, with columns for backlog, "To do," "Doing," and "Done." Both the design and development teams used the same board with their respective columns, offering advantages such as tracking progress, project overview, and clear responsibilities. However, over time, it became a little bit messy.
To facilitate collaboration and communication, a default component box was included in all documents shared with developers. This reduced the need for designers to answer questions on Discord. Additionally, I provided screenshots of the old design alongside the new one, enabling developers to visually compare and identify changes themselves.
The challenge arose when exporting components from Figma to Unity as images, requiring clarity on deliverables and processes. With time and understanding, the process became smoother.
Looking back
Working on the new version of the app simultaneously with the developers proved to be a challenging endeavor. With more time in the initial stages, I would have loved to conduct more in-depth research and gather valuable user feedback through thorough testing. While we managed to progress and deliver the updated app within a few weeks after the internship concluded, I believe that more extensive user testing could have further improved its overall success.
Being part of a live project from start to finish was an incredible learning experience. As the new version of the app took shape, I felt a deep sense of pride and satisfaction in my contribution. Collaborating with "Team Schalins" was rewarding, and I am sincerely grateful for the opportunity to be part of such a talented and dedicated group.
If I had the chance to continue working on the project, prioritizing user testing and making adjustments based on feedback would be my main focus. Understanding the importance of gathering insights directly from users, I would strive to ensure that their needs and preferences were at the forefront of our design decisions.