Partner: Cindy Chau, Brennan Hildebrand, Liu Liu
Tools: Paper(Sketchbook), Whiter board, Axure, Adobe Illustrator.
The MERIT organization aspires to be the “industry leader in cause-related fashion.” MERIT is a fashion line devoted to service and the idea of paying that service forward. The fashion line primarily focuses on bags, hooded apparel, tees, and dog tags. When a customer purchases one of MERIT’s fashion products they receive a token, which is called an “Enable Goodness token.” The customer is encouraged to pass the token along to someone else, but first they perform an act of service for the recipient of this token. This trend continues as the token is passed along to different people, each one performing an act of service for the recipient. MERIT strives to provide opportunities to spread goodness throughout the world.
Merit Homepage(which is redirected to Goodness Determined blog)
At the very beginning, we created project plan and drew Gantt' Chart using Microsoft Excel. The purpose of this was to help us to track the process of our project.
We then assigned roles such as project manager, client/project liaison, report drafter and note taker, etc.
Gantt' Chart
Enable Goodness is focused on "passing tokens" and "sharing stories" so than create a strong bonding between users and the website. Firstly we went out for potential competitors and analogous websites.
Because Enable Goodness is a fairly novel idea so we had hard time find direct competitors. However, we did find some analogous systems which gave us inspirations. The "user-generated content" is a highlight for the website, so we located some websites that feature story-sharing and physical objects tracking like FML, Amazon's package tracking and USPS package tracking, etc.
Our sketches are based on our ideation.
Sketchs
Sketchs
We based our personas on the previous audience analysis Merit had done. We created 4 personas
Persona 1: Millennials
Use cases are the interactions that happen between the website and users. Note that the interaction includes both positive and negative interactions, like common errors, wrong workflow and path, etc.
Based on the sketches and personas/use cases, we built our preliminary wireframes using Axure RP. Those were very rough digital sketches which kind of display interactive actions between users and the website. We later add more fidelity to this raw wireframe and then moved on the the next step - evaluation.
Raw wireframe using Axure RP
We had our preliminary design(wire-frame) evaluated by another group. They ran heuristics evaluation and gave us very good feedbacks.
This is the most important part. We built hi-fi mock-ups using Adobe Illustrator.
Logo Design
Mock-ups
Mock-ups
Mock-ups
Mock-ups
Mock-ups
Style Guides
At last, we generated style guides which can be used by Merit in the future design.
Style guide
