Codemoji
Codemoji's computer science curriculum for schools allows 1st-8th grade students to learn the basics of web development and coding, including HTML, CSS, and Javascript, in a fun and easy way, allowing them to create their own websites, animations and much more with our unique and adaptable learning platform. What I did: UI/UX Design - Development; Project is currently in Visual Design phase.
The Challenge
This client was relatively clear in communicating their desires from a UX UI strategy, however, the challenges we faced were coming up on bottle-necks when it came to receiving content. To facilitate the process - we went into the nitty gritty and were able to use UX research and strategize that the client's target stakeholders would likely prefer shorter text. Through this we came up with ideal word counts to not only help the client, but we also benefit from having clearer and more concise messaging as it created a better experience.
Product Design Process
1. Product/site definition
- Stakeholder research: interview key decision makers to gather insights about business goals.
- Value proposition discovery: thinking about the key aspects and value propositions of the product: what it is, who will use it, and why they will use it (what the product will be and how to match user and business needs)
- Concept sketching: creating an early low-fidelity mockup of the future product (usually 1st draft wireframe)
2. Product/site research
- Individual detailed interviews: acquire qualitative data about the target audience, discover necessary details like: their needs, wants, fears, motivations, and behavior
- Competitor research: this helps me understand industry standards and identify opportunities for the product within its particular niche (if any)
3. Analysis
- Create user personas: these will serve to represent realistic data buckets of your target audience that have helpful details of the person like gender, age, motivations, etc
- Create user stories: helps me understand the product/service interactions from the user’s point of view
- Storyboarding: allows the team to connect user personas and user stories; in essence, a story about a user interacting with the product
4. Design
- Create wireframes: laying out the basic structure of a future page, including the key elements and how they fit/flow together
- Create prototypes: creating the simulation of the product; may be low-fidelity (with clickable wireframes) to high-fidelity (fully coded prototypes - full UI/Visual Design).
- Create design specification: unite all of the visual design assets/motifs/elements required for developers to turn prototypes into a working product
- Assemble design system: if a large project, will typically create a system of components, patterns, and styles that help both designers and developers stay on the same page regarding the design
5. Testing
- Test session(s): execute user testing sessions with people who represent your target audience including moderated/unmoderated usability testing, focus groups, beta testing, A/B testing, etc
- Survey(s): capture both quantitative and qualitative information from real-world users; asking questions like “what part of the product do you dislike?” & getting/using the responses to enhance UX
- Analytics: use quantitative data (clicks, navigation/load time, frequent search queries, etc) to uncover how users interact with your product & then use that info to either modify and adapt elements to make beneficial & most importantly meaningful changes