A UI/UX case study where I ideated and designed a responsive homepage using a design sprint process. I used this design sprint to gain better knowledge of Sketch and exercise my understanding of UX design principles and processes. I also used this sprint as a way to refine my UI design process, by sketching wireframes, creating low and high fidelity wireframes to layout site information, and explore new visual design strategies.  
My Role - Lead UI Designer
Skills - UI prototyping, brand positioning, information architecture, website design, responsive web design, low and high fidelity wireframing, prototyping, storyboarding, user persona development
Tools - Sketch, Photoshop

In a self-initiated design sprint I ideated, strategized, and prototyped a responsive homepage design for Influence, a product designed to help women develop personalized, healthy, beauty practices. 
The design sprint process I utilized was inspired by 3 different processes. First Tim McNeil's design analysis process; guest analysis, site analysis, content analysis, and marketing analysis. Second Susan Verba's Sponge, Filter, Voice, design for understanding process. Lastly, Google Ventures 5 day design sprint: process, map, sketch, decide, prototype, interview/learn. 

empathize - I needed to understand what the user experience might look like to understand the needs of my homepage design. By developing a user persona and storyboarding I gained a better understanding of what the goals of the Influence product might be, while also gaining insight on what brand strategies target users could identify with.

evaluate - After some initial exploration I evaluated company and user values, like diversity and personalization, that would inform my tangible product design objectives. 

decide - Based on evaluations, I then establish a brand strategy and visual grammar. Understanding company and target user values was the foundation to choosing what type of language and typography would communicate brand and marketing objectives while connecting with, and delighting users. 
sketch - Using the Sketch App and Photoshop I created low and high fidelity wireframes of the homepage design for various screen sizes. Creating mockups that distilled the interface down to its core components and expressed the art direction, brand voice, and visuals.
User Persona  |  A L E C    T I F F A N Y  
Age -  25
Work - Chemical Engineering Ph.D. candidate 
Family - Married with two cats
Location - Champaign, Illinois
Alec is a graduate student at the University of Illinois Champaign, studying Chemical Engineering. She is a newly wed, and half African American, half Caucasian. Her ethnic heritage is very important to her and her family. Keeping her hair in it's natural state, healthy, and expressive defines her relationship with her hair and helps her feel connected to her heritage. Alec has curly hair but lives in a town where most residents have straight hair. Beauty product offerings and inspiration that cater to her hair texture and personal style are sparse in her area and social sphere. The internet is Alec's primary resource for purchasing beauty products, finding beauty inspiration, and consuming beauty media. 

- Keeping her hair healthy while increasing curl definition and hair length
- Learn beauty best practices from people with hair texture similar to hers
- Learn about and purchase beauty products that have been tested and reviewed by credible beauty influencers and have been vetted for quality 
- Learn about new hairstyles and beauty trends that cater to people with similar needs as hers i.e. similar skin types, hair textures, style preferences, health and quality expectations, sustainability expectations etc. 

Low Fidelity wireframes distill the design to its core elements. 

The UI design was inspired by a notion similar to Dieter Rams' sentiment that "good design is as little design as possible." The neutral typographic language conveys modernism and edginess but doesn't come across as overdone or inauthentic. 
V I S U A L   B R A N D   S T R A T E G Y 
The primary font family for the Influence style guide is Akzidenz-Grotesk. This unadorned neo-grotesk is a modern classic that communicates style but does not force a specific style or fashion. It's versatility when paired, perfect as a display font and legible body copy, make it an efficient choice to hold down the typographic language. 

C O N T E N T    S T R A T E G Y 
The written voice of the Influence brand is a key factor in connecting with the audience. The target market for Influence is women 18-35 who are seeking beauty recommendations on the internet. Writing should connect with people the way they connect to a text from a confident, motivational, lovable friend. The written voice is casual, best friendly, uplifting, and inclusive. Utilizing colloquialisms, pop culture references, trending topics, hashtags, and emojis are all part of establishing the voice of Influence's content. 
N E X T   S T E P S
The next steps I would take to continue developing this product would be to create interactive prototypes and then utilize them for user testing and product development. It would be ideal to survey users and have them test basic usability while giving feedback on brand strategy and effectiveness. 

Continued iterations, prototypes and further user experience testing could be used while further developing visual design style guides, information architecture, wireframes, page flows and user interactions specifications.
Once a beta project could be rolled out data could be collected and pain points could be addressed and redesigned.
Back to Top