Brand Web Design, Mobile Design, and Mobile App
My Role
- UX Design: Prototype, Design Iterations
- Project Manager: Lead Group, Track Progress
Project Context
- Summer 2022 – 3 weeks
- Team: 5 Designers
- Brand Design Project
Tools
- Figma
- Ai
Project Overview
With a group of graduate students, I created a style guide for a company of our creation, Original Gems. I took a leadership position for the project, setting up meetings, effectively organizing our schedules, communicating meeting goals before calls and meeting recaps after calls with specific expectations for each group member.
We successfully created a mission statement, tagline, brand voice chart and language, typography style, a color palette, personas to apply to our target market, and a few different logo marks. The presentation was created on Canva according to our own style guide presented, and the logo was created through Adobe Illustrator. From the style guide, we designed three separate prototypes: a mobile web design, a desktop web design, and a mobile app. All prototypes were created in Figma. Individually, I worked on the brand’s identity, typography and color palette. I reviewed the logos and overall aesthetic cohesion of all prototypes. I also designed the mobile web design and checkout processes.
The Challenge
Ideating on the brand was a huge step in this process – finding a valuable idea with room for styling potential. With all of the components needed in the brand style guide, it was hard to define a brand with one step to guide the rest of our project. We needed a tagline, brand language, a color palette, typography, imagery, personas, logos, a brand voice chart, and a mission statement. We didn’t quite land on a solid brand tone until we found the perfect color palette to use. From there, it was a matter of developing cohesive prototypes of the website and mobile app with these guidelines.
The Design Process
Define
Understanding the jewelry market, we discovered a gap in the area of low-priced jewelry and green-conscious companies. Fast fashion has been trending, but there is a large market that prefers environmentally-friendly producers, as long as the prices are affordable. This market is also getting tired of the repeat style that is worn by everyone around them. They prefer unique possessions. Using this information, we defined our project goals:
- create a jewelry brand that encompasses the sustainable efforts of an environmental company, while providing lower-priced products of great value and unique identity
- develop a cohesive branded experience across a mobile app, desktop, and mobile website by maintaining consistency in design and context
Designing the desktop website, mobile website, and mobile app prototypes, we created a set of images, shapes, and phrases to reuse for a consistent user experience. We used Figma for prototype development and I collaborated on the desktop view, mobile app, and led the mobile web design view.
Ideate
Using several resources for ideation and inspiration, we found a grouping of ideas that shaped into what we now call to be the Original Gems brand. Pinterest, coolors.com, Adobe Color, Behance, Dribble, and Instagram are a few resources that tremendously assisted us during our brainstorming sessions.
The color palette for Original Gems contains a selection of calming earth tones and neutrals to reflect the gemstones coming from the earth. The use of granite grey and bone emphasizes the bohemian, free spirit that is our client.
The secondary colors, which consist of the colors Antique Brass, Camel, Black Olive and Cafe Au Lait, were designed to support the primary palette by providing enough contrast when paired.
modeled after the brand voice traits: inclusive, down-to-earth, and sophisticated
We defined leading, tracking, and kerning to fit with the chosen fonts. The body text is also Cormorant Garamond Light.
We wanted to highlight the “gem” in Original Gems. We chose a gem instead of a diamond to highlight the accessibility of Original Gems to all audiences.
Wordmark Logo + Pictorial Logo = Combo Mark
Design
We used Figma for prototype development and I collaborated on the desktop view, mobile app, and led the mobile web design view.
Results
I created a unique brand through ideation and collaboration, including a brand voice, imagery, logos, personas, and a color palette using design psychology. I led communication in meetings, assigning roles, setting timelines, and monitoring progress to make sure we met our deadlines, while adhering to project requirements. With a completed style guide, I implemented consistent design elements across 3 web/mobile prototypes, ensuring a professional and credible brand view.
Collaboration and feedback prove to be the most valuable factors in the design process. The process of styling and creating a company in collaboration with my group members was fun and exciting. I am eager to dive into more design projects like this one!
