UX/UI BOOTCAMP Ironhack — two first weeks

Aude Gerlinger
5 min readJul 15, 2018

--

I integrate Ironhack at the beginning of july. In this article I’ll speak about the UX parts of a project. The case study here was to choose a supermarket and propose an e-commerce solution adapted.

Alison Lagerlöf, Julie de Clausade & me

And we choose la Louve

Now let see the methodology that help us to evolve the project, following those 5 stages:

1. Company overview // EMPATHIZE

Open to anyone La Louve is a cooperative that allows you to buy local products (fresh and non fresh) at a reasonable price. Members of the cooperative are also contributing to the organization of the shop. The shop is part of the neighbourhood life.

In this case USERS = MEMBERS of the supermarket

2. Problem statement // EMPATHIZE

Our click & collect website was designed to achieve an easier and faster shopping experience. We have observed that the service is not meeting the user need for delivery and product availability which is causing frustration, it’s not known everywhere and look like a lack of modernity.

3. Competitive analysis // EMPATHIZE

4. Hypothesis statement // EMPATHIZE

Every project begin by assumptions.
- We believe making a click & collect website for La Louve members will achieve an access to different product. We’ll know we are right with more demands from member.
- We believe making a click & collect website for La Louve members will achieve a better stock management. We’ll know we are right with less unsold product.
- We believe making group order for La Louve members will achieve lower prices for the costumers. We will know we are right with more people ordering stuffs.

5. Market positioning // EMPATHIZE

6. UX Strategy Blueprint // EMPATHIZE

7. User research process // DEFINE

  • Survey
  • Interviews, we went to La louve to interview members of La louve. People were really kind, openminded and available for us. It was a great experience.

Our mission will be to keep the values of La louve and put Human in digital.

8. Principle of design // DEFINE

  • Affinity diagram (we made it thanks to a brainstorming)
  • Empathy map
  • User persona
    With all informations we had, we could define our Main user called a persona.

9. Concept ideation // IDEATE

Tools to generate ideas.

  • Brainstorming
    Timing exercise to have a quantity of ideas following one theme.
  • Mind map
    A visual tools to group your ideas and make them grow like a tree.
  • Crazy 8's
    8 minutes, 1 minute = 1 idea !
  • Robin round
    You draw an idea, you pass it to an other member of your team who evolve or comment your idea. Do it two times.
  • Bad ideas
    The most difficult exercise for me. Think about bad and illegal things, turn it into an idea for your project. Such as child labor, sell weed… Second round try to converge this idea into a great idea.

10. Storyboard // IDEATE

11. User journey // IDEATE

12. MVP & features priorization // IDEATE

  • What is MVP ? (minimum viable product)
    The minimum I need to sell my product.
  • 3 tools to prioritize:
    - Moscow method: must have, should have, could have, won’t have
    - Value VS Complexity quadrant: start with a big picture / business goals, user goals
    - Buy a feature: list out feature and assign a price to each, ask participant to pay so they give the price they think it worth.
  • User story (Mind map and Moscow method used)is a sentence that describes the user perspective. It has to be short but descriptive. It helps you to prioritize. Some examples:
    - As a member of La Louve I want to have an access to the daily planning of volunteers so I can ask them to delivery my order if I’m sick or live far away.
    - As a shopping member of La louve I want to see all descriptions of the products so I can make sure it corresponds to my shopping criteria
    - As a preparing member of La Louve I want to have an access to the order so I can prepare the cart for other members.

13. Before begin prototype

  • Sitemap + Information Architecture
    The organization search and navigation systems that help people to complete tasks.
  • User flow

14. Wireframing // PROTOTYPE

  • LOW-FIDELITY
    Paper prototype, no color, sketching → quick & cheap !
BEFORE / AFTER
  • MID-FIDELITY
    digital correction of the first step
  • HIGH-FIDELITY
    final all assets and visual components

After each step that’s really important to test with your user !

15. Concept testing // TEST

  • Choose user
  • Usability testing
    I really loved this step, you see your product coming alive ! And thanks to users feedback you can improve the experience ! Everything become concrete ! That was a really nice first project.

Big thank you to my team Les Louves Alison Lagerlöf & Julie de Clausade, we did a great and complete job !

--

--

Aude Gerlinger

Currently a Global designer based in Lille (FR) // UX/UI designer . Branding . Scenography // http://audedesign.com/ (under construction)