BRANDING | VISUAL DESIGN | UX
Find phone cover that suits you or just design your own
Render Defender is a website aiming to help people find and order custom made phone cases and skins but also user can create phone cases/skins by himself using built in Design Your Cover App. Target customers are teens, young adults and middle-aged people mainly gen Z and millennials located in US and West EU.
DATE
____
May 2022 - January 2023
ROLE
____
Visual UX Designer / Brand Designer / UX Researcher / UX Writer
TOOLS
____
Figma, Miro, Photoshop, Illustrator, Corel, Camtasia, MS Office
Goal and Vision
The main goal will be to see if: using the website, ordering ready made products, designing specific phone cases and making final purchase is logical and intuitive enough, thus simple enough for our future users to understand user flow from start to the end.
Intended Audience
I conducted interviews and created empathy maps, personas and user stories to understand RD’s target users and user behavior. A primary user group identified through research were teens, young adults and middle-aged people mainly gen Z and millennials located in US and West EU.
Research
In-depth analysis revealed really small range of competitors, with limited possibilities concerning products in this industry. Lack of simple and logical online designing apps for phone covers is one of the problems. Limited material range, small selection of covers, non-existent selection for certain phone types and a small selection of quality cover designs are also problems present in this industry.
Interview Transcripts
Personas
User Journey Map
Mapping Mila’s user journey revealed how helpful it would be for users to have possibility to order or design unique and original phone cover protection using Render Defender website.
Competitive Audit
Competitive Audit revealed the weaknesses and strengths of our competition, as well as gaps and opportunities that Render Defender Website can use to its advantage.
Sitemap
In defining sitemap I used typically hierarchical informational architecture of website, always keeping in mind structured listings intended for search engines.
Ideation
Crazy 8s
With C8s I tried to push beyond my first idea and to create various solutions for this challenge.
Paper Wireframes
Paper different wireframes of home screen ensured that the elements who will be used in digital wireframes are well prepared to address major pain points.
Homepage versions
Product Gallery
Product page
Visual Designer App page
Final homepage choice (that follows) is focused on easy phone cover cards and carousel presentations as well as quick search option, which are both timesavers.
Homepage Desktop
Homepage Tablet
Homepage Mobile
Digital Wireframes
When I started working on Digital wireframes, I made sure my designs were founded on user research and all those feedbacks I got.
Homepage Desktop
Homepage Mobile
Gallery Desktop
Gallery Mobile
Product Desktop
Product Mobile
Lo-Fi Prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype.
The primary user flow I connected was finding and ordering a movie, so the prototype could be used in a usability study.
Usability Study Findings
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Round 1 Findings
Users want fewer elements, cleaner and less crowded homepage UI.
Users don’t understand difference between CASE and SKIN phone cover.
Elderly users find difficult to understand ADD to BASKET function.
Round 2 Findings
User don’t need Year of Production option in Advanced Search menu.
Most users don’t have precise clue what Brand option means.
UI needs more Accessibility for visually impaired people.
Affinity Diagram
Challenges
CHALLENGE 1 |
UI, Menus and Accessibility
Early home screen wireframes had some undefined menus, they were too wide and too messy. After two usability studies, I simplified some menus and add complexity to others, as well as more negative space. I also added Accessible UI for visually impaired people so they have better UX starting from home screen.
Before Usability Study
After Usability Study 1
After Usability Study 2
CHALLENGE 2 |
Misunderstanding Terminology
For the majority of users it is not clear what the Year of Production and Brand options are in the Advanced Search menu. Users do not need first option since model number determines it and by adding explanation note below, now they understand Brand is not the phone brand but brands like: LA Lakers, Marvel, etc.
Before Usability Study 2
After Usability Study 2
CHALLENGE 3 |
A picture is worth a thousand words
First usability study revealed that most users don’t understand difference between CASE and SKIN. By putting a popup visual explanation, users have clear and neat visual representation to distinguish this difference.
Before Usability Study 1
After Usability Study 1
CHALLENGE 4 |
Refining UI
In the Second usability study some users expressed that Design Your Cover page navigation is not that simple and logical. I highlighted and divided section into recognizable entireties / different blocks, thus making it clear to users how to end tasks step by step.
Before Usability Study 1
After Usability Study 2
Other Mockups
Style Guide
Combining variations of cold palette and accenting red alert meant to define Defenders's dominant colors came from wanting to express to users how creative their phone cover can be. Landing splash screen and variety of colorful menus are intriging enough to pull user further in. Accenting red in Logo symoblizes phone cover in perspective view.
Hi -Fi Prototype
